projetos Hype Games

Ecommerce

Hype Games, a página de produto

Encurtando o caminho entre querer o jogo e comprar o jogo.

UI/UX Ecommerce Mobile first Hotjar

Contexto
Level Up! Games

Ecommerce de vouchers e créditos de jogos para PC, console e mobile, parceiro de Nintendo, Xbox, PlayStation, Steam, Epic e Rockstar.

Meu papel
Product Designer

Uma semana, da análise de comportamento no Hotjar ao protótipo navegável de todos os cenários.

Desafio
Redesenhar a página

Reduzir o scroll, esclarecer o preço e abrir espaço para oportunidades de oferta sem inflar a tela.

contexto

Contexto do projeto.

A página de produto da Hype Games precisava de uma atualização. Percebi na análise do Hotjar que as pessoas não chegavam ao fim da página, principalmente porque ela era longa demais. O contexto mais preocupante era em devices como celular: a página era grande, alguns assets não estavam bem aplicados e o botão de compra não aparecia de cara, exigia muito scroll.

Havia uma preocupação relevante de que isso estivesse afetando a experiência e a conversão da loja. Além disso, entendi que era hora de entender as oportunidades de oferta dentro da página.

Mapa de calor da página antiga no desktop.
No mobile, quase ninguém chegava ao fim.

dores

O que travava a compra.

Três problemas apareceram com clareza na análise de comportamento.

01

Scroll demais

As pessoas não chegavam ao fim da página. No mobile, o botão de compra só aparecia depois de muito scroll.

02

Preço confuso

As informações de preço e desconto confundiam. Quanto a pessoa ia pagar, afinal?

03

Hierarquia da UI

A hierarquia da interface precisava de melhorias no geral.

decisões

O que mudou.

Nove decisões, da hierarquia da tela ao incentivo de conteúdo extra.

Hierarquia da UI

Interface reorganizada em torno da informação relevante e com melhor uso do espaço.

Botão de compra logo de cara

O botão de compra subiu na página.

Tags de produto

Tags para o cliente entender o tipo de produto sem precisar ler a descrição.

Preço organizado

O preço ficou claro em relação ao desconto oferecido.

Idiomas disponíveis

Saber se o idioma é suportado ajuda o cliente a decidir se vale a compra.

Galeria e descrição

A galeria ganhou prioridade na tela e a descrição desceu.

Requisitos de sistema

Organizados de forma clara e sucinta.

Informações adicionais

Nota do Metacritic e recomendação de idade mínima entraram na tela.

DLCs como upsell e blog

Já que a pessoa está comprando o produto, teria interesse nas DLCs? E artigos do Hype Blog para promover outros produtos.

Página redesenhada no desktop.
No mobile, a compra cabe na primeira tela.

resultado

Antes e depois.

Ver todos os cenários no Figma

continue explorando

Outros projetos.

Ver todos os projetos →
UI/UX Design Inter Arcade UI/UX Design Entrelinhas

contato

Obrigada!

Bora conversar?

Feito com o Claude e muito café em
algum lugar do Rio de Janeiro