Jul/24 - Reformulação do Design da Página de Produto

Benchmarking

Análise de Mapas de Calor/Clique/Porcentagem e Brainstorming

Após todo o processo de estudo,

Benchmarking⁠

Brainstorming⁠

, ilustramos os wireframes propostos abaixo - compilando os principais pontos relevantes a serem implementados:

Mobile

PDP atual Wireframe proposto PDP atual Wireframe proposto

⁠

⁠

⁠

Principais alterações realizadas:

Mantivemos o botão flutuante e alteramos o título para "Imagens do Produto" e sugerimos que somente esse botão, além do botão de adicionar o produto (buy box), sejam flutuantes. O ideal é que o header apareça somente quando a pessoa usuária fizer o movimento para cima de scroll up.

Trouxemos o nome do produto, modelo e estrelas de avaliação para cima (com âncora para a seção de avaliações), antes da imagem principal do produto.

Abaixo das miniaturas, inserimos os destaques de especificações - sugerimos o máximo de 6 destaques - além do botão de "Veja mais especificações" com âncora para a seção de "Especificações".

Inserimos o ícone de cartão na comunicação de valor e parcelamento.

Modificamos a tag de "economize", pois as pessoas usuárias estavam entendendo ser um botão, e melhoramos a comunicação da tag, acrescentando "no Pix" para deixar claro ao usuário.

Substituímos o botão de "?" para botão link de "Confira condições de pagamento", deixando claro para a pessoa usuária - nas gravações ficou claro que os usuários só clicavam por curiosidade relacionada à interrogação.

Inserimos o componente de cupom que havia sido pedido.

Retiramos o botão de seleção de quantidade, tendo em vista a análise de mapa de calor e benchmarking, alteramos a comunicação no botão de ação para "Adicionar ao carrinho", demonstrando qual será a ação executada bem como seguindo uma tendência dos concorrentes e, inserimos o botão de wishlist ao lado do botão de ação.

Modificamos o componente de compartilhamento, deixando em uma linha somente.

Separamos as seções de acordo com as maiores interações dos usuários. Trouxemos para a primeira seção, as Especificações, pois é o mais buscado pelas pessoas usuárias. Abaixo, ficará a seção Sobre o Produto.

Retiramos as seções de Premiações e Saiba mais, pois muitos produtos não possuem e a ausência pode causar frustração. Foi verificado no mapa de cliques que muitos usuários interagiam com essas seções.

Inserimos a seção de "Compare" para realizar o comparativo entre produtos e, deixaremos o card do produto que está sendo visto fixo e faremos o scroll lateral dos outros cards, deixando a comparação intuitiva e fácil para os usuários. Esta seção é vista na maioria dos concorrentes e achamos interessante trazer também.

No popup de "Compre Junto" modificamos a comunicação para "Você adicionou", mantendo consistência com o botão de ação.

Nas páginas de produto wear, modificamos o design de tamanho indisponível.

Modificamos, também nas páginas de produto wear, a comunicação e o design do botão de tabela de medidas, para "Descubra seu tamanho" e botão link.

Mantendo a consistência do botão de ação, a comunicação no botão flutuante também foi modificada.

⁠

Desktop

PDP atual Wireframe proposto

⁠

⁠

⁠

Além das alterações mencionadas em mobile, podemos observar:

Modificamos o design da imagem do produto principal e inserimos as miniaturas abaixo, seguindo a tendência dos concorrentes e levando em consideração a análise de mapa de calor e de clique.

Diminuímos o scroll fixo da buy box, ela irá até a seção de "Sobre o Produto", deixando a seção de "Especificação" visível para os usuários.

Inserimos uma seção flutuante com título, valor, botão de ação para adicionar ao carrinho, bem como botões para as seções, devendo aparecer a partir da seção de "Sobre o Produto", acompanhando toda a jornada da pessoa usuária na página do produto. O ideal é que o header apareça somente com o movimento para cima do scroll up. A inserção se deu por uma tendência dos concorrentes e uma necessidade de deixar próximo da pessoa usuária que verifica as avaliações, um botão de ação para efetuar a adição do produto ao carrinho.

Próxima Página →

Benchmarking⁠

⁠

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.