XB Change Burger

Desenvolvendo uma plataforma de personalização e agendamento de pedidos de uma hamburgueria.

Sobre o projeto

Duração

Junho 2022 - Agosto 2022

Papel

UX/UI Designer

Plataforma

iOS // Android

Tags

Google //  Restaurante  // Design Thinking // Figma // Miro

Este projeto foi desenvolvido individualmente como parte integrante da formação do curso "Certificado Profissional Design de UX no Google". O desafio foi: desenvolver um produto digital de um restaurante de sua cidade. A primeira pesquisa revelou que a opção de negócio mais atrativa para os usuários seria uma hamburgueria, assim o fictício restaurante "XB Change Burger" nasceu. 

O produto digital desenvolvido foi um aplicativo que tem como público alvo jovens e famílias com problemas de gestão de tempo, preocupação com os custos e com os ingredientes. Assim, a meta do projeto foi trazer um meio de realizar pedidos de forma prática, personalizada e com possibilidade de agendamento de entrega.

Eu fui o responsável por todas as etapas do projeto e utilizei do Design Thinking como metodologia para realização deste estudo de caso. A seguir está o estudo de caso completo da XB Change Burger, que encontra-se, atualmente, finalizado. 


Desenvolvendo empatia pelo usuário

User Research

O primeiro desafio para desenvolver o produto digital foi identificar e aprender a demografia das pessoas que frequentam restaurantes. Para isso, foi realizada uma pesquisa quantitativa com 67 participantes que visava descobrir a frequência mensal de idas aos restaurantes, a faixa etária, o nível de escolaridade, qual o tipo principal de restaurante que eles vão etc.

 A suposição era de que a faixa etária majoritária ficaria entre os 20 e 30 anos e que, provavelmente, os restaurantes mais frequentados seriam: self-service e hamburgueria.

O questionário realizado por meio do Google Forms confirmou algumas dessas suposições, como a faixa etária, e mostrou outras, como o self-service, erradas.

Principais pontos revelados:

Além disso, como 79% costumam frequentar hamburguerias, o restaurante escolhido para desenvolver um produto digital foi uma HAMBURGUERIA.

O segundo desafio foi entender as relações mais profundas dos participantes com hamburguerias. A forma encontrada de fazer isso foi realizando entrevistas remotas com pessoas que estavam no escopo que a pesquisa quantitativa revelou. Desse modo, foram entrevistados 8 participantes diversos a fim de obter uma perspectiva ampla.

Segundo os entrevistados, eles:

Também observei quatro pontos principais de frustrações dos participantes da entrevista:

"Um prato novo, uma experiência diferente, molhos..."

Os usuários estão em busca de novidades e experiências novas e não encontram.

"Não gosto de ser mal atendido"

Falta de suporte e comunicação com o estabelecimento é uma frustração que alguns entrevistados trouxeram.

"Procuro um lugar que seja barato, que tenha promoções"

A maioria dos entrevistados mostrou apreensão referente a preços como fatores de atração ou repulsão.

"Tenho alergia a alguns ingredientes e não posso trocar"

A falta de opções para substituir ou montar o pedido foi uma das dores apontadas.

A fim de filtrar o comportamento dos usuários, eles foram divididos em dois grupos: o grupo 1, representando principalmente aqueles com dores relacionadas a suporte e produto, e grupo 2 focado em processo e financeiro.


Personas

Juntando as informações dos grupos, com os dados demográficos dos participantes de ambas pesquisas sintetizei eles em duas personas:

A Alex, representando o grupo 1, é uma persona que traz, principalmente, a experiência e qualidade do produto como fator mais importante; como isso agrega valor à sua rotina.
Já o Matias, representa o grupo 2 e todos os participantes que trouxeram empecilhos como tempo, dinheiro e problemas com o pedido.

Histórias dos usuários

Posteriormente, ainda visando desenvolver a empatia pelos usuários, temos as histórias do usuário da Alex:

"Como uma Customer Success Manager que trabalha home office e tem preguiça de cozinhar, eu quero uma experiência diferente e de qualidade, para conseguir aproveitar os momentos especiais com a minha namorada."

Do Matias:

"Como um estudante de odontologia sem tempo, eu quero comida rápida, com promoções e que eu possa alterá-la, para não me preocupar com alergênicos e aproveitar meu tempo livre com os amigos."


Jornada do Usuário

Apenas uma das personas foi escolhida como guia para o restante do projeto, o Matias. A razão da escolha foi devido à capacidade desse perfil oferecer um número maior de possibilidades ao produto, enquanto que a persona Alex estaria mais associado à questões de negócios e investimentos (com criação de novidades e experiências gastronômicas).

Com o intuito de evitar brechas no processo, criei o mapa de jornada do usuário do Matias com a finalidade simpatizar com as frustrações dele por meio do passo a passo tomado pelo usuário nas etapas que envolvem fazer um pedido via um aplicativo de hamburgueria.

Mapa da jornada do usuário de Matias

Além de apontar tópicos que trazem a importância da praticidade durante a realização do pedido - pedidos recentes e filtros de busca -  o mapa de jornada do usuário de Matias permitiu, também, identificar algumas oportunidades de negócio, como o engajamento por meio de notificações, up/cross sell e programa fidelidade. 


Definindo o problema

O problema

A partir dos exercícios de empatia foi possível desenvolver uma declaração de problema, peça chave para as próximas tomadas de decisão: 

“Matias é um estudante preocupado com dinheiro, sem tempo e alérgico a algumas comidas. Ele precisa de um produto que ofereça preço acessível, praticidade e garanta uma maneira de selecionar alguns alimentos específicos, porque ele não tem nem tempo nem condições de pagar caro em sua rotina alimentar.”


A hipótese

Com a problemática em mãos, defini uma hipótese de solução para ela, de que:

“Se Matias fizer um pedido usando o produto fornecido pela hamburgueria, então ele conseguirá montar sua alimentação de forma prática, barata e sem se preocupar com tempo e com alergênicos.” 


Proposta de Valor

A partir da hipótese trazida, algumas propostas de valor únicas foram definidas:


Idealizando o produto

Auditoria competitiva

Visando entender como os possíveis concorrentes se portam no mercado e buscar ideias para chegar em um diferencial, realizei uma auditoria competitiva. Nela, avaliei três restaurantes concorrentes, sendo dois diretos e um indireto. 

3 Ideação - Auditoria Competitiva - 1º Projeto Google

A investigação mostrou que a maioria dos produtos digitais desses estabelecimentos não possuem a opção de agendar ou personalizar os pedidos, e, quando possuem, é de uma forma limitada - com poucas opções de edição do pedido ou poucos horários de agendamento.  Até mesmo o branding e alguns atalhos que visam agilizar a vida do usuário - como pedidos recentes, horário de funcionamento e formas de pagamento - não apareceram nos produtos deles.

Além disso, existe uma lacuna na exploração de oportunidades de atração de clientes com possíveis cupons/descontos, variedades/novidades e suporte. Assim, observei que essas fraquezas poderiam ser, posteriormente, transformadas em oportunidades para explorar no meu produto, na qual atendam o perfil do Matias e da Alex.

Brainstorm e Crazy eights

A partir de um brainstorm de ideias, cheguei a conclusão que uma forma de garantir praticidade e melhor gestão do tempo seria por meio de um agendamento de pedido. Além disso, pensei que uma forma de alterar os pedidos poderia acontecer por meio de uma montagem personalizada de hambúrgueres.

Para gerar ideias de agendamento e personalização foram feitos dois Crazy Eights - criando uma ideia por minuto  durante 8 minutos no total.  As principais ideias deles foram:

Crazy eigths com possíveis formas de personalização e agendamento de pedidos de uma hamburgueria.

Personalização:



Agendamento:


Filtrei as ideias principais e cheguei a conclusão de usar a personalização via web e um serviço de agendamento que o usuário pudesse escolher a hora e a data de entrega online. Desse modo, a melhor maneira de alcançar essas metas, garantir praticidade, trazer destaque para questões como novidades - seguindo também o perfil da Alex -, suporte, promoções e acessibilidade seria por meio de um aplicativo mobile

Como um dos objetivos principais do aplicativo é garantir uma personalização, foi escolhido o nome "XB Change Burger". XB fazendo menção ao tipo de hambúrguer muito comum, o "X-Burguer". Já o "Change", vem do inglês e significa alterar/mudar.


Meta do produto

Portanto,  estabeleci que o produto a ser desenvolvido seria um aplicativo da XB Change Burger que permitiria os usuários fazerem  pedidos de forma prática e exclusiva, afetando usuários que gostam de hambúrgueres de qualidade e acessíveis, por meio de personalização e agendamento dos pedidos. A efetividade do aplicativo seria medida analisando a quantidade de pedidos agendados e personalizados durante a semana em comparação com os pedidos comuns. 

Fluxo do usuário

Desenvolvi um fluxo de uso do aplicativo que visava simplificar e garantir velocidade na execução da tarefa do usuário, ele se deu da seguinte forma:

Fluxo do usuário

Storyboard

A criação de storyboards permitiu ter uma visualização mais abrangente do uso do produto e do seu impacto na vida dos usuários.

Storyboard de big picture
Storyboard de close up

Arquitetura da Informação

Pensando em ser prático, determinei que a homepage do aplicativo deveria ser breve e com recursos que atendam as necessidades do usuários de forma objetiva. Dando ênfase, principalmente, aos pontos de dores que a pesquisa revelou: experiências novas, alteração de pedidos, promoções e um canal de suporte por meio de observações no pedido.

Prototipação do aplicativo

As estrelas e observações foram usadas para marcar elementos que fariam parte dos próximos rascunhos

Wireframes no papel

Usando papel e lápis criei diversos rascunhos de cada tela e posteriormente decidi quais recursos e ferramentas mais conseguiriam atender as necessidades do usuários de maneira mais prática e intuitiva.

A versão final dos wireframes:

Wireframes da XB Change Burger

Do papel para o digital

Utilizei do Figma para transformar meu sketch de papel em uma versão digital de baixa fidelidade para que, finalmente, pudesse testar com usuários.

Protótipo de baixa fidelidade 

O protótipo de baixa fidelidade conecta o fluxo principal do usuário: realizar um pedido personalizado e agendar sua entrega. Dessa maneira, o protótipo poderia ser usado para um estudo de usabilidade posterior com usuários.

Protótipo de baixa fidelidade

Veja o protótipo de baixa fidelidade da XB Change Burger: 

Teste de usabilidade

Primeiro teste de usabilidade

O primeiro estudo usabilidade foi moderado por mim, com cinco pessoas diversas e realizado no protótipo de baixa fidelidade. O objetivo principal do teste era buscar evidências sobre o fluxo de usuário, encontrar alguma lacuna no produto e capturar métricas sobre taxa de conversão, de erro e tempo na tarefa.

No estudo os cinco participantes receberam uma introdução e instruções de atividades para concluir em cerca de 10min. A faixa etária deles ficava em torno de 18-60 anos, com um dos participantes possuindo dificuldade visual.

Aprendi com as etapas do teste de usabilidade que:

Todos participantes conseguiram terminar o processo completo em torno de cinco minutos, o problema mais recorrente foi na área de preenchimento do cartão de crédito: escrita e endereço; com 20% deles simplesmente pulando essa etapa, sem analisá-la.

Mapa de afinidade

Montei um mapa de afinidade com a finalidade de achar temas recorrentes e filtrar eles em insights acionáveis para próxima iteração de design.

Insights extraídos do teste de usabilidade

Os usuário querem uma forma:


Transformação de insights em recursos

Os feedbacks e insights gerados a partir do teste de usabilidade foram aplicados na iteração do design

Além disso, algumas alterações partiram de mim, visando estabelecer melhores práticas de UX - como a barra de navegação inferior e a revisão de pedido durante o pagamento.


Da baixa fidelidade para a alta

Escolha de estilos

Escolhi como base dos botões e formulários o Material Design 3 da Google. Tive como inspiração os neons chineses, visando trazer modernidade e alto contraste com linhas claras sobre o preto, gerando uma visibilidade clara e acessível.

A cor preta foi para trazer modernidade e exclusividade, a amarela para trazer dinamismo, energia e estimular a concentração. E a vermelha da logo e das chamadas para ação para trazer urgência e abrir o apetite, combinando com o amarelo para alcançar o sentimento de fome e rapidez.

A princípio escolhi a "Fugaz One" como fonte para a logo, os títulos e os subtítulos para passar a noção de dinamismo, enquanto peguei a "Roboto" para o restante das categorias

Depois disso fiz a prototipação desses mockups visando um novo teste de usabilidade.

Veja o protótipo de alta fidelidade da XB Change Burger: 


Segundo teste de usabilidade

O segundo estudo de usabilidade foi moderado por mim, com quatro pessoas diversas e realizado no protótipo de alta fidelidade. O objetivo principal do teste era testar as mudanças feitas depois do primeiro teste de usabilidade, entender se a ferramenta de lupa (pesquisa) era realmente necessária na barra inferior e notar alguma nova frustração dos participantes.

Com o segundo teste de usabilidade foi possível, também, perceber se os usuários precisavam de mais algum recurso, então, utilizando os pontos apresentados por eles, eu mudei minha estratégia e cheguei na seguinte versão final:

Implantei um novo fluxo do usuário, deixando o cadastro mais cedo, seguido de um resumo do pedido para, então, abrir uma sugestão ao usuário de prosseguir para o agendamento ou acrescentar o pedido ao carrinho. 

Essa decisão foi com base no que 3 participantes falaram sobre não possuírem a possibilidade de ir para o cardápio.

O resultado

Styleguide

Depois de validar meus conceitos com usuários por meio de pesquisas e testes de usabilidade cheguei a versão final do aplicativo.

Mantive as mesma cores e os ícones do primeiro protótipo de alta fidelidade e troquei somente as bordas e grossura das linhas. Além disso, substituí a tipografia, trabalhando apenas com a Product Sans em diferentes tamanhos, para trazer um visual mais limpo e melhorar a legibilidade. 

Guia de estilos
Protótipo final de alta fidelidade

Veja o protótipo final de alta fidelidade da XB Change Burger: 

O aplicativo da XB Change Burger

Concluí o aplicativo da XB Change Burger por meio da solução dos principais pontos de dores apontados na pesquisa: problemas de gestão de tempo, preocupação com os custos e com os ingredientes. Desse modo, consegui alcançar as metas de realizar pedidos de forma prática, personalizada e com agendamento de entrega.

A seguir um vídeo do aplicativo:

Considerações finais

Lições aprendidas

Esse, como um dos meus primeiros projetos, foi bastante desafiador. Apesar disso, sinto que ele agregou muito na minha carreira de UX Designer por permitir me aprofundar mais nas suas ferramentas e recursos. Do ponto de vista técnico, percebi uma melhora na minha capacidade de storytelling, de desenvolver empatia com os usuários e nas minhas habilidades com o Figma. O maior obstáculo que encontrei foi reunir pessoas para as pesquisas e para os testes de usabilidade. No entanto, depois de consultar alguns amigos da área de UX e pegar algumas dicas, consegui reunir integrantes dentro do meu círculo de amizade, familiar e em redes sociais para realizar as seções.

Próximas etapas

O próximo passo para aprimorar o aplicativo XB Change Burger seria a ampliação dele com novos fluxos do aplicativo, tais quais:

Ademais, do ponto de vista do negócio, medir a efetividade da adoção do "monte seu hambúrguer" na vida dos usuários (registrando o número de pedidos personalizados), colher dados sobre o impacto do agendamento de pedidos na rotina deles e acrescentar novas oportunidades, como aquelas reveladas, principalmente, pelo mapa da jornada do usuário. As principais foram:


E não posso esquecer de possíveis melhorias na acessibilidade, acrescentando opções de tradução, textos alternativos e otimização do app para leitores de tela.


Entre em contato por

EmailLinkedInLinkLinkLink