Novo Checkout
Data
2023
Função
UX e UI Designer
Tipo de projeto
Product Design
O problema que precisávamos resolver:
O checkout vigente dava suporte a pouco mais de 10 serviços digitais do nosso portfólio. Com a mudança nos objetivos da empresa, esse número passaria para mais de 20 produtos. No entanto, o sistema de checkout, lançado em 2008, já apresentava limitações e precisava urgentemente de uma modernização. Entre os principais pontos estavam:
-
Experiência ruim em dispositivos mobile
-
Ausência de carrinho para múltiplos produtos
-
Alta taxa de abandono
-
Baixa taxa de conversão
-
Oportunidade de aumento do ticket médio
Por que este case?
Impacto real no negócio
Este projeto teve impacto direto nos indicadores de performance da empresa, gerou +22% em conversão geral, além de ter sido replicado em outras frentes de negócio.
Minha participação
Participei de ponta a ponta: desde o entendimento do problema até as etapas de pesquisa, definição, prototipação, testes de usabilidade e QA com os desenvolvedores.
Design Systems
A partir deste projeto, criamos nossa biblioteca de componentes e iniciamos a documentação para outros produtos.
O processo de design
O processo de design
Benchmark
O que analisamos nos concorrentes?
Mapeamos o processo de compra dos concorrentes diretos e indiretos, com foco em:
-
Etapas de carrinho
-
Login e cadastro
-
Formas de pagamento
-
Conclusão da compra
Quais ideias boas surgiram?
Percebemos que o processo de cadastro era simplificado e centrado no e-mail como principal identificador. Além disso, o uso de código de verificação (via e-mail ou sms) já era comum entre os concorrentes, reforçando a segurança sem impactar negativamente o funil de compra. Isso nos deu segurança para propor uma etapa extra que seria o Pin, sem receio de aumentar a taxa de abandono.
O processo de design
Descobertas e Pesquisas
Como investigamos?
-
Utilizamos mapas de calor, gravações de tela e dados do funil de vendas para entender o comportamento dos usuários.
O que descobrimos?
-
A maioria dos usuários eram novos no ambiente
-
Em mobile, havia dificuldades no preenchimento dos campos, mal distribuídos e sem divisão por etapas
-
Usuários não encontravam facilmente suporte ao enfrentar erros de sistema
O processo de design
Ideação e Testes
Design Thinking
-
Realizamos workshops com diferentes áreas da empresa para mapear os problemas do checkout atual e discutir possíveis soluções.
Protótipo e testes de usabilidade
-
Criamos a primeira versão do Novo Checkout e testamos com dois fluxos diferentes, incluindo funcionalidades como carrinho de compras e cupom de desconto.
Feedbacks importantes
-
Usuários costumavam adicionar produtos ao carrinho para “salvar” e voltar depois
-
O momento decisivo de compra acontecia no carrinho, não no pagamento
-
Posicionar o campo de cupom apenas na etapa final gerou confusão, pois o calculo de preço que o usuário fazia era no carrinho de compra
O processo de design
Design Final e QA
User Interface
Ajustamos o fluxo com base nos testes. A estrutura geral se manteve, validando a proposta inicial como intuitiva e eficiente.
QA
Criamos um documento compartilhado com os desenvolvedores para registrar ajustes no ambiente de homologação. Esse formato passou a ser utilizado em outros projetos da empresa.
Nota pessoal: Foi um desafio, pois ainda não dominava QA, mas aprendi a documentar e colaborar com o time técnico.
Resultados
Resultados
Impacto do produto
Systems Usability Scale
Ainda em protótipo, o checkout recebeu pontuação 81 na escala SUS, validando efetividade, eficiência e satisfação dos usuários.
Em produção
Com o novo checkout em funcionamento, analisamos o funil de vendas e os resultados foram surpreendentes.
Curiosidade: O tempo de finalização de compra melhorou tanto que ativou o antifraude do sistema, bloqueando usuários por “compra suspeita”.
Impacto em números
Etapa de Pagamento: +226%
Conversão geral: +22%
Resultados
Reconhecimentos
Vivo Reconhece
O projeto foi indicado ao programa interno de premiação por gerar resultados relevantes ao negócio.
Vivo Empresas
A solução foi adotada também no e-commerce da Vivo Empresas, expandindo seu impacto para o público corporativo.
Aprendizados e o que faria diferente
Aprendizados e o que faria diferente
O que aprendemos
Carrinho de compra
Usuários não tiveram dificuldades na adição de produtos. O modelo de carrinho é familiar e intuitivo para o público.
Cadastro
A remoção do CPF da etapa inicial e a exibição da senha apenas no final foram bem aceitas. Não houve dificuldade.
Código Pin
Apesar de ser uma nova etapa no fluxo, os usuários entenderam a necessidade por mais segurança, isso não afetou a taxa de conversão.
Aprendizados e o que faria diferente
O que faria diferente
Alinhar backend desde o início
Ter reforçado aos stakeholders a importância de um backend preparado para as mudanças propostas. A ausência de PO e PM aumentou a complexidade.
Mais proximidade com devs
Estar mais presente no handoff para garantir que as entregas fossem fiéis ao Figma, mantendo consistência visual e de usabilidade.
