Gamma
UX/UI Design
Desafio
Criar uma experiência digital única para o Outback, reunindo diferentes jornadas de consumo — delivery, retirada, reserva e fila de espera — em um único app e PWA. Transformar serviços que estavam distribuídos em diferentes canais em uma experiência simples, intuitiva e alinhada às expectativas dos clientes e às necessidades do negócio.
Meu papel
Atuei como Product Designer responsável pela construção da experiência ponta a ponta, desde a análise de referências e definição de fluxos até o desenho das interfaces finais, documentação e alinhamento com desenvolvimento. Trabalhei em parceria com Product Owner, tecnologia, QA e stakeholders.
Time
Product Owner, Tech Lead, Pessoas Desenvolvedoras, Quality Assurance e Designers. 2021 a 2024.
Ferramentas
Figma, FigJam, Dribbble, Discord, Teams, Jira
Discovery
O processo inicial de discovery mapeou as dores do consumidor e apontou a necessidade de conectar a experiência física à digital
O discovery inicial foi conduzido por outra empresa do grupo, que trouxe aprendizados sobre comportamento dos clientes e oportunidades de melhoria. A partir desses insights, nosso time aprofundou o entendimento do problema, analisou padrões de mercado e transformou essas descobertas em decisões de produto.
Cliente não se importa em fornecer dados para ter uma experiência mais personalizada;
As pessoas querem recomendações, seja do garçom ou de um app;
Cliente não se incomoda em esperar na fila desde que possa passear pelo shopping;
As pessoas gostariam de um app que reunisse todos os serviços, que hoje estão espalhados em diversos canais;
As pessoas acham a pesquisa de satisfação muito longa e cansativa.
Unificando a jornada de consumo em um ecossistema simples
Entrar na fila, reservar uma mesa, fazer um pedido. Gerenciar sua conta e seus benefícios.
Do pedido à entrega ou retirada
Dividimos o checkout em 2 etapas e organizamos as informações em blocos para diminuir a carga cognitiva.
Adiamos a autenticação para o final do pedido, reduzindo a fricção de entrada.
Mantivemos o botão de sacola e fila presente em toda a navegação, permitindo o acompanhanhamento do pedido ou da posição na fila durante o uso de outras áreas do app.
Espera digital e reserva de mesa
Projetamos a rápida troca entre formas de consumo, mantendo essa funcionalidade presente em toda a navegação.
Separamos o fluxo de seleção da forma de consumo em etapas e solicitamos apenas o necessário para reduzir a carga cognitiva.
Propusemos que o app guarde os endereços usados anteriormente para facilitar o próximo pedido.
Consistência do mobile ao desktop
Optamos pelo uso de drawer para facilitar a realização ou acompanhamento de um pedido enquanto navegando pela aplicação.
Criamos botões no header para acessar a sacola e ao mesmo tempo outras formas de consumo, como uma reserva agendada.
Pensamos uma experiência consistente entre app, PWA mobile e PWA desktop, trazendo familiaridade e interação fluida, mas respeitando as especificidades de cada situação de uso.
Desk Research
Descobrimos e confirmamos algumas tendências e recomendações de design para desenhar nossa solução
Começamos realizando uma pesquisa de boas práticas em design de interface e experiência do usuário relacionada aos fluxos que iríamos desenhar. Utilizamos principalmente artigos do Nielsen Norman Group, Baymard Institute, Interaction Design Foundation e Medium.
Fluxos e Fidelidade
Checkout / Separar a sacola em passos: resumo do pedido, entrega e pagamento.
Login e cadastro / Permitir que o login ou cadastro seja feito apenas no final e solicitar apenas os campos necessários.
Upsell / Oferecer upsell de produtos alternativos (nos detalhes do produto) e complementares (no carrinho).
Fidelidade / Deve ser fácil de entrar, ter mecânica simples, permitir o compartilhamento de recompensas e usar dados para se aproximar do cliente na hora certa.
Usabilidade
Erros / Explicar e direcionar o usuário em telas de erro.
Writing / Uma boa escrita UX nunca presume. Use mensagem clara e sempre considere 2 usuários com diferentes emoções.
Motion / O motion deve auxiliar o usuário no uso de algo. Alinhe o motion com a necessidade do usuário.
Gestos / O conteúdo não deve se esconder por trás de gestos ou interações complicadas.
Acessibilidade
Carrosséis devem ter até 3 ou 4 etapas e o conteúdo deve ser acessível de outra maneira também.
A acessibilidade é mais barata quando feita com antecedência.
Projetar para baixa largura de banda.
Usar mais do que cores para indicar informações importantes.
Usar palavras que possam ser aplicadas a todos os usuários.
Usar CTAs para definir uma expectativa clara e correta para o usuário.
Fluxo, mapa e blueprint
Organizando jornadas complexas em fluxos simples e intuitivos
Elaboramos, para cada forma de consumo, um mapa de jornada (considerando o que o usuário estaria fazendo, pensando e sentindo) com blueprint, onde levantamos o que seria necessário de front e back-end, além de oportunidades e equipes envolvidas.
Também construímos um fluxo mais detalhado, tentando entender cada tarefa e respostas do sistema, além de gestos, funcionalidades e animações que poderiam ser de incluídos nas interações.
Benchmarking
Usamos players de mercado e diferentes segmentos como referência
Antes de começar a desenhar os wireframes, buscamos diversas referências para nos inspirar. Buscamos desenhos relacionados a pedido de comida mas também a outros segmentos, como arte e e-commerce, pensando nos diferentes fluxos mapeados, como login, tela de pagamento, home, cardápio, sacola, acompanhamento de pedido e página de produto. Uma grande referência para nós foi o iFood, app de delivery já consagrado no mercado brasileiro.
iFood
Endereço na tela inicial e banners promocionais e categorias em destaque.
Layout clean e fluxo intuitivo, fácil de usar.
Botão de sacola que permanece em toda a navegação.
Carrinho dividido em etapas: resumo, entrega e pagamento.
Tela de produto com imagem em destaque, seleção de acompanhamentos e itens obrigatórios e botões de quantidade e "Adicionar" fixos ao dar scroll.
Referências visuais
Produtos com imagem em destaque e diferentes formas de mostrar o cardápio.
Blocos de informação no carrinho para facilitar o uso.
Gestos que facilitem a interação, como ao remover um item do carrinho.
No acompanhamento do pedido, destacar as informações principais, podendo ver mais detalhes, e ter uma forma de acompanhar na tela inicial do app.
Na versão desktop, usar drawer para mais ações sem sair na tela em que está.
Wireframing
Explorando soluções antes de definir a interface final
Com os fluxos definidos e os principais problemas mapeados, exploramos diferentes soluções através de wireframes. Cada designer criou propostas individuais e, em seguida, realizamos uma etapa colaborativa para discutir alternativas e convergir em uma solução final.
Produto final
Construindo uma interface consistente com a identidade Outback
Com wireframes em mãos, começamos a desenhar o layout final. Durante as sprints, fomos refinando o desenho, fazendo algumas adaptações devido a limitações técnicas e prazos, e construindo o guia de estilo.
Fizemos alguns estudos e propusemos uma pequena alteração na cor principal da marca para uso no app, visando atender critérios de acessibilidade quanto a contraste. A marca utiliza 3 tipografias. Optei por utilizar a Have Heart One, mais manuscrita, apenas em títulos específicos; a Venner, usada em caixa alta, para títulos principais; e a Roboto, mais legível, como a tipografia para parágrafos e subtítulos.
Handoff e guia de estilo
Documentação é essencial, mas conversas com equipe de desenvolvimento, ainda mais
Para facilitar o handoff com o time de desenvolvimento e de testes, usei um sistema de anotações junto ao desenho das telas. Também construí o guia de estilo com componentes, estilos e orientações no Figma.
Mas as cerimônias de alinhamento com time técnico foram fundamentais para alinhar expectativas, solucionar dúvidas e realizar iterações.
Responsividade
Criando um experiência consistente em diferentes dispositivos
O objetivo era manter uma interação semelhante entre app e PWA nos dispositivos móveis. No Figma, foi detalhado o comportamento das interações em diferentes tamanhos de tela.
Notificações
Mensagens oportunas e personalizadas
Sugeri o conteúdo e a programação de mais de 30 notificações para a aplicação, divididas em 5 tópicos: notificações de atualizações de pedido; personalizadas para cada cliente; lembretes; recomendações; e promoções. Desenhei as notificações para Android, iOS e desktop.
Momento atual
Projeto pausado pelo cliente
No decorrer do projeto, precisamos despriorizar alguns itens, como os gestos e animações que gostaríamos de incluir, a fim de entregar a melhor solução da forma mais ágil. Em 2023 o app chegou a ser testado em restaurantes de São Paulo, mas em 2024 o cliente optou por pausar o projeto.
Documentação e comunicação
Um Figma organizado faz toda a diferença para agilizar e facilitar o trabalho de designers e pessoas desenvolvedoras. Mas também é essencial haver uma boa comunicação com todo o time.
A troca com outros designers é muito positiva. Traz outros pontos de vista e novas ideias de solução.
Clientes e priorização
Às vezes é necessário ser flexível e adaptar alguns itens para atender negócio, usuários e tecnologia.
Processos
É importante ter na sprint uma etapa de revisão pelo(a) designer após o desenvolvimento back e front-end de um fluxo para garantir maior qualidade na entrega.