Mapear
Revisitar os fluxos e inventariar divergências da interface.
← Voltar aos projetosDesrotulando
DESROTULANDO / MOBILE APP / UI & COMPONENTS
Desrotulando
Informação mais clara.
Uma experiência consistente.
Uma nova proposta visual para o Desrotulando, conectando inventário de interface, componentes reutilizáveis e evolução das telas de consulta e comparação de produtos.
Atuação
Product Design · UI e facelift de aplicativo
Escopo
Inventário de UI, jornadas, wireframes, componentes e interfaces
Produto
Desrotulando · aplicativo de consulta de produtos alimentícios
01 / Desafio
Evoluir a interface.
Criar uma linguagem comum.
O Desrotulando tem como proposta apoiar seus usuários na consulta de produtos no supermercado. O desafio deste projeto foi padronizar componentes e realizar um facelift do aplicativo, revisitando os fluxos e as divergências de UI antes de propor uma nova direção visual.
Como transformar telas com padrões diferentes em uma experiência visualmente coerente e preparada para evoluir?
Padronizar
Criar componentes reutilizáveis para futuras telas.
Evoluir
Conectar o inventário e as conversas com usuários e stakeholders à proposta visual.
02 / Inventário
Antes de redesenhar,
entender o que já existia.
O inventário reuniu as telas do aplicativo anterior para mapear diferenças de apresentação ao longo das jornadas. Essa visão do conjunto ajudou a tratar o facelift como um sistema, e não como uma sequência de telas isoladas.
03 / Estrutura
Uma estrutura antes
do acabamento visual.
Após o inventário e o alinhamento com stakeholders e usuários, a criação avançou para wireframes de baixa fidelidade. O fluxo organizou o caminho entre entrada, acesso e experiência principal; o detalhamento visual veio depois da aprovação dessa estrutura.
04 / Interface
Do wireframe aprovado
ao detalhe da interação.
A proposta em alta fidelidade conecta Home, busca, detalhe do produto e comparação por scan. O padrão de navegação e a apresentação dos produtos se repetem entre contextos, preservando o reconhecimento de ações e informações.
01 / Home
Uma entrada organizada para explorar.
Sugestões, recomendação e produtos populares compartilham uma linguagem de cards. O perfil ativo permanece visível e o scan ocupa uma posição central na navegação.
02 / Produto
Da visão geral ao detalhe.
Imagem, nota, tags e informações aparecem em níveis de leitura. Abas separam avaliação, alternativas e comentários, enquanto o detalhe organiza os itens de informação.
03 / Pesquisa
Encontrar sem recomeçar a cada busca.
Campo de pesquisa, categorias, buscas recentes e recomendações se encontram na mesma experiência. A linguagem dos produtos acompanha os outros pontos de contato.
04 / Comparação por scan
Comparar dentro do mesmo contexto.
Os itens escaneados aparecem em uma lista com imagem, identificação e acesso ao detalhe. A ação de continuar escaneando mantém a continuidade da tarefa.
05 / DESIGN SYSTEM
Um sistema para dar
consistência às escolhas.
Uma síntese do sistema de interface: fundamentos claros, informação organizada e componentes que se adaptam a diferentes contextos do aplicativo.
Síntese visual redesenhada para este case, a partir do guia original. Exemplos de interface e dados ilustrativos.
Desrotulando UI SYSTEMFOUNDATIONS → COMPONENTS → EXPERIENCE
DESIGN LANGUAGE / 01
Clareza em cada detalhe.
Uma linguagem comum, da descoberta ao produto.
Aa↗
Escolhas com contexto.
Títulos orientam. Texto explica. Ações mostram o próximo passo.
Display / 40Body / 16Label / 12
Ação#1A75C8
Positivo#60B106
Atenção#F5A623
Alerta#E12340
Texto#222B45
Superfície#F5F7F9
03 / Ritmo & espaçamento
Uma base de 8 pontos conecta composição, respiro e alinhamento.
8
16
24
32
48
64
04 / ComponentesUm produto.
Um produto.
Diferentes contextos.
Imagem, identificação e indicadores mantêm a mesma ordem de leitura em cards de descoberta e listas de comparação.
Sugestões para vocêCard / Vertical
Cereais & grãos
Granola integral
84/100Exemplo
Bebidas
Bebida vegetal
72/100Exemplo
Card / Horizontal
Cereais & grãos
Granola integral
84/100Exemplo
Bebidas
Bebida vegetal
72/100Exemplo
✓ SelecionadoCategoriaInformação
✓
Ação concluída
Produto adicionado à sua seleção.
Informação que se reconhece.
Cor e rótulo trabalham juntos para organizar status e indicadores. A hierarquia permanece reconhecível em cada componente.
Exemplo de apresentação dos indicadores do app. Valores de demonstração.07 / O sistema em usoDa regra ao componente.
Da regra ao componente.
Do componente à experiência.
Os mesmos tokens aparecem na tipografia, nos espaçamentos, nos controles e na estrutura dos cards. A consistência se torna visível na tela inteira.
- 01Imagem do produto
- 02Identificação e contexto
- 03Indicador com rótulo
- 04Ação consistente
9:41▰ ▮
D.Desrotulando2 itens de exemploED
Sua seleção
Cereais & grãos
Granola integral
84/100Exemplo
Bebidas
Bebida vegetal
72/100Exemplo
⌂Início⌕Pesquisa⊞Scan♡Salvos○Conta
06 / Síntese
Uma evolução do conjunto.
Não apenas da aparência.
O resultado apresentado é uma proposta de facelift com componentes e padrões documentados. A narrativa do projeto vai do inventário à alta fidelidade, mostrando como uma base comum pode orientar diferentes jornadas do aplicativo.
Explorar o case Scoobi ↗Consistência também é uma decisão de produto.
Repetir padrões de forma intencional ajuda a conectar descoberta, consulta e comparação. O trabalho de UI ganha continuidade quando cada tela deriva de uma linguagem comum.
VAMOS CONVERSAR
Vamos dar clareza
ao seu próximo produto?
Me conte um pouco sobre o seu projeto. Vou receber sua mensagem por e-mail para continuarmos a conversa.
Prefere outro caminho?LinkedIn ↗