Design systems em contextos diferentes
Manter um design system em escala e adaptar uma base pronta com pouco tempo pedem estratégias diferentes. Saber escolher é parte do trabalho.
- Design Systems
- Design Tokens
- Governança
- Acessibilidade
- Design Engineering
- Papel
- Product Designer e Design Engineer (TOTVS) · Head de Produto (Conciex)
- Empresas
- TOTVS · BCR.CX / Conciex
- Período
- 2022 a 2026
- design systems, em contextos opostos
- 2
- designers da TOTVS usando o Animalia Copilot
- ~50 de 120
- desenvolvedores em 5 squads usando o DS da Conciex
- ~30
O melhor design system é o que a organização consegue adotar e sustentar, não necessariamente o que foi construído do zero.
Comparação
| Animalia · TOTVS | Conciex · BCR.CX | |
|---|---|---|
| Ponto de partida | DS maduro, open source, multimarca | Produtos sem padrão, ritmo de startup |
| Estratégia | Manter, governar e evoluir | Adotar uma base pronta, adaptar à marca e evoluir |
| Meu papel | Designer e design engineer no time do DS | Head de Produto, liderando a decisão e a implantação |
| Escala | Todos os produtos da TOTVS | 6+ produtos, 5 squads, ~30 devs |
Animalia · TOTVS
- Ponto de partida
- DS maduro, open source, multimarca
- Estratégia
- Manter, governar e evoluir
- Meu papel
- Designer e design engineer no time do DS
- Escala
- Todos os produtos da TOTVS
Conciex · BCR.CX
- Ponto de partida
- Produtos sem padrão, ritmo de startup
- Estratégia
- Adotar uma base pronta, adaptar à marca e evoluir
- Meu papel
- Head de Produto, liderando a decisão e a implantação
- Escala
- 6+ produtos, 5 squads, ~30 devs
01
Animalia: manter e evoluir um DS em escala
O Animalia é o design system open source da TOTVS, usado em todos os produtos da empresa e com várias marcas. O desafio não era criar, era manter a consistência sem depender de cada designer conhecer todas as regras.
O Animalia foi construído por um time maior, com um especialista dedicado ao design system. Durante o tempo em que estive lá, fui a designer mais dedicada ao DS depois dele. Veja o case completo do Animalia (abre em nova aba)
Criação de componentes, do inventário ao handoff
Participei de todo o processo de criação de componentes: inventários, descobertas, documentação, propostas visuais e handoffs.
Acessibilidade nos handoffs
Passei a incluir diretrizes de acessibilidade nos handoffs, como ARIA labels e navegação por teclado, que muitos designers ainda não dominavam. O conteúdo ia direto para os times que mantinham a biblioteca interna PO-UI.
Design e código no mesmo lugar
Criei componentes e dei manutenção no repositório de web components do Animalia, o que me ajudava a encontrar diferenças entre o comportamento desenhado e o implementado.
- Documentação (abre em nova aba)doc.animaliads.io
- Repositório (abre em nova aba)github.com/
animaliads - Pacotes no npm (abre em nova aba)npmjs.com/
~animaliads-team
O portal como produto
Redesenhei a home do portal de documentação com base em dados de comportamento do Hotjar, reorganizando o conteúdo por contexto de uso. Também passei a fazer os ajustes do site, que antes dependiam de desenvolvedores de outras áreas.
Evidência
O mapa de calor mostrava visitantes clicando em imagens e áreas que não eram clicáveis. Uma das principais correções do redesign foi deixar claro o que era clicável e o que não era.
Validação
Antes de publicar, testamos a proposta da nova home com designers e desenvolvedores, usando tarefas de navegação. Todos os participantes concluíram as tarefas na primeira tentativa. Depois, avaliaram a proposta com nota média de 8,1 de 10, sem nenhum detrator.
- concluíram as tarefas na primeira tentativa
- 9 de 9
- nota média da proposta, sem nenhum detrator
- 8,1
Animalia Copilot
Criei um plugin para Figma que automatiza a auditoria de tokens: de ~30 minutos para ~5 segundos por tela, usado por ~50 dos 120 designers da TOTVS.
Project Júpiter
Também apoiei o Project Júpiter, o maior projeto de design da TOTVS na época, que buscava padronizar o design dos três maiores produtos da empresa: Protheus, RM e Datasul.
02
Conciex: adaptar uma base pronta com pouco tempo
Contexto
Os produtos da Conciex não tinham padrão visual nem uma área de design estruturada, e a empresa andava em ritmo de startup. Construir um DS próprio levaria meses que a empresa não tinha.
Decisão
Avaliei o tempo até gerar impacto, a capacidade do time de manter uma biblioteca própria e o fato de a maioria dos produtos rodar no ecossistema Zendesk. Escolhi o Zendesk Garden, um design system open source, como base. A liderança aprovou ainda no meu primeiro mês.
- 1º mêsAdotarO Garden virou a base e o foco foi fazer os times usarem. Redesenhei telas existentes para tornar a proposta concreta.
- Depois da nova marca, ~2 a 3 mesesAdaptarUm designer gráfico refez a identidade visual da Conciex, e eu traduzi a marca para o produto por meio de tokens aplicados aos componentes, sem reconstruí-los, em paralelo às outras demandas.
- Desde entãoEvoluirNecessidades observadas nos produtos guiam uma evolução mais própria, aos poucos.
Adoção
A maior resistência veio dos times mais iniciantes, que tinham receio da biblioteca, da tecnologia nova e da padronização. Adaptei a abordagem ao nível de cada time, com educação, reuniões e demonstrações práticas. A maioria passou a usar o DS, e o ganho percebido foi mais agilidade nas entregas e uma experiência mais consistente para os clientes.
Um time continuou trabalhando sem o DS, e minha autoridade cobria só o meu time. Aprendi que definir um padrão não garante adoção.
- squads adotaram o DS
- 4 de 5
- componentes na base compartilhada
- ~28
- produtos no ecossistema
- 6+
Bastidor
O primeiro produto a nascer com a cara da marca foi o Conciex Messaging.
O que levo de um design system para o outro
Design system é produto.
No Animalia, documentação, portal e ferramentas precisavam de tanto cuidado quanto os componentes.
Consistência é um argumento estratégico antes de ser estético.
Na Conciex, a liderança aprovou quando o argumento foi reduzir erros e acelerar entregas.
Adoção depende de comunicação, governança e influência, não só de componentes.
Vale para um DS em escala e para um que está nascendo.