Redesign Estratégico: Unificando a Experiência do Cliente no Portal e Login

Elevando a consistência e usabilidade através do Design Centrado no Usuário

Thiago Moura

Product Designer Sênior

DATORA

O Desafio: Uma Experiência Quebrada

A empresa operava com múltiplos sistemas legados, cada um com seu próprio login e interface.

Impacto Direto no Usuário:

Confusão e dificuldade de navegação entre sistemas
Necessidade de múltiplos logins
Percepção negativa da experiência

Impacto no Negócio:

Inconsistência de marca
Alta taxa de chamados de suporte para acesso
Barreiras na adoção de novas funcionalidades

Sistemas desconexos com interfaces inconsistentes

Nosso Objetivo: Uma Plataforma Única e Coesa

Visão:

Criar um Portal do Cliente centralizado com uma experiência de login unificada.

Consistência Visual

Redesenhar interfaces para garantir consistência visual e funcional alinhada ao branding.

Usabilidade

Melhorar drasticamente a usabilidade e reduzir a fricção no acesso e navegação.

Escalabilidade

Estabelecer uma base escalável para futuras integrações no portal.

Percepção de Valor

Aumentar a percepção de valor e profissionalismo da marca.

Liderando o Design em um Time Colaborativo

Minha Atuação (Product Designer Sênior):

Liderei todo o ciclo de design (Pesquisa, Definição, Ideação, Prototipagem, Testes, Handoff)
Facilitei workshops e sessões de co-criação
Ponto focal para garantir a visão da experiência do usuário ponta-a-ponta
Colaborei ativamente na definição de requisitos junto ao PO e na validação técnica com Devs
Responsável pela documentação final e handoff

Squad:

1 PO

3 Devs

1 QA

1 Scrum Master

1 UX Researcher

Colaboração essencial na fase de Descoberta

Nosso Processo: Navegando a Complexidade com o Duplo Diamante

Adotamos o Duplo Diamante para garantir exploração profunda do problema antes de convergir para a solução.

Descobrir

Imersão no problema

Definir

Foco no desafio

Desenvolver

Geração de soluções

Entregar

Implementação

Foco: Entendimento real das dores → Definição clara → Ideação ampla → Entrega validada

Duração Total: ~6 meses (Imersão à Produção)

Insights da Descoberta: Entendendo Usuários e Negócio

Métodos Chave:

Imersão no Negócio: Análise da cultura, objetivos estratégicos e limitações técnicas
Pesquisa Quali/Quanti: Entrevistas com usuários, análise de dados (Analytics, Hotjar) e pesquisas
Benchmarking: Estudo de soluções de login/portal no setor financeiro e mercado B2B/B2C

Principais Achados:

Confirmação da frustração com logins múltiplos/inconsistentes
Desejo por um ponto central para acessar informações e serviços
Identificação de padrões de comportamento e necessidades específicas (Personas)

Mapa de Empatia (Snippet)

Pensa e sente

"Por que preciso lembrar tantos logins diferentes?"

Ouve

Colegas reclamando da mesma dificuldade

Vê

Interfaces inconsistentes entre sistemas

Dores

Tempo perdido com problemas de acesso

"Sempre me perco tentando achar onde está cada funcionalidade. Parece que cada sistema foi feito por uma empresa diferente."

— Usuário durante entrevista

Definindo o Caminho: Prioridades e Oportunidades

Síntese dos Achados:

Mapeamento da Jornada do Usuário (As-Is) para visualizar pontos de dor.

Jornada do Usuário (Pontos de Dor Destacados)

Usuário não sabe qual login usar

Navegação inconsistente entre sistemas

Dificuldade em encontrar funcionalidades

Priorização:

Definição clara do problema central a ser resolvido e das oportunidades de melhoria com maior impacto.

Problemas Prioritários

1

Múltiplos sistemas com logins separados causam confusão

2

Inconsistência visual entre interfaces prejudica a usabilidade

3

Navegação fragmentada dificulta o acesso a funcionalidades

Alinhamento:

Validação dos problemas e oportunidades com stakeholders e PO.

Construindo a Solução: Ideação, Prototipagem e Iteração

Ideação Colaborativa:

Brainstorms e workshops de co-criação com a squad.

Prototipagem Evolutiva:

Wireframes de baixa fidelidade (Figma): Foco na estrutura e fluxo
Protótipos interativos de alta fidelidade (Figma): Validação de usabilidade, interações e design visual

Design Inclusivo:

Aplicação das diretrizes WCAG desde as fases iniciais do design visual.

Feedback Contínuo:

Validações intermediárias com stakeholders e devs para garantir viabilidade.

Evolução do Design

Wireframe

Mid-fi

Hi-fi

Validando com Usuários e Preparando para o Lançamento

Testes de Usabilidade:

Sessões moderadas com 5 usuários representativos (via Maze/Presencial).

Insights Chave:

Usuários encontraram dificuldade inicial com o novo padrão de navegação (ajustado com breadcrumbs mais visíveis)
Preferência por um campo de busca mais destacado na homepage do portal

Testes A/B:

[Se aplicável, mencione o que foi testado e qual variante venceu]

Testes de Acessibilidade:

Verificação de contraste, navegação por teclado, leitores de tela (WCAG).

Sessão de teste de usabilidade

Handoff Detalhado:

Documentação completa no Figma (com DevSpecs)
Assets visuais (Photoshop/Illustrator)
Acompanhamento via AzureDevOps/Jira

Acompanhamento Pós-Deploy:

Monitoramento inicial e planejamento de iterações futuras.

O Resultado: Uma Experiência Coesa e Intuitiva

Interface de login única, padronizada e segura. Portal do Cliente centralizado com navegação clara e acesso fácil aos sistemas. Design system aplicado garantindo consistência visual e funcional. Fluxos otimizados e acessíveis.

Acesse sua conta

Tela de login unificada

Portal do Cliente unificado

Resultados Concretos: O Valor Entregue

Chamados de Suporte

-42%

Redução nos chamados relacionados a problemas de acesso nos primeiros 3 meses

Taxa de Conversão

+28%

Aumento na taxa de sucesso no primeiro acesso

Adoção de Funcionalidades

+35%

Aumento na adesão/uso das funcionalidades chave

Feedback Qualitativo

4.8/5

Satisfação dos usuários com a nova experiência

Eficiência Interna:

Elogios do time de desenvolvimento pela qualidade do handoff, resultando em menor tempo de desenvolvimento e menos bugs.

Lições Aprendidas e Próximas Etapas

Confirmações:

A imersão profunda no negócio e a colaboração cross-funcional são cruciais para soluções eficazes e alinhadas
Testes com usuários reals (mesmo com poucos) trazem insights valiosíssimos e evitam retrabalho

O Que Faria Diferente (Oportunidades):

Integrar testes de acessibilidade ainda mais cedo, desde os wireframes
Implementar um ciclo de feedback com usuários mais frequente (pequenas sessões contínuas) ao invés de apenas marcos maiores

Próximos Passos (Visão de Futuro):

Assistente Virtual

Implementar chatbot inteligente para suporte imediato no portal

Experiência Mobile

Otimizar a experiência para dispositivos móveis com app dedicado

Ferramentas Utilizadas

Figma

Miro

Maze

Hotjar

AzureDevOps

Jira

Photoshop

Illustrator