Escalando design mobile no Magalu via design system
Sistema mobile nativo para iOS e Android: foundations, componentes e processos de governança sem precisar parar o produto.
Ano
2020-2024
Plataforma
iOS/Android
Papel
Design lead
Conceito usado para direção visual do sistema
Principais achados do discovery
Começamos ouvindo times e colocando uma lupa na entrega de UX. O que parecia “variação" virou um diagnóstico claro: inconsistência, dívida de documentação e problemas no handoff. Rodamos um piloto para mapear o aumento de eficiência em desenvolvimento que estava em jogo.
- Mesmo componente com variações entre squads
- Guidelines de UX com visões distintas dentro do mesmo produto
- Retrabalho constante no handoff entre design e engenharia
- Experiência mobile devendo em consistência e escala
- Componente piloto mostrou economia de 95% em linhas de código
Frentes de trabalho
Adotamos um princípio simples: introduzir o design system sem gerar entropia. Trabalhando lado a lado com os squads, ouvimos continuamente e priorizamos o backlog pelo uso real do dia a dia.
- Governança: rituais, intake e alinhamento com stakeholders
- Cocriação: workshops com designers e devs
- Foundations: tokens e padrões (tipografia, cores, espaçamento)
- Componentes: biblioteca e documentação no Figma
- Adoção: métricas de qualidade, cobertura e uso
Impacto
100% de adoção em novos projetos
Todas as squads de desenvolvimento mobile do e-commerce aderiram ao novo design system e estão contribuindo com a evolução do sistema.
Instituicionalização do design system
Um time permanente foi criado para manter e evoluir o design system, garantindo treinamento e onboarding para usuários do sistema.
Acessibilidade
A cobertura de acessibilidade melhorou, o design system passou a garantir conformidade com a WCAG 2.1 AA.
Linguagem Cross-platform
As bibliotecas iOS e Android foram construídas juntas, idênticas em visual e features, reduziram inconsistências entre plataformas.