top of page
SOBRE O PROJETO
Da Fragmentação à Coesão
Em maio de 2024, o time de design da Agilean enfrentava um problema crescente: cada produto tinha sua própria "personalidade" visual. Botões que não se pareciam. Cores que variavam. Componentes recriados do zero a cada sprint. O crescimento acelerado da empresa (de 1 para múltiplos produtos em 5 anos) havia acontecido sem uma fundação de design estruturada.
Sob a liderança de Ulisses Sousa (designer sênior), trabalhei junto com Marcos Erick na estruturação do primeiro Design System da empresa. Durante 6 meses, criamos uma biblioteca de componentes baseada em Material Design 3 e Atomic Design. Minha contribuição específica foi criar a tabela de correspondências entre Atomic Design e MD3, além de participar ativamente da definição da metodologia, da criação dos componentes e da definição de uma nova estrutura de arquivos dentro do Figma.
Este case documenta o processo completo: desde a pesquisa e escolha de metodologia, até a construção dos componentes. Um design system é um organismo vivo, e este continua evoluindo até hoje.
FUNÇÃO
UI/UX Designer Pleno
CLIENTE
DATA
Mai a Nov 2024
(PROJETO CONTÍNUO)
FERRAMENTAS E MÉTODOS
Figma
Material Design 3
Atomic Design
Design Tokens
Figma DevMode
Crescimento sem fundação
01 | O DESAFIO
Imagine alternar entre três sistemas diferentes da mesma empresa, cada um com uma interface completamente diferente. Botões que não se parecem. Cores que não conversam. Interações que você precisa reaprender a cada produto.
A RAIZ DO PROBLEMA
A Agilean cresceu rápido demais. Em 5 anos, saltou de 1 produto para múltiplos:
✓ Agilean Portal (resultados)
✓ Agilean Admin (administração)
✓ Agilean Planner (planejamento)
✓ QuizQuality (controle de qualidade)
E vem mais por aí...
Entretanto, cresceu sem fundação. Sem tempo para construir as bases certas. Sem um norte visual. Sem um sistema de design.
OS 3 PROBLEMAS PRINCIPAIS
Tendo em vista essa causa raíz, nós elencamos três problemas principais a serem resolvidos
🎨
Escalabilidade limitada
-
Mesmos componentes com variações diferentes
-
Cores inconsistentes entre produtos
-
Tipografia e espaçamentos variados
-
Componentes duplicados e confusos
📚
Retrabalho constante
-
Designers criando do zero a cada feature
-
Devs sem documentação de estilos
-
Pouco reaproveitamento de código
-
Bugs de inconsistência se multiplicando
⚙️
Escalabilidade limitada
-
Cada novo produto herdava problemas
-
Impossível manter consistência manual
-
Onboarding de designers era caótico
-
Dificuldade para inovar rapidamente
DESAFIO DE DESIGN
Como criar um design system escalável e customizado que unifique a experiência dos produtos Agilean; reduza o retrabalho de designers e desenvolvedores; e facilite a inovação rápida, sem comprometer a identidade visual da marca?
02 | NOSSA ABORDAGEM
Estruturação colaborativa
Sob a liderança de Ulisses Sousa, trabalhamos em trio para estruturar o design system. Cada um trouxe contribuições específicas, mas todos participamos ativamente da definição da metodologia e criação dos componentes.
Ao longo de 6 meses, o projeto evoluiu por estas fases:
1
🔎
2
🎯
3
⚒️
Pesquisa e Benchmarking
Descobrir padrões de mercado
Estratégia e Fundação
Criar tabela Atomic-MD3
Construção
Criar componentes no Figma
03 | PESQUISA
Aprendendo com os Melhores
Antes de construir do zero, estudamos os design systems mais consolidados do mercado. A pergunta era: podemos usar algo pronto ou precisamos criar o nosso próprio?
Comparação visual da mesma tela de cadastro aplicada em três design systems diferentes: Spectrum (Adobe), Material Design 3 (Google) e Carbon Design System (IBM)
BENCHMARKING DE DESIGN SYSTEMS
Analisamos 3 design systems de empresas referências para identificar pontos fortes e fracos de cada uma delas
Spectrum
Robusto e completo, mas com curva de aprendizado mais alta e menos flexibilidade para customização.
Material Design 3
Documentação extremamente completa, comunidade massiva no Figma, e alta adaptabilidade via sistema de tokens.
Carbon
Sólido e bem documentado, mas com identidade visual muito atrelada à IBM, dificultando personalização de marca.
A escolha recaiu sobre Material Design 3. As principais características que definiram a escolha foram:
✓ Documentação extremamente detalhada e completa
✓ Consistência visual entre plataformas
✓ Alta adaptabilidade através de sistema de tokens
✓ Suporte robusto e comunidade ativa no Figma
Como escolhemos o Material Design 3, poderíamos simplesmente importar os componentes prontos da comunidade Figma, o que aceleraria o projeto significativamente. Entretanto, isso resultaria em interfaces genéricas, visualmente rígidas e completamente desalinhadas com a identidade Agilean.
NOSSA ESCOLHA
Usar MD3 como estrutura e metodologia, mas construir nossa própria biblioteca customizada.
Isso significa: paletas de cores próprias, tipografia adaptada, iconografia exclusiva, dentre outros elementos; mantendo a arquitetura sólida e documentação do Material Design 3 como base.
STAKEHOLDERS DO DESIGN SYSTEM
Criar componentes tecnicamente perfeitos não garante um design system bem-sucedido. A verdadeira medida de sucesso está em quão bem o sistema atende as pessoas que dependem dele. Mapeamos três grupos de stakeholders cujas necessidades guiaram nossas decisões de design:
👷🏻
Usuários Finais
-
Interface consistente entre produtos
-
Navegação previsível
-
Acessibilidade
👩🏻🎨
Designers
-
Biblioteca Figma organizada
-
Documentação clara de uso
-
Componentes reutilizáveis
-
Exemplos de composição
👨💻
Desenvolvedores
-
Tokens bem estruturados
-
Especificações técnicas claras e documentadas
-
Componentes com seus estados e variações
-
Conexão com devmode e MCP no figma
04 | ESTRATÉGIA
Atomic Design + Material Design 3
Após semanas criando componentes isoladamente, percebemos um problema crítico: faltava hierarquia. A solução veio ao adotar o Atomic Design como metodologia estrutural.
📌 Consulte a tabela com as correspondências do Atomic Design no Google Planilhas! Clique aqui.
Estávamos criando componentes sem estrutura clara. Cada designer trabalhava em partes específicas do projeto: Ulisses nas cores, eu nos botões, Erick nos cards, por exemplo.
O PROBLEMA
Quando precisávamos criar um card complexo, recriávamos tudo do zero: título, botões, ícones, avatares. Mas todos esses elementos já existiam separadamente! Ou seja, embora seguíssemos as diretrizes do Material Design 3, os componentes estavam sendo criados isoladamente, sem considerar pequenas unidades reutilizáveis. Isso estava resultando em inconsistências visuais, dificuldade de escalabilidade e problemas de manutenção.
A SOLUÇÃO
Adotar Atomic Design (Brad Frost) para criar hierarquia: Átomos → Moléculas → Organismos → Templates → Páginas
Os cinco níveis do Atomic Design: uma abordagem modular para a construção de interfaces, do sistema ao produto final (clique na imagem para expandir)
ANTES
Estávamos criando componentes sem hierarquia. Ao criarmos cards, por exemplo, recriávamos botões, avatares, textos com a formatação que queríamos, ao invés de reaproveitá-los
DEPOIS
Ao criarmos cards (organismo), por exemplo, inserimos o componente que já criamos de Avatar (átomo), o texto formatado (átomo) e um botão (molécula). Ao criar os elementos com essa estruturação, caso alterássemos algo no componente principal de avatar, ele seria atualizado em todas as suas instâncias
05 | CONSTRUINDO O SISTEMA
Do Abstrato ao Concreto
Com a metodologia definida, partimos para a construção prática. Seguindo Atomic Design, começamos pelos átomos (tokens, cores, tipografia) e evoluímos para organismos complexos. Após 6 meses de trabalho, entregamos uma biblioteca inicial com componentes documentados e prontos para implementação.
Por ser um organismo vivo, o design system continuará a ser atualizado com o passar dos anos. Componentes serão atualizados, documentações melhoradas e testes serão realizados com os stakeholders mapeados para entender como é possível melhorar cada vez mais e atender mais assertivamente às suas necessidades.
Nas imagens a seguir, é possível observar algumas telas dos produtos que já estão seguindo o novo design system:
bottom of page