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
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.
- Visibilidade do Status do Sistema
- Compatibilidade entre o sistema e o mundo real
- Controle e liberdade para o usuário
- Consistência e Padronização
- Prevenção de erros
- Reconhecimento em vez de memorização
- Eficiência e flexibilidade de uso
- Estética e design minimalista
- Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros
- 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é.
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.
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.
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:
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.
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.
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.
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.