Desktop

Jornada

Realizamos o mapeamento da jornada efetuada pelo usuário, desde a busca pelo produto desejado até a etapa de finalização da compra.
Cenário: a usuária está buscando um tênis para começar a academia.
1 - Usuária acessa o menu de categoria, no header, com o mouse em Feminino, clica em Academia, sendo direcionada à página de categoria.
Pontos observados além daqueles já apontados:
Breadcrumb está incorreto e pode causar confusão ao usuário.
Filtro de tamanho duplicado não está fazendo muito sentido.
Filtro “Indicado para” não faz sentido do jeito que está, quando a usuária especificamente clicou em academia no dropdown de categoria.

image.png
image.png
image.png
Sugestões de melhoria:
Segundo o estudo de CRO, “Feminino” e “Masculino” não são departamentos, mas sim resultados de busca. Então, o ideal é cadastrar corretamente os departamentos, as categorias e as subcategorias para que o breadcrumb fique correto - ex: Departamento Feminino, Categoria Calçados, Subcategoria Academia. *Falar com as Especialistas Vtex.
É interessante destacar os filtros aplicados conforme a opção escolhida pela usuária, conforme se verifica na referência da New Balance - filtrado por: feminino, tênis, treino e academia, mostrando para o usuário os filtros já aplicados com uma cor de destaque, auxiliando, assim, sua jornada na hora de escolher mais filtros.
É ideal que haja apenas uma opção de filtro de tamanho, para não causar confusão ao usuário.
É interessante ter outras opções de filtro, como modelo, tecnologia, preço.
UI/Dev - absorvido em Mobile
Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design; 5ª, prevenindo erros; 6ª, promovendo o reconhecimento em vez de memorização; 7ª, apresentando eficiência e dando flexibilidade de uso; 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto
Referências:
image.png
image.png
image.png
2 - Usuária aplica o filtro de cor, selecionando a opção cinza e, depois o tamanho 37, visualizando as opções que apareceram.
Pontos observados além daqueles existentes em Usabilidade:
Opção de seleção do tamanho parece que está, na verdade, não selecionado.
Após a aplicação dos filtros, os resultados aparecem no meio da página, e a usuária é obrigada a realizar o scroll para cima, se quiser aplicar filtro de ordenação.

image.png
image.png
Sugestões de melhoria:
Ideal deixar destacada a opção escolhida pelo usuário diante das outras opções.
Corrigir o bug de direcionamento.
UI/Dev - Absorvido em Mobile
Heurísticas de Nielsen atendidas: 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto
Referência:
image.png
image.png
3 - Ela escolhe o tênis Asics Gel e clica no card do produto, sendo direcionada à PDP do produto.
Pontos observados já apontados em Usabilidade.
image.png
image.png
4 - Usuária verifica as imagens e informações do produto, e já verifica o frete.
Pontos observados já apontados em Usabilidade.
image.png
image.png
image.png
5 - Usuária clica no CTA Comprar e aparece uma mensagem de “Adicionado com sucesso”, e aí é direcionado para a página da sacola.
Ponto observado além daqueles apontados em Mobile:
Diferentemente do Mobile, aqui aparece “Meu Carrinho”.

image.png
image.png
Sugestão de melhoria:
Ideal que haja uma padronização da página de Sacola, identificando a página também em Mobile.
UI/DEv - absorvido no redesign da sacola
Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design; 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto
Referência:
image.png
6 - Usuária clica em “continuar”, sendo direcionada para a página de “Finalizar Compra”. Preenche seu e-mail e clica no botão “>”, obtendo uma informação de “Página sem resposta” e, após aguardar um pouco é finalmente direcionada para o checkout.
Pontos observados além daqueles apontados em Mobile:
Verificar possível bug com relação ao direcionamento para o checkout.
A barra de evolução - Dados Pessoais/Entrega e Pagamento/Confirmação, está confusa, pois não deixa claro em que etapa a usuária está.

image.png
image.png
image.png
image.png
Sugestões de melhoria:
Corrigir o bug de direcionamento.
Deixar a barra de evolução mais intuitiva para o usuário, mostrando exatamente o caminho a percorrer para chegar na confirmação.
Refatoração Dev - 1h / UI - 3h
Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 4ª, dando consistência e padronização ao design; 6ª, promovendo o reconhecimento em vez de memorização; 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto
Referência:
image.png
Conclusão: o fluxo de busca por um tênis para academia funcionou, com leve desvio e quebra de expectativa na hora do direcionamento para o checkout. Botões e funcionalidades clicados funcionam e o direcionamento para as páginas ocorre de forma correta, com exceção dos bugs de direcionamento apontados acima. Assim, a usuária consegue atingir o objetivo de comprar um tênis para iniciar a academia. Entretanto, podemos deixar o fluxo ainda mais intuitivo e melhor para a usuária, conforme apontamos em “Sugestões de melhoria”.


Próxima Página →

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.