UX/UI Designer
Meu papel
Jun - Set 2023
Prazo
Formalização de Documentos
Redesign da etapa de formalização de documentos em um fluxo de crédito, priorizando clareza e acessibilidade para usuários de maior faixa etária.
Direcionamento
Estratégia
Entendimento
Empatia
Estrutura e Problema
Definição
Exploração de Soluções
Ideação
Design e Prototipação
Prototipação
Validação e Ajustes
Testes
Estratégia
Sobre o projeto
Contexto
O projeto fazia parte de um sistema de empréstimo consignado. Em uma das etapas do fluxo, era necessário que o usuário enviasse fotos do seu documento de identidade (RG ou CNH) para validação e formalização do processo.
Essa etapa era crítica para aprovação do empréstimo, pois dependia da qualidade da imagem enviada para validação automatizada e/ou manual.
Problema
Foram identificados altos índices de erro na etapa de envio do documento.
Fotos com baixa qualidade (desfocadas, tremidas ou com reflexo)
Dificuldade de entender as instruções
Falta de feedback claro após a captura da imagem
Dificuldade para concluir a tarefa sem suporte
Esses problemas impediam a validação do processo, gerando retrabalho, frustração do usuário e aumento no tempo de formalização do empréstimo.
Solução
A equipe de UX foi acionada para redesenhar essa etapa com foco em usabilidade e redução de erros.
Análise dos principais pontos de fricção
Reformulação das instruções para maior clareza
Ajustes na interface para guiar melhor a captura da imagem
Simplificação do fluxo para torná-lo mais intuitivo
O objetivo central foi reduzir significativamente os erros, tornar o processo mais simples e aumentar a taxa de aprovação na primeira tentativa.
Minhas Contribuições
Análise dos problemas de usabilidade
Estruturação da nova solução de interface
Definição de melhorias nas instruções e microcopy
Prototipação da nova experiência
Antes
Estrutura e Problema
Cenário Atual
O desafio foi equilibrar as necessidades dos usuários com as demandas do negócio, considerando restrições de prazo e orçamento, mas reconhecendo a necessidade de melhorias estruturais na interface para garantir ganhos sustentáveis no longo prazo.
Adotamos uma abordagem equilibrada, combinando soluções rápidas de baixo impacto técnico para resultados imediatos com melhorias mais profundas voltadas à evolução contínua do produto.
Necessidades dos Usuários:
- Feedbacks claros durante as ações.
- Melhor hierarquia visual.
- Redução de excesso de texto.
- Simplificação do fluxo e menos cliques.
- Clareza nas instruções e orientações.
Necessidades do Negócio:
- Implementação ágil e de baixo impacto técnico.
- Mínimas alterações na estrutura atual.
- Soluções de fácil escalabilidade.
- Possibilidade de reaproveitamento em outras etapas do processo.
- Controle de custo no curto e longo prazo.
Entendimento
Pesquisas
Com todas essas informações à disposição, precisávamos compreender melhor quem era esse usuário que apresentava mais dificuldade no processo de formalização. Após uma pesquisa, foi criada uma persona focada nesse público, entendido como pessoas entre 40 a 70 anos.
Idade dos Usuários
Persona
Entendimento
Jornada do Usuário
Para compreender o problema com profundidade, mapeei a jornada do usuário com foco em identificar os pontos de maior fricção durante a formalização. A análise evidenciou as etapas críticas do fluxo e orientou a priorização das melhorias no redesign.
Entendimento
Concorrentes
Início das Pesquisas
Identificamos os principais concorrentes da América Latina com soluções de formalização semelhantes à nossa e direcionamos a análise para a etapa de captura de documentos. Estruturamos o estudo por etapas do fluxo e funcionalidades, buscando entender padrões de usabilidade aplicados na fotografia dos documentos.
Análise de Concorrentes:
A análise evidenciou oportunidades claras de melhoria. Muitos concorrentes já aplicavam funcionalidades e boas práticas que nossa plataforma ainda não possuía. Diversas dessas soluções eram simples de implementar e poderiam elevar significativamente a clareza, a usabilidade e a eficiência da nossa interface.
Mapeamento das Interfaces do Mercado
Benchmark Funcional e Comparativo
Estrutura e Problema
Cores
O sistema é modular e adapta as cores à marca de cada cliente. Porém, essa personalização excessiva gerava problemas de legibilidade e dificultava a leitura das informações.
A solução foi reduzir o uso de cores em áreas com texto e aplicá-las apenas em elementos de destaque, melhorando clareza e consistência visual.
Antes
Depois
Estrutura e Problema
Formalização
Uma das etapas que apresentava a maior quantidade de problemas relacionados à experiência do usuário era a tela de fotografia. Por conta disso, foi realizada uma análise a fim de identificar os principais problemas, possibilitando a atuação direta sobre eles.
Problemas Identificados:
1 - Label não eficiente, pois não auxilia o usuário na ação.
2 - Falta de sinalização mais clara na máscara da câmera.
3 - Possibilidade de usar uma máscara (GIF) para instruir o usuário a rotacionar o celular.
4 - Ausência de uma dica para orientar o usuário.
5 - Função da câmera full screen pouquíssima utilizada
Intervenções Realizadas:
1 - Melhoramos o label, agora fornecendo informações mais claras sobre a ação principal na tela.
2 - Adicionamos uma moldura que destaca mais onde a foto deve ser enquadrada.
3 - Adicionamos um GIF que demonstra o movimento que o usuário precisa fazer para rotacionar e enquadrar a foto.
4 - Criamos um card de dicas com o objetivo de resolver o problema mais comum relacionado às fotos.
5 - Substituímos um botão pouco utilizado e adicionamos um botão de dica flutuante (popup).
Antes
Depois
Design e Prototipação
Wireframes e Protótipos
Com todas essas soluções encontradas, chegou o momento de validar e testar com wireframes, que nos ajudarão a ter uma melhor noção de quanta informação ainda teremos na tela e como ficará a solução final.
Antes
Depois
Final
Wireframe Final
Design e Prototipação
Telas Finais
Com todas essas soluções encontradas, chegou o momento de validar e testar com wireframes, que nos ajudarão a ter uma melhor noção de quanta informação ainda teremos na tela e como ficará a solução final.
01
Novo Fluxo de Formalização de Documentos:
Ao final, temos um fluxo de formalização aprimorado e otimizado para os usuários, com menos cliques e informações mais precisas, além de conter menos textos. Trata-se de um fluxo que guia eficazmente o usuário em suas ações.
02
Melhores Feedbacks
Mesmo aprimorando o processo, ele nunca será isento de erros. Portanto, quando esses erros ocorrem, fornecemos feedbacks claros por meio de pop-ups para auxiliar o usuário.
03
Dicas e Instruções
Botões que abrem pop-ups de dicas para os usuários foram implementados em etapas que poderiam causar algum tipo de confusão, sem, no entanto, poluir a interface principal.
Design e Prototipação
Resultados
O objetivo foi tornar o fluxo de formalização mais claro e eficiente, reduzindo erros no envio de documentos (RG e CNH).
Após o redesign, observamos diminuição nos erros relacionados à captura de imagem e melhora na taxa de conclusão, especialmente entre usuários de maior faixa etária. A simplificação das instruções, redução de informações na tela e melhoria na hierarquia visual tornaram o processo mais intuitivo e previsível.
Validação e Ajustes
Próximos Passos
Objetivos
Com os resultados positivos na etapa de formalização, o próximo passo é escalar as melhorias para as demais fases do processo (selfie, comprovante de residência, coleta de assinatura), garantindo consistência de experiência em toda a jornada.
Além disso, propomos a implementação de métricas contínuas para monitorar eficiência, taxa de erro e abandono do fluxo.
Além disso, propomos a implementação de métricas contínuas para monitorar eficiência, taxa de erro e abandono do fluxo.
Métricas para validar o impacto
Taxa de Conclusão do Fluxo
Taxa de Erro na Captura de Documento
Tempo Médio de Conclusão
Taxa de Abandono por Etapa
