Product Designer
UX de autenticação
2024
Três logins fragmentados. Uma experiência de autenticação unificada.
Um cliente operava três sites com cadastros, logins e modelos de dados distintos. Desenhei a experiência de autenticação de uma camada unificada em Keycloak, com SSO e integração com VTEX, colaborando com engenharia e jurídico para conciliar segurança, privacidade e usabilidade.
Autenticação · Keycloak · SSO · Design Systems
Product Designer
UX de autenticação
2024
Três logins fragmentados. Uma experiência de autenticação unificada.
Um cliente operava três sites com cadastros, logins e modelos de dados distintos. Desenhei a experiência de autenticação de uma camada unificada em Keycloak, com SSO e integração com VTEX, colaborando com engenharia e jurídico para conciliar segurança, privacidade e usabilidade.
Autenticação · Keycloak · SSO · Design Systems
Product Designer
UX de autenticação
2024
Três logins fragmentados. Uma experiência de autenticação unificada.
Um cliente operava três sites com cadastros, logins e modelos de dados distintos. Desenhei a experiência de autenticação de uma camada unificada em Keycloak, com SSO e integração com VTEX, colaborando com engenharia e jurídico para conciliar segurança, privacidade e usabilidade.
Autenticação · Keycloak · SSO · Design Systems
Contexto e problema
Os três produtos haviam sido construídos de forma independente. Quem usava mais de um site precisava lidar com contas, senhas e sequências de cadastro separadas. Os estados de erro e caminhos de login social também variavam.
O login anterior em pop-up era rápido, mas limitava validação, consistência visual e gestão de identidade entre os sites. Uma revisão de conformidade identificou lacunas nos mecanismos de consentimento e rastreabilidade. O projeto precisava dar suporte aos requisitos de privacidade definidos com o jurídico, sem assumir que uma plataforma, por si só, garante conformidade legal.
Evidências
Mapeei nove fluxos: cadastro, login de usuários recorrentes e login social em cada um dos três sites. O mapeamento expôs diferenças estruturais, não apenas visuais, na sequência de registro, nos erros e nos níveis de fricção.
O benchmarking considerou Carrefour, Stix e Santander Esfera. A análise ajudou a comparar páginas dedicadas de autenticação, padrões de identidade e recuperação. Ela foi uma referência de projeto, e não uma prova de que um formato de login seja intrinsecamente seguro.
Restrições e arquitetura
O Keycloak usa temas de autenticação que precisavam respeitar os elementos renderizados pela plataforma. Colaborei com engenharia para entender o que podia ser customizado nos templates e quais comportamentos pertenciam à infraestrutura.
As três marcas exigiam identidade própria. A solução separou padrões estruturais compartilhados, como layout, validação e estados de erro, da aplicação visual por realm. A integração com VTEX e a revisão jurídica também faziam parte do contexto técnico.
Decisões e solução
1. Compartilhar estrutura e preservar as marcas
Criei padrões reutilizáveis para os fluxos de autenticação, com aplicação visual por marca. Isso evitava redesenhar a estrutura a cada propriedade e permitia manter consistência sem apagar sua identidade.
2. Validar no momento da interação
Campos passaram a ter feedback progressivo e orientação de recuperação. A validação de formato do e-mail ajudava a identificar erros antes de terminar o cadastro; confirmar a propriedade do endereço continuava sendo responsabilidade da autenticação.
3. Explicitar consentimento e privacidade
A superfície de consentimento foi desenhada e revisada com o jurídico. O material registra aceitação sem revisão na primeira submissão. Essa aprovação corresponde ao fluxo apresentado e não certifica toda a operação do cliente.
4. Documentar caminhos e estados
Especifiquei os fluxos de cadastro, login recorrente e social, incluindo carregamento, erros e recuperação. O objetivo era tornar a infraestrutura de identidade compreensível para pessoas usando um produto de consumo.
Impacto documentado
Os três sistemas fragmentados foram substituídos por uma experiência de autenticação consolidada. O modelo compartilhado com branding por realm criou uma base reutilizável para novas propriedades. O mecanismo de consentimento teve aprovação jurídica registrada no case.
Não há métricas de conversão, redução de chamados ou tempo de implementação apresentadas. O impacto documentado é estrutural e de entrega, sem alegar eliminação completa de riscos de segurança ou conformidade.
Meu papel e colaboração
Mapeei as jornadas, fiz o benchmarking e desenhei padrões de interação, componentes, estados e aplicação de marca. Documentei os fluxos para implementação. Engenharia cuidou da arquitetura e integração; o jurídico avaliou os requisitos e a superfície de consentimento.
Reflexão
Sistemas de identidade exigem clareza tanto nas ações possíveis quanto na recuperação de erros. Separar a estrutura comum da identidade visual ajuda a evoluir o sistema. Em projetos futuros, acrescentaria instrumentação por etapa para avaliar abandono, recuperação e uso entre propriedades.
Evidências
Mapeei nove fluxos: cadastro, login de usuários recorrentes e login social em cada um dos três sites. O mapeamento expôs diferenças estruturais, não apenas visuais, na sequência de registro, nos erros e nos níveis de fricção.
O benchmarking considerou Carrefour, Stix e Santander Esfera. A análise ajudou a comparar páginas dedicadas de autenticação, padrões de identidade e recuperação. Ela foi uma referência de projeto, e não uma prova de que um formato de login seja intrinsecamente seguro.
Restrições e arquitetura
O Keycloak usa temas de autenticação que precisavam respeitar os elementos renderizados pela plataforma. Colaborei com engenharia para entender o que podia ser customizado nos templates e quais comportamentos pertenciam à infraestrutura.
As três marcas exigiam identidade própria. A solução separou padrões estruturais compartilhados, como layout, validação e estados de erro, da aplicação visual por realm. A integração com VTEX e a revisão jurídica também faziam parte do contexto técnico.
Decisões e solução
1. Compartilhar estrutura e preservar as marcas
Criei padrões reutilizáveis para os fluxos de autenticação, com aplicação visual por marca. Isso evitava redesenhar a estrutura a cada propriedade e permitia manter consistência sem apagar sua identidade.
2. Validar no momento da interação
Campos passaram a ter feedback progressivo e orientação de recuperação. A validação de formato do e-mail ajudava a identificar erros antes de terminar o cadastro; confirmar a propriedade do endereço continuava sendo responsabilidade da autenticação.
3. Explicitar consentimento e privacidade
A superfície de consentimento foi desenhada e revisada com o jurídico. O material registra aceitação sem revisão na primeira submissão. Essa aprovação corresponde ao fluxo apresentado e não certifica toda a operação do cliente.
4. Documentar caminhos e estados
Especifiquei os fluxos de cadastro, login recorrente e social, incluindo carregamento, erros e recuperação. O objetivo era tornar a infraestrutura de identidade compreensível para pessoas usando um produto de consumo.
Impacto documentado
Os três sistemas fragmentados foram substituídos por uma experiência de autenticação consolidada. O modelo compartilhado com branding por realm criou uma base reutilizável para novas propriedades. O mecanismo de consentimento teve aprovação jurídica registrada no case.
Não há métricas de conversão, redução de chamados ou tempo de implementação apresentadas. O impacto documentado é estrutural e de entrega, sem alegar eliminação completa de riscos de segurança ou conformidade.
Meu papel e colaboração
Mapeei as jornadas, fiz o benchmarking e desenhei padrões de interação, componentes, estados e aplicação de marca. Documentei os fluxos para implementação. Engenharia cuidou da arquitetura e integração; o jurídico avaliou os requisitos e a superfície de consentimento.
Reflexão
Sistemas de identidade exigem clareza tanto nas ações possíveis quanto na recuperação de erros. Separar a estrutura comum da identidade visual ajuda a evoluir o sistema. Em projetos futuros, acrescentaria instrumentação por etapa para avaliar abandono, recuperação e uso entre propriedades.