Transformando uma ferramenta externa em uma experiência integrada
Como o redesign do Keycloak criou uma experiência consistente de autenticação e gerenciamento de contas.
Contexto
O Keycloak seria utilizado para autenticação e gerenciamento de contas de todos os produtos da organização, mas sua interface apresentava uma experiência visual desconectada da identidade visual da empresa.
Desafio
Eliminar a sensação de ferramenta externa e criar uma experiência consistente com o restante da organização.
Minha atuação
- UX/UI Design
- Design System
- Prototipação
- Handoff
A interface do Keycloak funcionaria de forma isolada dentro do ecossistema Delage. Usuários perceberiam a mudança de contexto ao acessar funcionalidades de conta e autenticação, criando fricção e quebrando a continuidade da experiência.
Interface desalinhada à marca
Navegação inconsistente
Hierarquia visual pouco clara
Experiência fragmentada
Tela de Login
Identidade visual da Delage substituiu o padrão genérico do Keycloak — logo, imagem de fundo e paleta de cores próprias
Recursos de UX adicionados: checkbox "Manter-me conectado" e link de recuperação de senha
Tom de produto nativo: a tela deixou de parecer uma ferramenta SaaS de terceiros e passou a pertencer ao ecossistema Delage
Tela de Perfil
Novo cabeçalho integrado
Componentes alinhados ao Design System
Melhor organização dos campos
Hierarquia visual mais clara
Integração visual
O Keycloak foi adaptado ao sistema de design da organização, incorporando padrões visuais já utilizados nos demais produtos. Tipografia, cores, componentes e espaçamentos foram revisados para criar uma experiência mais consistente ao longo da jornada do usuário.
Uma experiência visual mais coesa, reduzindo a sensação de estar utilizando uma ferramenta externa ao produto principal.
Navegação mais familiar
A estrutura de navegação e a hierarquia de informações foram reorganizadas para refletir padrões já conhecidos pelos usuários em outros módulos da plataforma.
Uma navegação mais previsível e intuitiva, minimizando a percepção de transição entre sistemas.
Hierarquia visual aprimorada
Campos, agrupamentos e ações foram reorganizados de acordo com sua relevância e frequência de uso, destacando tarefas críticas relacionadas à conta e à segurança.
Maior clareza na localização de informações e recursos importantes, reduzindo o esforço necessário para executar tarefas recorrentes.
O Keycloak deixou de ser percebido como uma ferramenta isolada e passou a fazer parte da experiência do produto.
Experiência integrada
Padrões visuais e de navegação alinhados ao restante da plataforma.
Maior clareza de navegação
Informações e ações reorganizadas para facilitar localização e entendimento.
Consistência visual
Aplicação do design system para fortalecer a identidade do produto e a continuidade da experiência.