Asics

Explore

Desktop

Jornada
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.

⁠

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:

⁠

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.

⁠

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:

⁠

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.

⁠

4 - Usuária verifica as imagens e informações do produto, e já verifica o frete.

Pontos observados já apontados em Usabilidade.

⁠

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”.

⁠

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:

⁠

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á.

⁠

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:

⁠

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 →

Acessibilidade⁠

⁠

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.

JornadaJornada

1 - Usuária acessa o menu de categoria, no header, com o mouse em Feminino, clica em Academia, sendo direcionada à página de categoria.

2 - Usuária aplica o filtro de cor, selecionando a opção cinza e, depois o tamanho 37, visualizando as opções que apareceram.

3 - Ela escolhe o tênis Asics Gel e clica no card do produto, sendo direcionada à PDP do produto.

4 - Usuária verifica as imagens e informações do produto, e já verifica o frete.

5 - Usuária clica no CTA Comprar e aparece uma mensagem de “Adicionado com sucesso”, e aí é direcionado para a página da sacola.

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.

Jornada
Jornada