top of page
Projeto Checkout Inversa
UI/UX Design
Contexto
A Inversa implementou um novo checkout que permite que o usuário assine outro produto com desconto na compra. Com 3 meses de implementação do novo checkout esperava-se uma taxa de conversão de 50%, além de uma alta nas conversões com cross-sell. A situação real foi de taxa de conversão de apenas 20% no checkout e poucas vendas cross realizadas.
Impacto
O usuário não conseguir finalizar a compra no site fez com que o número de atendimentos telefônicos e via e-mail da área de costumer experience aumentasse. Além disso, o investimento feito pela Inversa e a falta de geração de receita impactaram diretamente a empresa.
✨ Atuei como única UI/UX Designer do projeto, junto a dois stakeholders, uma PO e dois desenvolvedores.
OKRs
Imersão
O primeiro passo foi, junto aos stakeholders, definir os OKRs, fundamentais para alinhar e medir o impacto da solução, garantindo que design esteja alinhado não só com os objetivos do usuário mas também com os objetivos estratégicos do negócio.
Hipóteses
Imersão
A partir da definição do problema, foi possível realizar o levantamento de 3 hipóteses do por quê o checkout não estava vendendo e não havia número significante de vendas cross-sell.
Confirmação das Hipóteses
Imersão
Para confirmação ou não das hipóteses, selecionei quais ferramentas e estudos poderiam ser utilizados. No caso dessas hipóteses específicas, o Google Analytics, Hotjar e SurveyMonkey foram as ferramentas ideiais.
✨ As duas primeiras hipóteses foram confirmadas através das análises escolhidas, e com elas identifiquei que os usuários estavam deixando a
página do checkout após a parte de cadastro. Com os heatmaps e gravações de tela, notei o possível motivo: o botão para a próxima etapa não
estava aparecendo em dispositivos com tela menor.
Proto-persona
Imersão
Para confirmação (ou não) da segunda hipótese, também aproveitei o momento de feedback dos usuários para coletar informações demográficas. Antes de partir para um formulário, criei uma proto-persona com os stakeholders, uma representação simplificada do usuário que pensamos que utiliza o produto.
✨ Aqui, utilizamos apenas suposições e informações previamente adquiridas, sem nenhum dado real de usuários.
.png)
Pesquisa Quantitativa e Top Insights
Imersão
Pensando em um método de pesquisa que alcance o maior número de pessoas usuárias de forma facilitada, escolhi a pesquisa por formulário.
O recrutamento foi feito a partir de base interna, levando em consideração o tempo do usuário na base, os tipos de produto que o usuário possui e o período que o usuário esteve ativo.
✨ A pesquisa foi dividida em duas etapas com objetivos distintos. A primeira etapa para conhecer melhor as pessoas usuárias e a segunda etapa para validar a oferta do checkout.
Persona e Job Stories
Definição
Após comparação da proto-persona com os dados dos usuários, foi possível entender que a visão da empresa sobre a pessoa usuária estava parcialmente correta.
Com isso, criei uma persona baseada nos dados da pesquisa e 3 job stories.
Benchmarking
Definição
O próximo passo foi realizar o benchmarking de dois concorrentes, Empiricus e Suno Research, para entender como funcionam seus checkouts.
✨ O diferencial do checkout da Inversa é a oferta cross-sell e a seção de depoimentos dos usuários. Ambos os benchmarks separam o checkout
em etapas e mantém a informação do produto em formato de card expansível.
Análise Heurística
Ideação
Entrando na etapa de ideação, fiz a análise das 10 heurísticas de Nielsen do checkout implementado, e também criei o userflow.
✨ Os pontos de atenção se dão principalmente na falta de acessibilidade das cores utilizadas e a falta de padronização dos componentes.
Moodboard e Wireframes
Ideação
Em seguida, criei um moodboard para referências visuais. Optei por opções de checkout que possuem oferta de mais produtos, além de manter o botão fixo no rodapé.
Nos wireframes, estudei dividir o checkout em carrinho, cadastro e pagamento.
✨ A proposta dos wireframes também adiciona um botão de "Ajuda", um dos itens levantados na análise heurística.
Telas finais
Entrega
Então criei as telas do fluxo de checkout na versão mobile para testar com usuários.
Na proposta, deixei o botão de checkout e o total fixos no rodapé, de forma que fiquem sempre visíveis em todos os dispositivos. Também priorizei o campo de cupom e o card do cross-sell, para que mesmo quando o item principal seja expandido eles ainda fiquem visíveis no mesmo scroll.
✨ Mantive o header do site da Inversa, além de utilizar a fonte e as cores da marca. Aqui comecei a criar componentes para um futuro Design
System de forma que seja possível começar a utilizar os novos componentes sem deixar as interfaces de outros fluxos destoantes.
.png)
Testes com usuários
Entrega
O protótipo da solução final (que pode ser acessado aqui) foi testado com sucesso com 5 usuários.
Nos testes, os usuários conseguiram completar o fluxo de compra facilmente, sem interrupções.
✨ Os usuários (3 de 5) também disseram que a parte com botão continuar é a que mais chama a atenção na interface.
Entrega final
Entrega
Foram entregues os dados da pesquisa quantitativa com os top insights, a persona e suas job stories, o benchmarking, análise heurística, userflow, wireframes e um protótipo iterado.
Também fiz as telas versão app e desktop e criei os primeiros componentes para iniciar um design system.
✨ O acompanhamento do produto após a entrega foi feito através da taxa de conversão de vendas (aumento de mais de 50%) e número de
vendas cross-sell (25% das compras realizaram uma compra cross). Além disso, foi verificado a baixa de chamados para o time de CX com
demanda de venda.
.png)
Vamos trabalhar juntos?
bottom of page