Em São Paulo - SP
GS Designer UX UI
Projeto 01
Cardápio Digital
PAPEL
UI / UX Designer
EMPRESA
DGUESTS Tecnologia
LANÇAMENTO
2023
HEAD TEC
Lucas Matos - Socio
DEV FULL STACK
Jean Gomes
Foi quando comecei!
Contexto
UX UI Designer no DGuests desde de Abril de 2022, sendo o único designer da equipe e responsável por todo o design da experiência do usuário nos produtos da plataforma desde então. Cuido da definição dos padrões de usabilidade, identidade visual e consistência entre todas as interfaces da plataforma, e também das definições dos padrões de usabilidade, identidade visual e consistência entre todas as interfaces da plataforma.
Foi quando comecei!
Objetivo
Este projeto visa recriar toda estrutura de layout e experiencia do cliente em um cardápio digital, aprimorando sua usabilidade e design visual com base em feedbacks de clientes assinantes reais. O objetivo é tornar a navegação mais intuitiva, organizar melhor as informações e facilitar a escolha dos produtos. O novo design segue princípios de UX/UI priorizando clareza e interatividade, garantindo uma experiência mais fluida e envolvente para os clientes.
Ideação
Minha participação se deu em quatro etapas distintas ao longo do projeto:
1 - Coleta de Feedback Qualitativa
Iniciei o projeto com uma rodada de entrevistas com clientes reais que já utilizavam o produto. O objetivo foi entender o contexto de uso, rotinas operacionais e frustrações comuns, além de mapear oportunidades não exploradas. Essas conversas forneceram insights valiosos para direcionar o escopo das melhorias.
2 - Pesquisa de Mercado e Analise de concorrentes
Com os dados em mãos, organizei uma sessão de alinhamento com stakeholders para estruturar uma pesquisa mais aprofundada do mercado e concorrentes.
A partir daí, priorizamos quais problemas atacar primeiro com o objetivo de causar o maior impacto para o usuário final.
3 - Design Visual
Com base em todo aprendizado, redesenhei a interface do cardápio, propondo soluções que melhorassem a legibilidade, navegabilidade e apelo visual. Além disso, introduzi novas funcionalidades para elevar a experiência do cliente e gerar valor para os estabelecimentos. O que também nos trouxe uma inserção maior em relação aos nossos concorrentes.
4 - Aprovação e entrega do design final
A aprovação do projeto marcou um ponto de virada: validação das soluções propostas e sinal verde para transformar ideias em valor real para clientes e negócios.
O problema
Diagnóstico de feedback
Embora fosse uma funcionalidade estratégica para o sistema e relevante na retenção de assinaturas, o cardápio digital anterior enfrentava sérios problemas de usabilidade. Essas falhas comprometiam tanto a experiência do usuário final quanto os resultados obtidos pelos estabelecimentos. Abaixo, destaco os principais pontos críticos identificados:
1 - Navegação pouco intuitiva
A arquitetura da informação era rasa e mal estruturada, dificultando a exploração do conteúdo. Categorias pouco claras e uma hierarquia visual confusa criavam fricções na descoberta de produtos, especialmente em cardápios extensos.
2 - Baixa encontrabilidade de produtos
Usuários relatavam dificuldade em localizar itens específicos, mesmo quando já sabiam o que estavam buscando. A ausência de recursos como busca, filtros ou destaques visuais tornava o processo de escolha lento e frustrante.
3 - Falta de feedback visual e interações pobres
A interface carecia de microinterações e elementos de feedback visual que sinalizassem ações do usuário, como toques ou seleções. Isso gerava insegurança na navegação, além de comprometer a fluidez da experiência.
4 - Design visual desatualizado e pouco acessível
O layout não seguia boas práticas de design responsivo, com tipografia inadequada, contraste insuficiente e elementos visuais desorganizados. Isso afetava diretamente a legibilidade, a acessibilidade e a percepção de profissionalismo da marca.
5 - Impacto direto na conversão e decisão de compra
Esses problemas combinados criavam barreiras cognitivas no momento mais sensível da jornada: a decisão de compra. A experiência pouco fluida e visualmente pouco atrativa reduzia o engajamento e impactava negativamente as taxas de conversão.
Exploração
Com os dados em mãos, organizei sessões de alinhamento com stakeholders e brainstorming com equipes multidisciplinares para explorar as reais necessidades do novo cardápio digital.
Analisamos o comportamento dos usuários, barreiras de usabilidade, frustrações e objetivos de negócio, o que nos permitiu alinhar expectativas, ampliar a visão do problema e priorizar soluções com maior impacto para o usuário final.
Arquitetura
Projetei uma nova navegação no app, com mais níveis de hierarquia, tornando a a percepção de localização e destino da interface mais interpretável. Facilitei o acesso a Agendamentos Online e funcionalidades similares, encaixando-os na menu navbar. Talvez o tempo de conclusão de tarefas tenha se tornado maior, ao priorizar a navegação eficiente dentro do aplicativo, devido a um volume maior de taxonomia.
Wireframing
Comecei a etapa de design com wireframing, projetando em volume e testando os melhores padrões para criação de user flows e arquitetura de informação.
Testes com usuários
Com os protótipos já em um estágio funcional, iniciei uma fase intensa de testes qualitativos com usuários reais e colaboradores internos. Realizamos entrevistas e sessões de usabilidade guiadas para observar como os usuários interagiam com o novo cardápio digital em diferentes contextos. Esse momento foi marcado por diversas iterações rápidas sempre guiadas por evidências qualitativas.
Hipótese nº 1
Os usuários entendem como navegar, explorar e interagir com os recursos do novo cardápio digital.
1 - Como os usuários percebem a nova interface do cardápio?
2 - Eles entendem como encontrar pratos, filtrar informações e acessar detalhes relevantes (alérgenos, variações, etc)?
3 - Compreendem a estrutura de categorias, destaques e informações complementares?
✅ Validado
A navegação foi bem compreendida pela maioria dos usuários, exigindo apenas ajustes pontuais no posicionamento de elementos.
• Os usuários encontraram facilmente as categorias e entenderam o propósito dos filtros.
• Conseguiram acessar as informações detalhadas do prato, como alérgenos, país de origem, quantidade de curtidas.
• Entenderam que diferentes visualizações (lista, feed, tela cheia) oferecem formas complementares de explorar o cardápio.
• Alguns usuários sugeriram mais clareza na seleção de variações e complementos, por exemplo:
- Como escolher o tamanho da porção antes de adicionar ao pedido?
- Como visualizar a diferença de preço entre as opções.
Hipótese nº 2
O novo cardápio digital motiva o usuário a explorar, interagir e descobrir novos pratos com facilidade.
1 - O design estimula a curiosidade e o desejo de navegação?
2 - Os usuários percebem valor nos elementos visuais (curtidas, destaques, imagens)?
3 - A interface favorece o engajamento e reduz barreiras de descoberta?
✅ Validado
Os testes indicaram aumento no tempo de navegação e maior interesse em explorar o cardápio.
• Elementos como curtidas, carrossel de imagens e destaque de pratos populares chamaram a atenção e incentivaram a interação.
• Os filtros e visualizações alternativas facilitaram a descoberta de novos produtos.
• Informações visuais bem organizadas tornaram a experiência mais fluida e prazerosa.
• Usuários sentiram-se mais confiantes em escolher pratos, especialmente quando o cardápio fornecia feedbacks visuais e sociais (ex: número de curtidas).
UI Design final - Aprovado
Após um processo colaborativo de descobertas, validações e iterações, chegamos à versão final do design. O novo cardápio digital foi aprovado por todos, refletindo as principais necessidades dos usuários e os objetivos estratégicos do negócio. Para isso, utilizei princípios de design e vieses cognitivos que deram suporte às decisões tomadas durante o processo.
Destaco as principais abordagens-chave que guiaram os layouts:
• Lei de Hick:
Reduzi as opções visíveis ao essencial para facilitar a tomada de decisão.
• Efeito Von Restorff, espaçamento em branco e hierarquia visual:
Estruturei os elementos para conduzir naturalmente o olhar do usuário por meio da ordem, posição e contraste.
• Carga Cognitiva:
Simplifiquei tarefas e informações para preservar o esforço mental do usuário e tornar a experiência mais fluida.
