Um app de trilhas que precisava de novos ares em seu design.

No começo de 2018 um amigo me falou de um aplicativo que ele havia desenvolvido com alguns outros amigos. Um deles, além de ser desenvolvedor Android era apaixonado por trilhas e teve a ideia de mapear as cachoeiras e cavernas no Brasil. Na hora me interessei e quis conhecer melhor o projeto.

Era um aplicativo para Android que já havia sido lançado, mas que, pelas palavras deles, era um app feito por programadores e que não era para eu “reparar na interface”. De fato era uma interface simples, mas que funcionava bem. Nessa hora eu pensei: Eu estou mesmo precisando de trabalhos para o meu portifólio e a ideia é interessante, então por que não ajudar a melhorar a experiência do usuário e aproveitar para aplicar algumas técnicas novas que eu estou estudando?

Conversamos e todos toparam iniciar a nova fase do projeto juntos. Eu, quase nada ansioso, baixei logo o app e comecei algumas pesquisas.

A seguir eu detalho todos as etapas do meu processo de criação de um projeto mobile focado no usuário usando técnicas de Design Thinking.

1 – Entendimento e Pesquisa

Como falei, baixei o app e comecei a fazer minhas pesquisas. Alguns dos pontos que eu analisei foram:

  • Qual a primeira impressão do usuário quando conhece o aplicativo?
  • Porque o usuário baixaria o app e o manteria em seu celular?
  • Será que eu encontro alguma trilha perto de mim?
  • Boa parte das trilhas não deve ter sinal de internet. Será que o app funciona mesmo assim?
  • Eu não costumo fazer trilhas, será que o app vai me ajudar de alguma forma?
  • O que estão falando nos comentários da Play Store e nas redes sociais?
  • Será que tem uma boa avaliação?

Trily original

Trily original

Análise heurística

Fiz uma análise detalhada do sistema para entender quem são os usuários e como é a experiência deles no app.

Usei as 10 heurísticas do Jakob Nielsen.

  1. Visibilidade do Status do Sistema
  2. Compatibilidade entre o sistema e o mundo real
  3. Controle e liberdade para o usuário
  4. Consistência e Padronização
  5. Prevenção de erros
  6. Reconhecimento em vez de memorização
  7. Eficiência e flexibilidade de uso
  8. Estética e design minimalista
  9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros
  10. Ajuda e documentação

O aplicativo usava o Material Design como base e isso foi bom por garantir que muitos dos 10 itens estivessem presentes.

Algumas daquelas perguntas na etapa de descoberta foram respondidas de forma positiva. O app era bem avaliado pelos usuários e aqueles que gostavam de fazer trilhas mantiveram o app instalado e, inclusive, elogiaram a quantidade de trilhas, cachoeiras e cavernas que apareciam no app.

Já as outras que não foram respondidas me fizeram perceber algumas dores e oportunidades dos trilheiros. Por exemplo, a rota da trilha poderia ficar disponível offline em locais que não há sinal de internet.

Benchmarking

Depois de revirar o app inteiro voltei para a loja de aplicativos e busquei os concorrentes do Trily. Me cadastrei em cada um para entender cada funcionalidade. Obtive vários insights e a ótima notícia foi saber que não existia quase nenhum brasileiro. Os principais pontos encontrados foram: fotos, avaliações e comentários de usuários, comentários, mapa offline e gráficos de progresso da trilha.

Personas

Sempre que é iniciado um projeto todos os envolvidos precisam conhecer o seu público e saber quem irá usá-lo. A Persona, de forma resumida, é a personificação do público-alvo e ajuda o designer e o restante do time a se colocar no lugar do usuário final, a ter empatia. Para o Trily criei 2 personas, a Paloma e o André.

Trily Persona 1

Demografia e Comportamentos

27 anos, mora no Rio de Janeiro, namora, malha e corre todos os dias. Está sempre com os amigos, se preocupa com a saúde. Costuma usar os aplicativos Facebook, Spotify, Nike Training e TripAdivisor.

Dores e Necessidades

Antes de viajar costuma pesquisar o destino antes, mas as vezes não encontra informação.

Potenciais soluções

Ter informações detalhadas dos locais como o endereço, algumas fotos e avaliações.

Trily Persona 2

Demografia e Comportamentos

32 anos, mora em Brasília, solteiro, gosta de sites de esporte, andar de bicicleta e conhecer gente nova. Costuma usar os aplicativos Uber, Instagram, Netflix e Whatsapp.

Dores e Necessidades

Gosta de viajar, mas é um pouco desorganizado e tem dificuldade em saber o que levar.

Potenciais soluções

Ter algum tipo de ajuda para organizar uma viagem.

2 – Definição

 

Brainstorming

Eu, como publicitário de formação, adoro um brainstorming. É hora de colocar a criatividade em prática. Falei nesse post sobre o meu processo de criação de uma marca. Uso a mesma técnica de mapa mental, que basicamente é ligar pontos relacionados.

Resgato também as dores dos usuários que eu percebi na etapa de Personas e começo a pensar em como elas poderiam ser resolvidas. O brainstorming pode ser feito sozinho, mas é mais divertido e proveitoso quando é feito por todo o time.

  • No brainstorming do Trily apareceram ideias como:
  • Rota da trilha disponível offline (falei disso lá em cima)
  • Sugestão de hoteis, pousadas e outros locais para o viajante se hospedar
  • Checklist do que é necessário para fazer uma trilha
  • Gamificação e Ranking de usuários
  • Avaliação e fotos das trilhas, cachoeiras e cavernas
  • Realidade aumentada

Dificuldade técnica

No meio do brainstorming, quando falávamos das fotos surgiu uma dúvida:

Não temos condições de tirar fotos de todos os lugares e também não podemos simplesmente pegar da internet.

Depois de muita discussão tivemos a ideia de usar a Gamificação para incentivar os usuários a enviarem fotos para o app. Por exemplo: Se o viajante fizesse o check-in dos lugares que visitou e enviasse fotos que ele mesmo tirou para o app, ele poderia ganha pontos por isso. Dessa forma conseguiríamos um engajamento maior por parte dos usuários, não teríamos problemas com direito de uso e o app se tornaria mais prazeroso do ponto de vista da experiência.

Arquitetura da informação

Como vocês podem perceber, eu uso o mapa mental em vários momentos do meu trabalho. Usei no brainstorming, e agora para fazer a arquitetura da informação do projeto. Minhas ferramentas preferidas são o XMind e o Miro.

A ideia é mostrar, ligando pontos mesmo, onde o usuário está e para onde ele vai. Vou dar um exemplo: Assim que o usuário acessa o app, uma das primeiras telas é a de login. Ele precisa digitar seu e-mail, sua senha ou se cadastrar caso seja seu primeiro acesso. Ao se cadastrar é necessário informar alguns dados como o nome, e-mail e senha. O usuário ainda pode se cadastrar usando o Facebook ou o Google. Todos esses itens serão inseridos no mapa mental com setinhas apontando o caminho. Olha como ficou o mapa mental inteiro do Trily.

Trily - Arquitetura

3 – Protótipo e Validação

 

Wireframes (protótipo de baixa fidelidade)

O mapa mental serviu de apoio para a arquitetura da informação e para organizar as ideias na minha cabeça. Nesse ponto tenho todo o projeto mapeado e agora consigo pensar em como será a experiência do usuário em cada funcionalidade. Os wireframes me ajudam nessa parte e, sem pensar em cores ou formatos, eu desenho todo o fluxo de navegação do app à mão ou direto no computador.

Lembra da área de login que eu comentei? Os wireframes ficaram assim:

Trily Wireframe

Teste de usabilidade

Umas das práticas que eu aprendi depois de trabalhar em vários tipos de projetos é testar a usabilidade ainda na etapa de wireframe. Algumas dúvidas já podem ser respondidas logo no início e o impacto de retrabalho é menor.

Um bom insight que eu tive entrevistando alguns usuários foi relacionado aos guias turísticos. Minha ideia inicial foi separar uma área no aplicativo específica para a lista de guias, mas percebi que as pessoas primeiro procuravam uma trilha e só depois procuravam os guias turísticos daquela região. Interessante, né? Minha primeira ação foi criar uma área dentro de cada local informando os guias que trabalham ali perto.

4 – User interface (UI)

Tipografia

Escolhi usar a já consolidada fonte Roboto. O motivo da escolha foi pela familiaridade dos usuários. É a fonte padrão do sistema Android, com ótima legibilidade e com família tipográfica bem variada.

Trily Tipografia

Cores

O Trily original usava as cores vermelha e branca. Após algumas pesquisas sobre a psicologia das cores, entendi que o vermelho não era a cor mais indicada para o contexto. É uma cor que está relacionada ao perigo, e convenhamos, não é um conceito muito indicado para um aplicativo de aventuras. Para equilibrar, mas sem perder a identidade original, eu decidi adicionar outras duas cores, o verde por estar ligado à natureza e o amarelo por ter como característica alegria, energia e otimismo.

Trily Cores

Iconografia

A identidade visual do projeto seguia uma linha padrão do Material Design e não muito diferente de outros apps. A ideia foi trazer ícones mais amigáveis com bordas arredondadas e que transmitiam melhor a ideia.

Trily Iconografia
Trily Protótipo
Trily Protótipo

A nova interface, além de ter um apelo visual mais forte, deu ao aplicativo uma experiência melhor aos usuários.

Agora eles tem acesso a várias funcionalidades que sentiam falta, tem menos dúvidas e podem curtir melhor suas trilhas com os amigos.

Infelizmente o app ainda não foi lançado, mas assim que eu souber de novidades aviso todo mundo.