mobLee: Desafio UX/UI

Como aumentar a taxa de cadastro, melhorando a usabilidade do produto.

Bruno Abatti
5 min readMar 21, 2017

Esse texto foi feito para o desafio da vaga de UX/UI Design na mobLee, onde tive 5 dias para fazê-lo.

Infelizmente, não fui selecionado. Mas estou compartilhando esse [mini] caso de estudo para mostrar o meu processo e, também, os resultados.

O meu processo:

  • O Problema & Objetivo
  • Entendendo o app
  • Pesquisa
  • Análise
  • Observações
  • User Journey Map
  • Hipóteses & Soluções
  • Sketches
  • Hi-fi mockups
  • Protótipo

O Problema & Objetivo

Apenas 15% dos usuário que utilizam o app, criam uma conta. O objetivo é melhorar a usabilidade do produto, que incentive o usuário a criar uma conta, aumentando a taxa de cadastro.

Entendendo o app

Como eu nunca havia utilizado nenhum app da mobLee, decidi fazer o download do RD Summit 2016 porque já tinha ouvido falar, e conhecia dois amigos que compareceram ao evento.

Testei o app durante dois dias para realmente entender o propósito e me imaginar na situação de estar no evento e utilizando-o. Mas como conheço duas pessoas que haviam ido ao evento, realizei uma breve pesquisa com esses dois usuários.

Pesquisa

Os dois usuários entrevistados acharam o app ótimo. Ambos utilizaram como agenda, para saber o que estava rolando no momento. Um utilizou as notificações também para o mesmo propósito. Somente um ficava de olho na Timeline de vez em quando para sabe o que as pessoas estavam comentando.

Conclusão: ambos os entrevistados usaram o app somente para se programar e não perder nenhuma palestra; somente um utilizou a Timeline, mas infrequentemente.

Análise

Após conhecer de fato o app — tanto por uso próprio, quanto pela pesquisa com dois usuários — eu imprimi algumas telas que achei relevantes. Analisei-as e escrevi o que eu acreditava que poderia ser melhorado.

Observações

Algumas observações que eu anotei a partir da minha visão pessoal e crítica do app, de acordo com o meu conhecimento e experiência profissional com User Experience e Interaction Design.

  • Timeline ou Feed, não mostravam somente conteúdo criado por usuários;
  • Hamburger menu “escondia” praticamente todas as features do app;
  • Quando o usuário tentava curtir, um Alert aparecia;
  • Quando o usário tentava comentar, um Alert aparecia;
  • Quando o usuário tentava criar um post, um Alert aparecia;
  • O Alert, além de ser mais utilizado para erros, a mensagem (copy) era pouco convidativa;
  • Log In e/ou Sign Up ficavam “escondidos” no hamburger menu;
  • A utilização somente de ícones para curtir e comentar não são tão convidativas e clicáveis;

User Journey Map

Para melhor entender o porquê de somente 15% dos usuários estarem criando uma conta, elaborei um user journey map para ter noção das possibilidades de atrair o usuário a criar uma conta.

Hipóteses & Soluções

A partir das observações que fiz, eu, meticulosamente, analisei-as para gerar algumas hipóteses e, portanto, soluções.

Convidar o usuário a criar uma conta

  • Problema: Além de Alerts serem utilizados apenas em situações como confirmar uma compra, ou em ações destrutivas como deletar ou algum erro, eles também possuíam uma mensagem um pouco hostil, através da utilização do “must” e ponto de exclamação.
  • Solução: Descartar Alert e criar nova tela de Sign Up e Log In mais convidativa, contendo copywriting mais amigável e específico para cada caso, isto é, dependendo da origem do clique.

Simplificando o Sign Up

  • Problema: Ao usuário tentar criar uma conta, ele se deparava com um total de 9 inputs, o que pode ser intimidante e, consequentemente, fazer o usuário desistir de se registrar.
  • Solução: Deixar o Sign Up mais simples, apenas mostrando os 3 inputs obrigatórios, (nome, e-mail e senha), sendo mais fácil, rápido e menos intimidante para o usuário. Caso o usuário queira editar as outras informações não-obrigatórias, (profissão, empresa, telefone, sobre e perfil do LinkedIn), elas podem ser encontradas facilmente na aba “Me” do aplicativo.

No more hamburger

  • Problema: Todas as features do app se encontravam no hamburger menu, sendo de difícil acesso e também com o mesmo nível de importância. Se tudo está com destaque, nada está destacado, não é mesmo?
  • Solução: Descartar o hamburger menu e utilizar uma Tab Bar. A partir da arquitetura da informação do app que realizei, cheguei a conclusão de que em 5 tabs, o usuário teria acesso a todas as features com apenas um toque. Além de dar espaço para — quando na Timeline, e caso o usuário esteja deslogado ou não possua conta — as ações de Log in e Sign up, resultando numa conversão maior de taxa de cadastramento.

É possível curtir e comentar?

  • Problema: A utilização de apenas ícones de Like e Comment não deixam claro que o usuário pode curtir e comentar.
  • Solução: Separar quantidade de curtidas/comentários da ação de curtir e/ou comentar, adicionando texto ao lado do ícone.

Prioridade ao Sign Up

  • Problema: Ao tentar publicar, curtir ou comentar, era solicitado o Log in e dentro do Log In, tinha a opção de criar conta.
  • Solução: Como o objetivo é aumentar a taxa de cadastro, prioriza-se o Sign Up, quando o usuário tentar realizar uma ação sem conta que seja exclusiva para usuários cadastrados — a não ser que o usuário clique em Log In.

Sketches

Sketches das telas e arquitetura da informação para estabelecer as principais features/grupo de features.

Hi-fi mockups

O meu aplicativo de preferência para Design Digital é o Sketch. Utilizo ele há mais de 3 anos e é o que possui maior desempenho e possibilidades para a criação e desenvolvimento de produtos digitais no geral.

User journey map.

Você pode olhar as telas mais detalhadamente aqui.

Protótipo

Eu não sei como que funciona a interação Designer→Developer na mobLee, mas eu costumo passar as specs tudo via Zeplin. Agora com o InVision Inspect também é uma opção, mas nunca cheguei a utilizar, até agora.

Dá uma conferida no protótipo aqui! :)

Isso é tudo; espero que gostem! :)

--

--