UX Design - Projeto do Aplicativo Veg Food | How Bootcamps

UX Design – Projeto do Aplicativo Veg Food

Veg Food é um projeto de app de avaliações e buscas sobre experiências de refeições veganas/vegetarianas criado por Marília Rosa (Diretora de Arte na EB Comunicação Estratégica & UX/UI Designer) criado durante o Bootcamp UX Design. Confira a proposta:

Depois de muitos dados, pesquisas, entrevistas… esse é o projeto final!

Em janeiro de 2021, resolvi me propor um desafio. Depois de muita busca encontrei o Bootcamp da How em UX Design! Ali começava um longo processo de muita imersão, prática e aprendizado! Todo a jornada será contada a partir de agora.

A proposta do Bootcamp foi desenvolver um projeto de UX em 10 semanas. O Tema escolhido foi alimentação e o subtema saúde.

Usando a metodologia do Double Diamond em toda a jornada do projeto.

A partir desse momento foi preciso definir um caminho a seguir e o público vegano/vegetariano foi o escolhido como alvo do projeto.

Double Diamond é uma metodologia de Design Thinking que entrega ao usuário uma solução inovadora para auxiliá-lo de uma forma efetiva com sua dor ou problema.

Como facilitar o acesso às informações sobre restaurantes veganos/vegetarianos?

Fase 1: Imersão

Desk research:

Essa etapa foi importante para conhecer alguns dados e informações já existentes sobre o universo veg. Ela é feita através de uma pesquisa na internet.

Pesquisa quantitativa:

Depois de ter alguns dados, foi elaborado um formulário com perguntas gerais sobre o público, suas necessidades e hábitos.

Dados coletados:

Pesquisa qualitativa:

Nessa etapa, são escolhidos alguns usuários da pesquisa quantitativa para uma conversa um pouco mais longa e específica. Aqui é preciso entender o contexto e as possíveis dores do usuário. Foram entrevistadas 7 pessoas.

Para realizar as entrevistas foram separados dois grupos:

1. Usuários de app de delivery que usam todo dia
2. Usuários de app de delivery que usa mas não com frequência

Perguntas:

Matriz CSD (certezas, suposições e dúvidas): é uma ferramenta que ajuda na categorização dos dados e informações ao longo do projeto. No início ela deve ter mais suposições e dúvidas e conforme o projeto for avançando, deve estar mais preenchida na coluna de certezas.

Top Insights

Após as pesquisas, e os dados levantados é feito um quadro com os 5 top insights:

Card Sorting

É utilizado para agrupar informações semelhantes.

Top Insights e Card Sorting

Matriz CSD | revisão de dados

Aqui após a indexação e análise de dados relatados nas etapas anteriores, são colocados na fase 2 da Matriz CSD, agora ela já conta com a coluna de certezas com muito mais informação que as outras 2 colunas.

Matriz CSD — etapa 2: categorização dos dados coletados

Fase 2: Definição

Personas:

Com as informações obtidas na fase de imersão, foram criadas 2 personas: um usuário vegano e um usuário não-vegano. Cada persona tem idade, hábitos, rotina, personalidade, motivações e hobbies, dores e desejos.

São elas que passam a guiar o projeto nesse ponto, pois representam um usuário muito próximo da realidade na utilização do produto que está sendo desenvolvido.

Personas

Mapa de empatia

Mapa da Empatia é uma ferramenta utilizada para conhecer melhor o usuário. A partir dele é possível detalhar a personalidade e compreendê-lo melhor.
São 6 perguntas que ajudam a identificar o público-alvo e assim conhecer seus sentimentos, dores e necessidades.

Mapa de empatia

Job Stories

Ferramenta utilizada para entender, qual a motivação do usuário? Qual a necessidade dele?

Quando?
Quero consumir comidas vegs prontas
Eu quero/preciso
Ter acesso a dicas, avaliações e localização de restaurantes
Para que eu possa
Decidir em qual restaurante comer ou pedir
Premissa de sucesso
Conseguir me alimentar seguindo avaliações e dicas de outros usuários vegs

Esse ponto começou a definir o rumo que o projeto passa a seguir a partir de agora.

Job Stories

Fase 3: Ideação

Nessa etapa já é possível e necessário ter definido o problema, a dor do usuário para seguir as próximas etapas.

Problema: Dificuldade no acesso através de app de delivery para usuários vegs.

Dor: Falta de confiança em utilizar apps de delivery

Solução:
Desenvolver um app de avaliações de restaurantes vegs, assim o usuário pode ter mais confiança em escolher um determinado estabelecimento para se alimentar. Ele vai possibilitar o compartilhamento de informações como: preço, localização e experiências de outros usuários, sejam elas boas ou não.

Quando foi feito o brainstorming através do método 4x4x4 essa solução ficou ainda mais clara.

Brainstorming — método 4x4x4

Estacionamento de ideias

Essa é uma ferramenta que pode ser utilizada ao longo de todo o projeto, mas é aqui que ela pode ser realmente levada em consideração. São ideias que podem ser muito interessantes para utilizar no app.

Por exemplo:

Estacionamento de ideias

Benchmarking / Heurística

Ferramenta utilizada para comparar apps semelhantes, separando em pontos positivos (post-it verde) e negativos (post-it vermelho). Aqui eu fiz a análise do app Booking, que apesar de ser de outro setor que é viagens, ele também tem avaliações dos usuários. E também analisei o Happy Cow, esse já bem específico utilizado pelo público vegano/vegetariano.

Booking
App de reservas de hotéis e viagens

Pontos interessantes:

Happy Cow
App de restaurantes veganos, vegetarianos e sem glúten.

Pontos interessantes:

Benchmarking e Análise Heurística

Jornada do usuário

Nessa etapa são relatadas situações possíveis que o usuário irá realizar.

  1. Vê pessoas no Instagram compartilhando publicações sobre o app
  2. É direcionado para a loja de apps e faz o download
  3. Abre o app e passa pelo onboarding
  4. Utiliza um filtro para encontrar lugares por localização, preço, avaliação
  5. Cria sua conta para poder colaborar com um compartilhamento de uma experiência
  6. Recebe um convite para compartilhar sua primeira experiência
  7. Compartilha a avaliação

Mapeamento da jornada do usuário

Card Sorting — Features

Aqui são definidos os itens do app.

Mapeamento das funcionalidades do app

Método MoSCoW

O método MoSCoW é uma técnica de priorização usada em gerenciamento, análise de negócios, gerenciamento de projetos e desenvolvimento de software para chegar a um entendimento comum.
Aqui nessa etapa são definidos o que terá no MVP e o que não terá por enquanto.

São definidos em 4 quadros:

Must Have:

Quadros com os dados priorizados através do método MoSCoW

User Flow

Aqui é definido de forma clara e eficiente, o caminho a ser percorrido pelo usuário dentro app. É o fluxo dele durante a navegação.

Nesse caso temos 3:

Mapeamento do fluxo do usuário dentro do app

Rabisco frame | Wireframe

Finalizando a etapa de ideação, são feitos os processos de protótipo em baixa fidelidade. Neles são colocados de uma forma bem simples como poderá ser o app, aqui sem se preocupar com cores, nomes, texto.

Protótipo de baixa fidelidade

Fase 4 — Prototipação

Última etapa do processo do Double Diamond. Nessa o projeto toma forma de verdade, com cores, nomes, textos, ícones.

Começando pelo moodboard, um painel semântico com referências visuais que vão ajudar nas escolhas e decisões daqui pra frente.

No meu moodboard, eu observei que as cores vermelho, amarelo e verde eram muito presentes e por isso defini esses tons para o meu protótipo final.

Painel semântico visual: moodboard

UI (user interface)

Nesse quadro estão os elementos visuais que escolhi para seguir no meu protótipo de alta fidelidade.

Elementos e cores para o protótipo de alta fidelidade

Logo: Veg Food

O nome do logo é simples para identificar facilmente a busca pelo usuário, veg já um termo muito utilizado nesse universo e que serve tanto para veganos como vegetarianos.

O “mundo” de elementos vegs, foi pensando em unir os elementos vegs ao compartilhamento de informações de outros usuários vegs no app.

A fonte utilizada no type é arrendodada justamente como o elemento “mundo” de elementos vegs. Cria-se uma unidade visual.

Logo do App

Protótipo funcional

Protótipo de alta fidelidade | navegável

 

Teste de usabilidade

Realizei o teste com 4 usuários. O que pude extrair de informações sobre o app:
Tarefas que pedi para realizarem:

  1. Entrar no app
  2. Fazer uma busca por um restaurante
  3. Adicionar e concluir uma nova avaliação

Resultados:

  • App fácil de navegação
  • Simples, lembra a usabilidade do Ifood
  • Prático
  • Foi levantada a questão de adicionar a categoria glúten free, mas para isso precisaria realizar uma nova pesquisa
  • Cores agradáveis
  • Verificar espaçamentos (feito)
  • Layout bonito, clean
  • Deixar as fotos em destaque é um ponto positivo
  • Colocar uma tela só para a avaliação (não foi feito nesse momento)
  • Adicionar um botão para avaliação (a maioria dos usuários entrevistados não teve esse problema então não mudei na interface)
  • Logo bonito

Conclusão final

Ao longo dessas 10 semanas aprendi que:

  • É importante confiar no processo, sempre!
  • Sempre tenha os dados para concretizar o que está sendo falado.
  • Tenha foco e acredite em você!
  • Nem sempre a sua ideia será considerada, e tudo bem.
  • Esteja aberta a mudar de caminho caso seja necessário.
  • UX é um universo lindo, colaborativo e muito incrível!
  • Cuide primeiro das pessoas.
  • Você não é o seu usuário.

Para iniciar ou migrar para UX Design, faça o Bootcamp UX Design, um sprint de 10 semanas para pessoas que querem trabalhar como profissonais de UX ou Product Design. No bootcamp você irá construir projetos práticos e criar o seu portfólio com mentores exclusivos das principais startups do Brasil. Saiba mais.

Voltar para blog