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.
Como ajudamos os usuários a escolher e realizar a compra dos seus itens com mais facilidade.
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.
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.
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
Depois
Desktop
Mobile
