Exercício 3 | Usabilidade & QA

Usabilidade & Quality Assurance

Análise Heurística

App - PicPay

Aline Walendorff Luiz Felippe Tolotti

Bruna Ricardo Tatyana Domen

Daniel Jordão
 🔍O projeto
Análise Heurística

O grupo decidiu pela escolha do App da PicPay, empresa de pagamentos eletrônicos e conta digital que conta com mais de 50
milhões de usuários, sendo considerado o maior aplicativo de pagamentos do país. Além do número expressivo de clientes, a
empresa está presente em mais de 5 milhões de estabelecimentos e conta com mais de 2100 colaboradores, com escritórios
em São Paulo e Vitória.
 10 Heurísticas de Nielsen
Análise Heurística

Clique no link para acessar o protótipo:

https://www.figma.com/file/iREF2lFGfW58jcmawNQ4pG/An%C3%A1lise-de-Usabilidade-PicPay?node-id=0%3A1
> 10 Heurísticas de Nielsen

⛔Prevenção de erros.
3 dos 4 usuários informam que o principal uso do aplicativo é para pagamento
via QR Code físico ou em sites. No app, essa opção está longe, e não no botão
central do aplicativo.

Consistência e padrões.
Além da palavra ”pagar” ao centro, remeter exatamente à função principal, o
posicionamento dela é semelhante à outros Apps semelhantes no mercado
que colocam o leitor de QR Code nessa posição, fugindo do padrão ”comum”
de uso.
> 10 Heurísticas de Nielsen

🖋Design estético e minimalista.

Todas as opções estão acumuladas e quase sem espaçamento entre os
elementos, além de não termos um respiro que nos mostre exatamente o que
estamos vendo.

Liberdade e controle ao usuário.

Os usuários entrevistados alegam que é muito difícil identificar e encontrar o
que eles querem. Por vezes precisam ”fuçar” para acharem o que precisam.
> 10 Heurísticas de Nielsen

Consistência e padrões.
O extrato é mostrado no meio das transações como se fosse um card. Além de
pouca identificação, tem uma forma semelhante aos outros cards da tela.

Consistência e padrões.
Cards de ofertas e de features ou serviços tem o mesmo padrão visual, o que
pode fazer com que usuários não identifiquem o que querem fazer a partir da
linguagem visual.
> 10 Heurísticas de Nielsen

Liberdade e controle ao usuário.

O usuário não tem a opção de personalizar as principais as principais ações
dessa tela.
> 10 Heurísticas de Nielsen

Consistência e padrões.
Ao clicar em PAGAR, você vai para uma tela de Transações. Nomes diferentes
que não possuem interação.

🌎Correspondência entre sistema e mundo real.

Na dinâmica feita com os usuários, o termo PAGAR COM PICPAY era
identificado por 100% dos usuários como o pagamento via QRCode. Ao tocar
em PAGAR, a função de pagamento de QRCode está muito desfavorecida na
interface.
> 10 Heurísticas de Nielsen

👁Reconhecimento ao invés de memorização.

O ícone de AVANÇAR, possui função de voltar a tela anterior. Além de diferir
muito dos padrões de mercado e do senso comum de uso desse componente,
não fica claro onde essa tela está inserida no fluxo.
> 10 Heurísticas de Nielsen

Consistência e padrões.
Na home, o usuário se depara com cards não clicáveis com a mesma cor
usada no background dessas notificações.

Aqui ele encontra o mesmo padrão, tanto para elementos clicáveis quanto
para não clicáveis.
> 10 Heurísticas de Nielsen

🖋Design estético e minimalista.

• Todas as opções estão acumuladas e quase sem espaçamento entre os
elementos, além de não termos um respiro que nos mostre exatamente o que
estamos vendo.

• Não é fornecida uma maneira fácil de navegação ou filtro, obrigando o

usuário à navegar pela página toda até encontrar a opção desejada.

Consistência e padrões.
Cards de ofertas e de features ou serviços tem o mesmo padrão visual, o que
pode fazer com que usuários não identifiquem o que querem fazer a partir da
linguagem visual.
 8 Regras de Ouro
Análise Heurística

Clique no link para acessar o protótipo:

https://www.figma.com/file/iREF2lFGfW58jcmawNQ4pG/An%C3%A1lise-de-Usabilidade-PicPay?node-id=26%3A92
> 8 regras de ouro

🛣Fornecer atalhos.
A principal ação do aplicativo de acordo com os usuários, está em uma área
totalmente fora da área de fácil acesso para os usuários.
> 8 regras de ouro

⚠Fornecer feedback informativo.

Elementos de card, quando ao meio da interface, geram uma impressão de

clique/toque. No caso da PicPay alguns deles não possuem toque, e não há
um feedback na tela para erro na ação.

Perseguir a Consistência.
Os elementos não possuem boa consistência no que dis respeito ao contexto
de uso de cada componente. Componentes com a mesma estética de
construção, possuem diversos tipos de conteúdo. Serviços são mostrados com
o mesmo desenho de promoções, além de estarem no mesmo ecossistema na
interface.
> 8 regras de ouro

Perseguir a Consistência.
Alguns elementos e componentes são usados APENAS nessa tela, e não se
comunicam com o restante das interfaces.
> 8 regras de ouro

🛣Fornecer atalhos.
A principal ação do aplicativo de acordo com os usuários, está em uma área
totalmente fora da área de fácil acesso para os usuários.
> 8 regras de ouro

Perseguir a Consistência.
Alguns elementos e componentes são usados APENAS nessa tela, e não se
comunicam com o restante das interfaces.

⚠Fornecer feedback informativo.

Algumas dessas notificações não são clicáveis. Além de ter o mesmo peso das
demais, não é fornecido nenhum tipo de feedback para a ação.
> 8 regras de ouro

Perseguir a Consistência.
Alguns elementos e componentes são usados APENAS nessa tela, e não se
comunicam com o restante das interfaces.
 Acessibilidade
Análise Heurística

Clique no link para acessar o protótipo:

https://www.figma.com/file/iREF2lFGfW58jcmawNQ4pG/An%C3%A1lise-de-Usabilidade-PicPay?node-id=6%3A261
> Acessibilidade

Acessibilidade

O App não possui nenhum tipo de personalização de navegação de

acessibilidade. O leitor não possui texto intuitivo para deficientes visuais, alguns
contrastes não estão bons, e ao aumentar as fontes, os componentes quebram.
> Acessibilidade

Acessibilidade

O App não possui nenhum tipo de personalização de navegação de

acessibilidade. O leitor não possui texto intuitivo para deficientes visuais, alguns
contrastes não estão bons, e ao aumentar as fontes, os componentes quebram.

Acessibilidade

O contraste das cores está fora dos padrões de acessibilidade.

> Acessibilidade

Acessibilidade

O contraste das cores está fora dos padrões de acessibilidade.

> Acessibilidade

Acessibilidade

O App não possui nenhum tipo de personalização de navegação de

acessibilidade. O leitor não possui texto intuitivo para deficientes visuais, alguns
contrastes não estão bons, e ao aumentar as fontes, os componentes quebram.
> Acessibilidade

Acessibilidade

O App não possui nenhum tipo de personalização de navegação de

acessibilidade. O leitor não possui texto intuitivo para deficientes visuais, alguns
contrastes não estão bons, e ao aumentar as fontes, os componentes quebram.
> Acessibilidade

Acessibilidade

O App não possui nenhum tipo de personalização de navegação de

acessibilidade. O leitor não possui texto intuitivo para deficientes visuais, alguns
contrastes não estão bons, e ao aumentar as fontes, os componentes quebram.
 Feedbacks
Teste de Usabilidade e Dinâmica

Clique no link para acessar o protótipo:

https://www.figma.com/file/iREF2lFGfW58jcmawNQ4pG/An%C3%A1lise-de-Usabilidade-PicPay?node-id=26%3A253
> Feedbacks

Dinâmica com usuários

Feedbacks

Foi promovida uma rápida entrevista com usuários, uma dinâmica e testes de usabilidade, cujos feedbacks e insights
serviram para a construção do redesign do App da PicPay. Para essa etapa, contamos com a participação de 4 usuários: Mayara,
Lucas, Letícia e Thiago. Todos eles são clientes da PicPay e utilizam a ferramenta no seu dia-a-dia.
 Feedbacks
Teste de Usabilidade e Dinâmica

Clique no link para acessar o protótipo:

https://www.figma.com/file/iREF2lFGfW58jcmawNQ4pG/An%C3%A1lise-de-Usabilidade-PicPay?node-id=26%3A253
 🕹 Entrevistas
Feedbacks
com usuários

Foi promovida uma entrevista com usuários, uma dinâmica e testes de usabilidade, cujos feedbacks e insights serviram para
a construção do redesign do App da PicPay. Para essa etapa, contamos com a participação de 3 usuários: Paula Junior, Leocárdia
e Vinícius. Todos eles são clientes da PicPay e utilizam a ferramenta no seu dia-a-dia.
> Entrevista 1
> Entrevista 2
> Entrevista 3
> Principais feedbacks

O que você espera encontrar nessa página?

Leocárdia
”Eu esperava encontrar aqui as informações principais como saldo, meu perfil,
notificações... E talvez um resumão do que eu mais uso, promoções para o meu
perfil de uso, lojas próximas, ofertas do App...”

Vinícius
”A parte de cima até que tá ok... Tem meu saldo, meu perfil... Não sei o que é esse
presente e o chat eu nunca usei na vida, podia ser um mapa das lojas perto de
mim ao invés dele... O resto tá uma bagunça, tem promoção, tem oferta, no meio
tem uma ou outra transação jogada como se fosse um extrato, aí vc clica e não
acontece nada...”
> Principais feedbacks

Como você melhoraria essa página?

Paula Junior
”Colocaria tipo um ”últimas transações”, mostrando as coisas que eu mais uso,
dividiria em tópicos do tipo: Lojas, Parceiros, Sites e alguns serviços que a PicPay
pode me oferecer, tipo cartão, empréstimo e tal...”

Vinícius
”Primeiro que eu tiraria qualquer coisa de extrato daqui. Isso é algo que tem que
estar na carteira. Eu gosto tipo de um Ifood sabe? Tem lá as ofertas, o que tá
acontecendo no momento, depois embaixo tem as coisas perto de mim e tal, mas
tudo dividido. Coloca um título tipo ”Agora vc está olhando pra OFERTAS, aqui você
está vendo os PARCEIROS, aqui tem as LOJAS...”
> Principais feedbacks

Como você melhoraria essa página?

Vinícius
”Eu só tiraria essa propaganda aqui... Como eu tenho um Iphone SE, ela ocupa
quase que a tela toda e eu nem vi as opções embaixo.”
> Principais feedbacks

O que você espera encontrar nessa página?

Leocárdia
”Eu achei que ia abrir o QR Code aqui... Nos outros aplicativos é assim
que funciona.”

Vinícius
”Pra quê tem mapa aqui? Eu não uso PicPay pra achar lugares...”

Como você melhoraria essa página?

Vinícius
”Colocaria o QR Code aqui. Outros Apps já usam assim...”
> 10 Heurísticas de Nielsen

O que você espera encontrar nessa página?

Paula Junior
”Esse "botão” aqui eu achei que ia pra uma outra tela, mas na verdade volta pra
anterior, deveria estar apontando pra esquerda né?”
> Principais feedbacks

Como você melhoraria essa página?

Leocárdia
”Notificações é um negócio tão chato... Eu colocaria de uma outra forma. Talvez no
menú lateral como de praxe.”
> Principais feedbacks

Como você melhoraria essa página?

Paula Junior
”Eu não acho que LOJAS é uma palavra boa pra essa página... Pode ser tipo
”Parceiros” ou algo do tipo... Lojas parece que eu vou encontrar PRODUTOS aqui”
 Componentes
Redesign do App

Clique no link para acessar o protótipo:

https://www.figma.com/file/iREF2lFGfW58jcmawNQ4pG/An%C3%A1lise-de-Usabilidade-PicPay?node-id=6%3A281
> Redesign do App

Componentes
Redesign do App

Com as análises de usabilidade e interface feitas, optamos por fazer um redesenho de alguns componentes, principalmente os
cards promocionais, que não tinham uma forma e um visual pré definidos. Algumas nomenclaturas foram mudadas, alguns
ícones foram substituídos e utilizamos muitas imagens em 3D, padrão recorrente visto no aplicativo.
> Redesign do App

Fonts
> Roboto
> Redesign do App

Icons
> SVG
> Redesign do App

Colors
> HEX
> Redesign do App

Cards
> Redesign do App

Buttom bar
🖋 Redesign
Redesign do App

Clique no link para acessar o protótipo:

https://www.figma.com/file/iREF2lFGfW58jcmawNQ4pG/An%C3%A1lise-de-Usabilidade-PicPay?node-id=6%3A2356
> Redesign

💰pagar
A opção pagar agora recebeu a opção de leitura de QR Code, apontada pelos
usuários como a função principal do App no seu dia-a-dia.

parceiros

Mudamos a opção NOTIFICAÇÕES para PARCEIROS. Isso nos possibilitou

trabalhar a aba início de forma mais direcionada à exploração do App.
> Redesign

🖋Topo
• A primeira mudança visível é uma reorganização do topo, onde tiramos a
opção >QR Code e a colocamos inserida dentro da opção >pagar na bottom bar.
Além disso a opção de >presentes (promoções) foi inserida no meio da
navegação de uma forma mais comercial.

• O saldo ganhou a opção de hide, pontuado pelos usuários nas dinâmicas.

🖋Favoritos
A sessão de favoritos ganhou um novo layout, usando cards com o padrão
proposto para o redesign, mais acessíveis e com cores e ilustrações para
diferenciar da aba carteira, facilitando a identificação para os usuários.
> Redesign

🖋Mapa
A opção >mapa virou >perto de você, inserida no meio do fluxo, ainda com a
importância anterior, porem com visual e acessos facilitados.

🖋Cards promocionais
Os cards promocionais ganharam um visual mais arrojado, facilitando o
entendimento do usuário e prevenindo erros e confusões entre as diversas
opções oferecidas.

🖋Subdivisões
A aba >início ganhou subdivisões, separando todos os contextos dos cards.
> Redesign

🖋Topo
O topo ganhou fundo escuro para resolver as questões de acessibilidade da
versão original do app.

🖋Atalhos
Um dos insights propostos pelos usuários, era ter uma área personalizável de
atalhos, dando liberdade para o cliente colocar apenas as ações mais
utilizadas por eles. Além disso, os cards são uma releitura dos que estavam
presentes no app anterior, mantendo a consistência do Design System
proposto nessa releitura.

🖋Cards de cartão
Os cards de cartão permaneceram os mesmos, apenas com mudanças nas
cores por questões de contraste e acessibilidade.
> Redesign

🖋Card promocional
O card promocional de cartão foi redesenhado para uma rápida identificação
dos usuários. Além disso foi colocado no final de acordo com o feedback dos
usuários.

*Provavelmente por questões comerciais, o oferecimento do cartão está na parte de cima, para seduzir os usuários à clicar. Caso a
conversão desse produto caia, a interface foi criada em módulos justamente para podermos customizar a posição dos
componentes.
> Redesign

🖋Pagar
Essa foi a interface que mais mudou. Ela foi o resultado da unificação das telas
>pagar e >qr code anteriores. A opção de pagamento com código foi apontada
como a principal ação do aplicativo pelos usuários, portanto o acesso à ela
ganhou a importância devida.

🖋Cards de pagamentos
As demais ações de pagamento estão em um carrossel na parte debaixo.
> Redesign

🖋Filtro de navegação
A aba >parceiros ganhou um visual extremamente promocional, para valorizar
as empresas parceiras e gerar uma melhor identificação visual para os
usuários. Esse segmented controll serve para direcionar a navegação dos
usuários que estão buscando algo específico, além de algumas mudanças
importantes de nomenclatura.
> Redesign

🖋>explorar

A aba de mapa foi totalmente reconfigurada, trazendo uma navegação

extremamente comum aos usuários, por utilizar a API do Google Maps.
Overview
Highlights
>Highlights (início)
>Highlights (carteira)
>Highlights (pagar)
>Highlights (parceiros e explorar)
Melhorias futuras
Próximas ações
> Melhorias futuras

Análise de dados
Métricas

Sempre quando é feito um redesign de apps, precisamos estabelecer métricas de sucesso, para medir de fato se as mudanças
sugeridas fizeram sentido para os usuários. Isso pode ser feito através de um funil de eventos ou então um estudo de cliques e
heatmaps das telas.
> Melhorias futuras

Contato com usuários

Entrevista com usuários novos e antigos

Uma excelente maneira de colher feedbacks é contato com usuários novos e antigos. Por vezes os testes de usabilidade não nos
contam a verdadeira história daquele fluxo. Por termos tirado o extrato da linha do tempo da home, seria interessante
acompanharmos os usuários que acabaram de fazer algumas transações, para saber se isso foi impactante ou não na
navegação. Além disso, podemos acompanhar o interesse dos usuários nos produtos e serviços oferecidos, pela mudança visual
nos componentes e cards das interfaces.
> Melhorias futuras

🆎 Testes AB
Análise de dados

Seria muito interessante fazermos testes AB das interfaces. Por termos proposto uma maneira modular de construção de UI,
podemos customizar as telas, invertendo a ordem de exibição das áreas pra sabermos se a ordem influencia ou não nos acessos
e no interesse dos usuários.
Obrigado!
Exercício 3 | Usabilidade & QA

Aline Walendorff
Bruna Ricardo
Daniel Jordão
Luiz Felippe Tolotti
Tatyana Domen