Melhoria de Usabilidade e Padronização com o Mercado
Otimizando um componente essencial para reduzir fricções e alinhar a experiência à expectativa dos usuários
Função
UX/UI Designer
Mercado
Fintech / Real Estate
Duração
3 meses
Quando a usabilidade trava o fluxo
Durante a análise de gravações no Hotjar entre abril e setembro, percebi um padrão recorrente: usuários ficavam presos em modais de seleção, sem conseguir concluir ações simples como escolher um contato ou uma carteira.
O componente “combo box” (um seletor com possibilidade de digitação) abria um modal disfuncional que exigia rolagens verticais e horizontais, múltiplos cliques e ainda apresentava falhas de responsividade em diferentes telas.
Em muitos casos, os usuários abandonavam o fluxo por não conseguirem sair do modal.
O problema era grave: esses modais apareciam em praticamente todos os fluxos da plataforma, impactando diretamente a eficiência operacional e a percepção de confiabilidade do produto.
O ponto de partida
Apesar de a dificuldade ser perceptível nas gravações, a necessidade de atualização não era consenso no time.
Após alguns meses levantando dados e alimentando o debate internamente, encontrei o momento certo para propor a mudança durante um curso interno ministrado pela líder de design — quando o tema “padrões de input” surgiu como tópico.
A partir daí, a equipe aderiu à ideia e demos início à reformulação do componente.
Minha prioridade foi alinhar usabilidade, consistência visual e aderência a padrões de mercado, reduzindo a curva de aprendizado e tornando a experiência mais previsível.
Da análise à proposta
Os dados coletados mostravam que o componente antigo quebrava o fluxo natural de uso:
exigia múltiplos cliques;
tinha rolagem excessiva;
Não era responsivo;
e duplicava campos de busca, confundindo o usuário.
Propus a substituição por um seletor padronizado e responsivo, que permitisse digitação direta e sugestão dinâmica de resultados, reduzindo etapas e tornando o comportamento previsível entre diferentes contextos da plataforma.
Materializando a solução
A nova versão foi desenvolvida em alta fidelidade e documentada em handoff completo.
Testamos o componente em fluxos críticos — como Cadastro de Títulos e Transferências — para avaliar desempenho, clareza e tempo de conclusão da ação.
Implementação
Optamos por uma abordagem iterativa e mensurável, com testes A/B para validar o impacto da nova solução antes de escalar para toda a plataforma.
O novo componente foi primeiro aplicado nos fluxos mais críticos e recorrentes, permitindo comparar desempenho e tempo de execução entre as versões antigas e atualizadas.
Também definimos uma metodologia de implementação progressiva para garantir segurança e aprendizado a cada iteração:
Implementação inicial em fluxos críticos
Iteração primária, na primeira semana de uso
Iteração emergencial, para correção imediata de bugs
Correção de erros e ajustes visuais
Análise completa do mês de uso
Construção de relatório e implementação em escala
Essa abordagem evitou interrupções em fluxos essenciais e permitiu observar o comportamento real de uso antes de escalar.
Iteração e resultados iniciais
Na última semana de outubro e na primeira de novembro, realizei uma nova rodada de análises.
Acompanhei 5 usuários em interações com os modais de carteiras e contatos — e os resultados foram claros:
O tempo médio da ação caiu de 7–20 segundos para menos de 3 segundos
A interação passou de 5–6 cliques para apenas 1–2 cliques
Nenhum abandono de fluxo foi registrado nas novas gravações
Esses dados indicam um ganho real de eficiência e uma redução significativa de carga cognitiva.
Durante o acompanhamento, identifiquei também um erro de validação no fluxo de transferências, quando o usuário tentava inserir um documento fora da lista de contatos.
A solução — discutida em conjunto com o time de design e desenvolvimento — foi incluir uma mensagem de erro “Formato inválido” diretamente no menu suspenso, criando um novo status visual que orienta o usuário sem interromper o fluxo.
Aprendizados
💡 Mudanças estruturais exigem persistência e timing — defender a necessidade técnica no momento certo foi essencial.
💡 Acompanhar gravações reais antes e depois da implementação gera insights mais profundos do que métricas isoladas.
💡 Uma metodologia de rollout iterativo reduz riscos e melhora a qualidade final do produto.
Próximos passos
Com o componente validado nos fluxos críticos, o próximo passo é analisar o uso durante o mês completo, consolidar métricas e construir o relatório final de performance.
Em seguida, o padrão será implementado em escala, padronizando a experiência em toda a plataforma e elevando a consistência visual do Imobanco.
💬 Em resumo
Essa entrega reforça a importância de decisões orientadas por dados e comportamento real de uso.
Mais do que otimizar um componente, o processo consolidou um padrão que aproxima o Imobanco das melhores práticas de UX no mercado financeiro, e prepara o terreno para evoluções futuras.