Jul/24 - Reformulação do Design da Página de Produto
Análise de Mapas de Calor/Clique/Porcentagem e Brainstorming
Mapas de Calor/Clique/Porcentagem
Para auxiliar no processo de Brainstorming, foram estudados os mapas de calor, de cliques e de porcentagem das páginas de produto para avaliar as áreas atualmente mais vistas e clicadas.
Portanto, pudemos chegar às seguintes conclusões sobre os elementos de maior interação com os usuários - nos dois dispositivos mais utilizados:
Mobile (Tela 1)
Header (incluindo barra de pesquisa, menu hambúrguer, logo e minicart).
Dropdown de Oferta Relâmpago.
Botão e dropdown do menu da página.
Miniaturas de imagens do produto.
Ícone de "?" - condições de pagamento.
Tag de "Economize".
Botão de ação - CTA.
Componente de frete.
Ficha Técnica.
Ícone de fechar da comunicação sobre o app.
No dispositivo mobile, as pessoas usuárias interagem até a terceira dobra, conforme se verifica no mapa de calor abaixo e no de porcentagem.
Tela 1
Desktop (Tela 2)
Miniaturas de imagens do produto.
Título do produto, ícones, valores, tag, CTA, componente de frete.
Ficha Técnica.
Paginação de avaliação.
No dispositivo desktop, as pessoas usuárias interagem muito até a vitrine de produtos. É possível verificar nos mapas de calor e porcentagem, abaixo, que os usuários visualizam mais as avaliações em detrimento da vitrine de produtos.
Tela 2
O Brainstorming (ou tempestade de ideias) é uma técnica criativa para grupos que serve para tentar encontrar uma solução para um problema específico. Isso é feito ao reunir uma lista de ideias contribuídas pelos membros da equipe de maneira espontânea.
O objetivo foi a Reformulação do Design da Página de Produto - Acer. Logo, através do estudo do site atual, do benchmarking e das considerações individuais de cada membro do grupo, os principais pontos discutidos foram:
Ícones com breve descrição
Atualmente o componente, que é meramente ilustrativo, recebe muitos cliques, e levando em consideração os mapas de clique e o que os concorrentes trazem, podemos pensar em deixar somente bullets, até para trazer consistência com o card novo que fizemos para a Home.
Ficha técnica
Atualmente a Ficha técnica fica dentro de um componente com alguns botões, é o mais clicado, segundo percebemos no mapa de cliques e não está com design muito visual para quem busca as informações. Então, podemos pensar em deixar as informações agrupadas, como os concorrentes fazem também.
Buy box flutuante
Todos os concorrentes trabalham com buy box flutuante e atualmente na página de produto, o botão fica fixo até a vitrine de produtos, levando em consideração que os usuários navegam pela seção de avaliações é interessante manter um botão flutuante, então, precisamos pensar num modo que haja o acompanhamento da buy box nesta etapa também.
O que precisa ter na página de produto:
Componente de "Modelo" abaixo do título.
Descrições em bullets de especificações do produto na primeira dobra.*
Componente de copiar cupom de desconto no carrinho.
*Para não sobrecarregar a cognição do usuário, sugerimos apresentar apenas seis especificações na primeira dobra, com um botão 'ver mais especificações' para as demais informações.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (