top of page
Checkout Vivo
UI/UX Design
Desafio
Melhorar a usabilidade do fluxo de checkout do Vivo Total web e mobile para aumentar o número de conversões.
Objetivo
Redesenho do fluxo, com ênfase na clareza das informações apresentadas e melhoria da navegação em dispositivos móveis e desktop. Além disso, ajustes visuais e funcionais para tornar a interface mais intuitiva, reduzindo fricções e aumentando a conversão.
✨ Atuei como única designer no projeto, tendo contato direto com stakeholders e desenvolvedores.
.png)
.png)
Análise Heurística
Etapa 01
O primeiro passo foi realizar a análise das 10 heurísticas de Nielsen. Elas incluem: visibilidade do status do sistema; correspondência entre o sistema e o mundo real; controle e liberdade do usuário; consistência e padrões; prevenção de erros; reconhecimento ao invés de memória; flexibilidade e eficiência de uso; estética e design minimalista; ajuda na recuperação de erros; e ajuda e documentação.
✨ Com a análise foi possível encontrar pontos de atenção, como falta de padronização, de acessibilidade e prevenção de erros.
.png)
.png)
Benchmarking
Etapa 02
Foi realizado um benchmarking do fluxo de compra das empresas Tim e Claro Net.
No fluxo também foram consideradas as 10 heurísticas de Nielsen.
✨ Através do benchmarking, foi possível perceber que os concorrentes usam um design mais simples e minimalista, com maior ênfase para os campos do formulário.
.png)
Design Critique
Etapa 03
Após o criação de uma proposta de solução a partir das análises feitas, foram realizadas sessões de design critiques com outras designers da equipe.
✨ A proposta teve como base o brandbook da Vivo, criando assim uma identidade visual unificada, com inputs de estados mais claros e botões com melhor legibilidade. Além dos ícones padronizados e a navegação mais fluída.
.png)
✨ As sessões de design critique foram importantes para perceber qual o melhor tipo de card e qual o input mais claro, por exemplo.
Protótipos
Etapa 04
Após ajustes depois das sessões de design critique, criei os protótipos web e mobile do novo checkout.
Acesse aqui o protótipo mobile.
Testes com Usuários
Etapa 05
Na última etapa, realizei testes de cada protótipo com 5 usuários diferentes.
✨ Com os protótipos testados com usuários foi perceptível a melhora no fluxo, apesar de ainda existir uma queixa sobre o formulário ser muito extenso.
.png)
Telas finais
Entrega
Os protótipos passaram em todos os testes sem feedbacks negativos ou possíveis correções, então documentei as mais de 50 telas para handoff pro time desenvolvimento.
✨ Após a entrega do novo checkout, sugeri acompanhamento da taxa de retenção na página (analisar onde os usuários abandonam o checkout), de conversão (número de usuários finalizando um pedido) e um NPS do fluxo.
Vamos trabalhar juntos?
bottom of page