Projeto de Produto Digital
Estágio Acadêmico - Hi Pizza: Design System que cortou 30% do retrabalho
Projeto desenvolvido durante estágio acadêmico. O Design System padronizou componentes e reduziu em 30% o retrabalho.
Voltar aos projetos
Visão Geral
Contexto e Desafio do Projeto:
- Como estruturar um sistema interno de pedidos do zero, com uma equipe de estagiários sem experiência em design? Esse foi o desafio da Hi Pizza — e a solução veio com um Design System que reduziu retrabalho em 30%.
Meu papel:
- UX/UI Designer
- Pesquisa
- Arquitetura da informação
- Protótipo de alta fidelidade
- Design system
Ferramentas:
- Figma
- Trello
- Scrum
- Proto Persona
- Design System
Problema
Falta de estrutura de design na equipe:
A equipe de desenvolvimento era composta por estagiários de programação sem base em design. Sem hierarquia visual definida, cores padronizadas ou fluxos de navegação mapeados, o time ficava perdido — e o código avançava sem direção clara."
Solução
O que eu propus?
- Em vez de entregar telas soltas, propus mapear a jornada completa do sistema em um User Flow. Assim, o time entenderia o caminho inteiro antes de codificar — e não apenas uma tela por vez.
Como funciona?
- Estruturei o fluxo em 5 fases — Autenticação, Dashboard, Gestão de Pedidos, Adicionar Pizza e Ajuda. Em cada fase, documentei as ações do usuário, os pontos de decisão e os estados de erro. O resultado é um mapa que serve de guia para qualquer programador, em qualquer linguagem.
Como virou design?
- Decisões voltadas a eliminar retrabalho, garantir consistência e dar autonomia ao time — em qualquer linguagem de programação.
UX Research
O estagiário sem referência visual
- Antes de desenhar qualquer tela, criei uma Proto Persona do estagiário de programação para entender por que o time não conseguia manter consistência visual. A pesquisa revelou que a maior dor não era técnica, mas de referência: sem hierarquia visual definida nem componentes padronizados, cada tela se tornava uma decisão do zero.
- Esse insight redirecionou toda a estratégia do projeto. Em vez de focar apenas na estética das telas, passei a priorizar a criação de um sistema coeso, documentado e fácil de replicar.
Design
Design System: o padrão que deu autonomia ao time
- Depois de mapear o fluxo, construí um Design System com componentes reutilizáveis e regras documentadas no Figma. Assim, o time deixou de recriar botões, cores e espaçamentos a cada tela — passou a montar interfaces por conta própria, seguindo um padrão único.
- O impacto foi direto: menos idas e voltas, mais consistência visual e um design que deixou de ser dependência para se tornar base de trabalho.
Prototipação de Alta Fidelidade e Design System:
Desenvolvimento de todas as telas de interface (Login, Dashboard, Cadastro, Gestão de Pedidos e Configurações) com aplicação da tipografia Outfit, paleta cromática e componentes reutilizáveis.
Gif de prototipação das telas.
Desenvolvimento
- Entreguei uma documentação visual completa, com fluxos, componentes e regras de uso. Isso permitiu que o time de desenvolvimento codificasse com mais autonomia, menos dúvidas e muito mais alinhamento com o design.
No items found.
