ArcelorMittal

Explore

Mobile

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: o usuário está buscando vergalhão CA-50 para a obra que a sua construtora irá fazer.

1 - Usuário acessa a lupa para buscar o que precisa.

Pontos observados:

Estado primário da busca é fechado, obrigando o usuário a efetuar alguns cliques para conseguir realizar a pesquisa.

Cor da fonte do placeholder sem contraste, dependo da tela de mobile não dá para enxergar.

Recurso de acessibilidade para cegos retornou como: “buscar/botão/fim/banner”.

⁠

Sugestões de melhoria:

Ideal é que a busca seja exibida aberta e com destaque, facilitando o reconhecimento pelo usuário e sua navegação.

Para auxiliar e facilitar a jornada, o ideal seria já trazer os termos mais buscados quando o usuário clicar para escrever e/ou dar a opção de autocomplete.

Pensar em uma cor que tenha contraste, dando visibilidade em qualquer tipo de tela de mobile.

Ideal, para facilitar a navegação das pessoas cegas, é pensar em uma forma de deixar o retorno como: “buscar/botão”.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 2ª, apresentando compatibilidade entre o sistema e o mundo real; 3ª, dando controle e liberdade para o usuário; 5ª, prevenindo eventual equívoco por parte do usuário; 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ência:

⁠

2 - Usuário clica na lupa é direcionado à página de resultado. Ele dá 2 scrolls e encontra o produto que está precisando.

Pontos observados:

Banner de Resultado da Busca está ocupando muito espaço, deixando os resultados para a segunda dobra.

O produto da busca apareceu depois de outro produto, o que pode causar frustração, já que a busca foi específica.

Card do produto com inconsistências: cores da tarja de desconto semelhantes às do CTA; botão CTA sem destaque e sem formato de botão; as cores não passam no teste de acessibilidade, pois falta contraste.

⁠

Sugestões de melhoria:

Aconselhável repensar o design para deixar os resultados mais visíveis na primeira dobra.

Ideal é verificar se a busca consegue identificar todos os elementos digitados com o intuito de trazer um resultado mais preciso na pesquisa.

Ideal é redesenhar o card de produto, deixando-o consistente e dando destaque para o CTA.

- Já estimado!

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 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:

⁠

3 - Ele clica no card e é direcionado à página do produto. Visualiza todas as informações necessárias e é obrigado a dar vários scrolls para voltar e verificar o CEP, antes de comprar.

Pontos observados:

Breadcrumb mal posicionado.

Imagem do produto ocupando muito espaço, deixando as informações relevantes como preço e descrição para a segunda dobra.

Design apresentando algumas inconsistências: paleta de cores utilizadas no CTA também é utilizada para descontos; formato do CTA é o mesmo da tarja de desconto; vitrine “quem comprou” com design dos bullets quebrado (junto com as setas indicativas).

Espaço de avaliação sem qualquer avaliação.

⁠

Sugestões de melhoria:

Ideal que o breadcrumb fique posicionado no topo da página, seguindo a leitura

Padrão Z⁠

Ideal é que a hierarquia visual esteja presente, deixando as informações importantes como título e avaliações, por ex, acima da galeria de imagens, facilitando a navegação, deixando-a mais fluída e aumentando o rankeamento de SEO. Pensar em um design que deixe as principais informações na primeira dobra.

Corrigir as inconsistências ajudará na experiência e na tomada de decisão do usuário.

Verificar se há bug na seção de avaliações do produto. Em caso negativo, pensar em uma forma de convidar o usuário a avaliar o produto.

Ideal acrescentar uma barra de adicionar ao carrinho flutuante.

Impacto: Baixo

⁠

Alto

Referências:

⁠

4 - Usuário clica para verificar o CEP.

Pontos observados:

Feedback sem destaque.

Testamos diversos CEPs e constatamos se tratar de um bug porque depois funcionou.

⁠

Sugestões de melhoria:

Ideal que o feedback tenha mais destaque, deixando evidente ao usuário aquela informação. - 1h (UI)

Corrigir o bug quanto ao CEP para não ocorrer a evasão do usuário do e-commerce. - Dev direto

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 2ª, apresentando compatibilidade entre o sistema e o mundo real; 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:

⁠

5 - Usuário clica no CTA Comprar e aparece o pop-up de finalizar compra e continuar comprando.

Ponto observado:

Informação do CTA não está de acordo com o direcionamento - comprar remete ao checkout e não à adicionar ao carrinho.

⁠

Sugestões de melhoria:

Ideal que a informação do CTA tenha direcionamento compatível.

Pensar em adicionar outro botão, dando liberdade ao usuário para escolher a jornada que deseja.

Alterar a importância de CTA - - 1h (UI)

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª, dando controle e liberdade para o usuário; 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:

⁠

6 - Ao clicar em finalizar compra, o usuário é direcionado à página de carrinho.

Pontos observados:

Informação da quantidade de produto do carrinho “Seus Produtos (0)” não está condizente com o produto contido no carrinho.

Botão finalizar compra geralmente está presente no carrinho e não em pop-up.

Informações relativas à entrega ficam na segunda dobra.

Botão de calcular o frete em estado primário fechado e fora dos padrões de design do restante do site.

⁠

Sugestões de melhoria:

O ideal é que o pop-up apenas informe que o produto foi adicionado ao carrinho e, dentro da página de carrinho tenha os botões de “continuar comprando” e “finalizar a compra”.

Ideal é deixar as informações relativas ao frete e entrega na primeira dobra.

Ideal é deixar o placeholder de calcular o frete já aberto, dando visibilidade ao usuário e facilitando sua jornada de cliques.

Padronizar o design dos botões e placeholders de todo o e-commerce.

Redesign do meu carrinho - 4h

Impacto: Baixo

⁠

Alto

Referência:

⁠

7 - Usuário clica em fechar pedido e é direcionado à página de checkout.

Pontos observados:

Placeholder do e-mail sem contraste, dificultando a leitura pelo usuário.

CTA com gradiente e a cor da fonte da informação “continuar” sem contraste, prejudicando a leitura, principalmente em algumas telas de mobile.

Bullet do componente de política de privacidade com tamanho muito pequeno (quase impossível de enxergar) e desproporcional ao dedo dos usuários.

Bullet do componente de política de privacidade aparece novamente, mesmo depois de já ter sido clicado na primeira etapa de preenchimento do e-mail, o que pode gerar confusão e irritação ao usuário.

Para os campos de dados pessoais não há indicação de preenchimento obrigatório como ocorre na etapa de e-mail.

Questionamento sobre a finalidade de uso do produto que está sendo comprado não explica o motivo da pergunta e, da maneira como está pode causar constrangimento ao usuário.

Design de checkbox inconsistente - em formatos de bullets e quadrado.

⁠

Sugestões de melhoria:

Melhorar o contraste do placeholder do e-mail. - 1h (UI)

Ideal é incluir o breadcrumb para o usuário saber as etapas que ainda faltam ser preenchidas. - 2h (UI)

Padronizar o design, apresentando consistência, em especial com CTA, checkboxes e placeholders (informando a obrigatoriedade no preenchimento). - 1h (UI)

Ideal é que o aceite da política de privacidade e termos de uso apareça somente uma vez quando o usuário estiver preenchendo o e-mail, pois basta que ele aceite apenas uma vez e não para todas as etapas. - 1h (UI)

Qual a importância de saber a finalidade da compra do produto ou podemos retirar o componente?

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª, dando controle e liberdade para o usuário; 4ª, dando consistência e padronização ao design; 5ª, prevenindo eventual equívoco por parte do usuário; 6ª, promovendo o reconhecimento em vez de memorização; 7ª, apresentando eficiência e dando flexibilidade de uso.

Impacto: Baixo

⁠

Alto

Referência:

⁠

⁠

⁠

Conclusão: o fluxo de busca por um vergalhão CA-50 funcionou, com leve desvio na página de resultado, apresentando em primeiro lugar outro produto (CA-60) e não aquele desejado. Botões e funcionalidades clicados funcionam e o direcionamento para as páginas ocorre de forma correta, com exceção do CTA “comprar” e botão “finalizar compra”, que direcionam para modal de “continuar comprando ou finalizar compra” e para o “carrinho”, respectivamente, e não para o checkout. Assim, o usuário consegue atingir o objetivo de comprar um vergalhão CA-50. Entretanto, podemos deixar o fluxo ainda mais intuitivo e melhor para o usuário, 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ário acessa a lupa para buscar o que precisa.

2 - Usuário clica na lupa é direcionado à página de resultado. Ele dá 2 scrolls e encontra o produto que está precisando.

3 - Ele clica no card e é direcionado à página do produto. Visualiza todas as informações necessárias e é obrigado a dar vários scrolls para voltar e verificar o CEP, antes de comprar.

4 - Usuário clica para verificar o CEP.

5 - Usuário clica no CTA Comprar e aparece o pop-up de finalizar compra e continuar comprando.

6 - Ao clicar em finalizar compra, o usuário é direcionado à página de carrinho.

7 - Usuário clica em fechar pedido e é direcionado à página de checkout.

Jornada
Jornada