top of page

Create Your First Project

Start adding your projects to your portfolio. Click on "Manage Projects" to get started

Projeto

Loja virtual de card game Pokémon TCG.
Vendas de cartas para o formato digital do game.

Desafio

  • Tornar o visual mais atraente e atual com o foco no seu público.

  • Melhorar a experiência do usuário que utiliza a versão mobile.

  • Reduzir o atrito do checkout ao tentar realizar a compra dos itens.

banner.png

Como ajudamos os usuários a escolher e realizar a compra dos seus itens com mais facilidade.

pk_reconhecimento.png

Reconhecimento do produto - Imersão

Inicialmente, foi ideal imergir no mundo Pokémon TCG, onde, foi feito o download do jogo, (link: https://tcg.pokemon.com/en-us/tcgl), comprar um Box físico (link: https://a.co/d/dEc9POy) e entender como os usuário interagem.

Após entender a diferença e similaridade entre o jogo digital e o físico, foi necessário realizar o processo de compra pela plataforma Mercado Pokémon e realizar o processo como geralmente um usuário iria realizar, sentir o que ele sente.

Principais problemas

  • A identidade da loja, não era similar a identidade nas quais os jogadores estavam adaptados.

  • A versão mobile da loja não era fácil.

  • O processo de checkout estava muito longo.

  • Para receber o produto, era necessário uma interação via contato com a loja.

Para entender mais sobre os problemas foi feito uma pesquisa qualitativa e obtive respostas como:

P - Principais reclamações dos usuários da loja?
R - Forma de comprar no site.
Ter que selecionar carta por carta não é tal simples e rápido.

P - Por qual dispositivos a maior incidência de acessos?
R - Os dois. Mas sempre que tem mais dificuldade é pelo celular.

pk_definicao da identidade.png

Definição da nova identidade

Ao ter o conhecimento sobre o público, consegui identificar padrões de cores e fonts que poderiam ser utilizadas no projeto, e assim, utilizando a lei de Jakob como parâmetro e deixar o usuário mais familiarizado com aquilo que ele já ver normalmente.

Por traz das escolhas

  • A tipográfica foi escolhida para ser similar a utilizada em produtos oficiais da franquia Pokémon.

  • Os tamanhos da fontes seguem uma escala modular de 1.333, foi indicado a utilizar o padrão rem para o desenvolvimento, para o desktop o 1rem = 18px, para o mobile 1rem = 16px.

  • As cores escolhidas foram retiradas do ambiente do jogo digital Pokémon TCG Live e a partir daí, definida a sua escala.

  • Para atender os padrões de acessibilidade foi definido que a proporção de contraste deve ser de no mínimo 4,5:1, em exceção para elementos não informativos, ou seja, para elementos puramente estéticos, estes podem ter uma proporção livre.

pk_checkout.png

Remodelagem do processo de checkout

Após realizar o processo de compra como um teste, foi identificado que o processo era lento e não havia identificação clara sobre cada passo do processo, não havia indicadores visuais quais os passos faltavam para concluir o seu cadastro.


Após alguns testes com os usuários foi observado que unir o formulário que consta no checkout era a melhor opção, foi a versão que gerou menos atrito entre utilizador e produto.


O tempo de cadastro foi reduzido de ~ 3 minutos e 40 segundos, para ~1 minutos e 30 segundos para formulários com preenchimento de cartão de crédito.

Por traz das escolhas

  • Os testes de usabilidade foram realizados utilizando a ferramenta Maze para identificar os principais atritos, e recriados até que atendesse o nosso critério (reduzir o tempo de preenchimento em 50%).

  • Foi testado em duas versões de dispositivos, mobile e desktop.

  • Os testes foram realizados utilizando protótipos de média fidelidade, evitando uma alta carga de retrabalho.

  • Para validar, a última versão foi testada também utilizando um protótipo de alta fidelidade.

Antes

Desktop

Mobile

pk_antes_desk.png
pk_antes_mob.png

Depois

Desktop

Mobile

pk_depois_desk.png
pk_depois_mob.png
pk_pokebola_line_blk.png
bottom of page