Starbucks app
primeiro experimento em UX
Precisava de um caso relativamente simples para o meu primeiro projeto. A partir da reclamação de usuários (amigos e comentários em redes sociais) escolhi o app do Starbucks.
Análises do aplicativo não são novidade, mas indicam a necessidade desse redesenho. Há análises completas de UX e UI. Mas este estudo é mais parecido com o processo que eu tinha em mente.
O aplicativo brasileiro para Android é mais simplificado, porém não menos problemático. Tentei replicar conceitos teóricos que aprendi em cursos e livros, por isso as etapas de Personas, Jornada do Usuário, etc. A versão para IPhone não foi analisada.
Um detalhe é que o aplicativo bloqueia a função de tirar print da tela. Nem com aplicativos de terceiros foi possível, por isso toda a análise foi feita à base de fotos ou no papel.
Eu não trabalho nem estou envolvida em nenhum projeto com o Starbucks, esta análise é apenas um projeto fictício para treinar as minhas habilidades.
A análise foi feita em fevereiro/março de 2017 baseada na atualização do aplicativo de novembro de 2016.
Estudos
Personas
Criei superficialmente duas personas baseadas em usuários do app. Elas guiaram a construção da jornada do usuário e os testes de usabilidade.
Jornada do Usuário
As jornadas mostram cenários possíveis e simples do processo de decisão do uso do aplicativo.
Teste de usabilidade
Baseado nos perfis das personas fiz um rápido teste de usabilidade. Cada usuário tinha duas tarefas:
- Recarregar o cartão na quantia de 15 reais (saldo não zerado)
- Descobrir qual o critério para se ganhar estrelas (uma por item comprado, uma por compra, etc?)
Tarefa 1 — recarregar o cartão na quantia de 15 reais (saldo não zerado):
O caminho para a recarga do cartão muda completamente dependendo se o cartão está zerado ou não. Com o cartão zerado (abaixo, gif da esquerda), o card com o saldo aparece primeiro, e há vários atalhos para a tela de recarga (o card em si, o ponto de exclamação e o menu lateral). Com um pouco de saldo (abaixo, gif da direita), a lógica muda. Os cards da tela inicial se invertem, e onde antes você acessava a área de recarga, são agora links para a área de pagamento em loja (código de barras).
O usuário A não frequenta o Starbucks com frequência e sentiu dificuldade de completar a primeira tarefa. Após algumas tentativas conseguiu achar a tela para recarregar o cartão.
O usuário B (gif abaixo) adquiriu o cartão recentemente e vai quase diariamente ao Starbucks. Sempre faz recargas menores então já sabia que para recarregar tinha que ir direto ao menu lateral. O único empecilho que encontra é na hora de recarregar um valor diferente dos pré-definidos. Quando clica em "outros", ao invés de dar ao usuário a opção de digitar o valor desejado, o aplicativo abre um menu de rolagem horizontal infinito (ou quase) com variações de valor de 10 a 200 reais.
Tarefa 2 — Descobrir qual o critério para se ganhar estrelas (uma por item comprado, uma por compra, etc?):
Os usuários A e B não completaram a tarefa pois essa informação não existe dentro do aplicativo. Ambos foram ao menu correto (recompensas) e testaram os dois caminhos possíveis que encontraram na tela sem sucesso.
Há textos em excesso para explicar os prêmios de cada categoria, e também são confusos e redundantes os dois links na tela de recompensas.
Diagnóstico
A jornada do usuário e o teste de usabilidade trouxeram à tona algumas questões:
- inversão da finalidade de menus/botões em situações diferentes de saldo. Quando o cartão tem crédito os botões levam à tela de pagamento com o código de barras, e quando o saldo está zerado os mesmos botões levam à tela de recarga. Isso acaba confundindo usuários que fazem recargas menores e frequentes pois eles sempre têm algum saldo residual na hora da recarga.
- não há em nenhum lugar no aplicativo a explicação do critério de ganho de estrelas. Seria por compra, por categoria de produto, por valor da compra?
- ao tentar descobrir essa resposta, é natural procurar em termos e condições. Mas ao clicar nessa opção o usuário é levado ao navegador, saindo do aplicativo involuntariamente.
Análise
Para tentar entender melhor o funcionamento do aplicativo fiz uma análise de fluxo da funções principais. Surgiram novas questões após esse processo (imagem abaixo):
- há uma redundância de caminhos que levam para a tela do código de barras (ou recarga dependendo do saldo) na página inicial. As 2 opções de botão têm grafismos e pesos diferentes, levando o usuário a pensar que são finalidades diferentes, mas todos levam ao mesmo local.
- a tela de recompensa tem dois botões distintos para finalidades similares. Como são apenas 3 níveis de recompensa talvez seja mais prático unificar essas informações.
- a tela de locais/lojas não deixa claro para o usuário as opções de botões. Há 4 possibilidades de ações ocultas.
Considerando essas questões fiz um mapeamento geral da parte problemática do aplicativo, que eram a tela inicial e os menus principais. Desenhar o aplicativo existente no papel e simular as interações no POP (aplicativo para prototipação em papel) foi essencial para constatar os problemas e as redundâncias e fez o redesenho do aplicativo ser mais intuitivo. Provavelmente para um projeto mais complexo seria suficiente um esquema de mapa do aplicativo.
Desenvolvimento
Após o término da análise fiz uma proposta em papel do redesenho que tinha em mente. Para visualizar a simplificação dos fluxos fiz diagramas das duas situações. Na imagem abaixo à esquerda é o fluxo existente, enquanto à direita é a solução proposta (foi usado o Adobe XD para visualizar as interações).
Foram feitas 3 principais mudanças:
- Eliminação do menu hamburger. Por ser composto de apenas 5 itens, o menu foi distribuído entre header e barra de navegação inferior fixos. Todas as informações importantes agora ficam visíveis e devidamente nomeadas.
- Página inicial única. Agora independente do saldo do cartão a página inicial é a mesma. Notificações sobre recarga e recompensas também saíram da página inicial (elas empurram os cards “fixos” para baixo e geram um scroll desnecessário) e foram para o histórico, no ícone do lado direito do header.
- Notificações + histórico de transações em um único lugar. O histórico de notificações virou um histórico geral, que engloba também as notificações de recompensas. Agora novas notificações são indicadas no ícone do histórico com númeral em fundo vermelho, como é usual.
As soluções para os aspectos levantados na análise inicial podem ser vistos nas imagens abaixo:
Diagrama de fluxos — Solução
Solução — fluxo em vídeo:
Teste de usabilidade da solução proposta
Fiz um teste de usabilidade no desktop utilizando o preview do protótipo do Axure, com as mesmas tarefas feitas para o aplicativo atual (recarregar o cartão na quantia de 15 reais (saldo não zerado) e descobrir qual o critério para se ganhar estrelas). As tarefas foram completadas por ambos usuários rapidamente e sem dúvidas.
Conclusões
Fui mostrando o estado das coisas durante todo o processo para outras pessoas e essa parte foi fundamental, pois eles levantaram questões pertinentes em relação ao processo como um todo. Para um primeiro estudo foi essencial, mas acho essa troca importante para qualquer estágio profissional.
Foi interessante também ver os resultados das pesquisas e testes com usuários. Fiz os testes em um esquema bem caseiro com apenas dois amigos e as variações de respostas e inputs que obtive consolidou para mim a importância dessa conversa com os usuários. Espero em outros projetos conseguir coletar informações de uma base de usuários maior.
Obrigada pela leitura! Fiquem à vontade para deixar comentários, sugestões e indicações de leitura, lembrem-se que estou começando ;)
