Com tantos lançamentos de features e novas iniciativas e um time de design ainda em estágios iniciais de maturidade, recebi o desafio de integrar tudo isso em uma identidade só, mas que pudesse fluturar entre novas oportunidades, temas e novos produtos paralelos da empresa.

Foi ai que surgiu o Uni(DS), nosso DS Multimarca. Adaptável para novas marcas e consistente para o ecossistema raíz da empresa.

Iniciei o processo de construção mapeando todos os produtos principais da empresa e suas ramificações, quais outros produtos estavam surgindo e quais poderiam ser futuramente sustentados pelo design system?

Todo o processo de planejamento foi dividido em estapas, para contornar problemas de priorização das tarefas relacionadas ao DS. Nosso modelo de trabalho foi e é até hoje híbrido, equilibrando demandas das squads com o nascimento e evolução do DS.

Uma etapa fundamental, foi a definição da hierarquia de tokens. Inicialmente, visávamos uma estrutura simples de tokens, mas ao iniciar a implementação, tivemos que pivotar e pensar em estratégias de longo prazo que sustentassem mudanças e temas e o principal, múltiplos produtos.

Hierarquia de tokens

Dividimos os tokens do DS em Tokens Primitivos e Tokens de Marca, seguindo uma cascata de tokenização. A princípio, está funcionando, mas já percebemos que ainda precisaremos trazer mais robustez. Mas o pulo do gato está nos tokens de marca e nos “schemes” que montamos para adaptar as variáveis para cada marca.

Iniciamos a montagem dos schemes a partir das cores, com as seguintes paletas:

• Paleta primitiva: onde contém todas as cores globais. Valores primitivos que não são usados diretamente no código. É necessário fazer tokenização para usar as cores.
• Schemes
  • Base
  • CTA
  • Action
  • Warning
  • Success
  • Info
  • Danger
  • Text

Ainda dentro de cada Scheme, temos algumas categorias de variáveis que são padronizadas para suprir a demanda de todas as marcas, mudando somente o tema.

No final de tudo, priorizamos:

• Ter cores 100% acessíveis
• Ter um DS 100% padronizado independente do tema e da marca, todos os produtos usam os schemes, mas cada scheme segue um brand kit com variáveis primitivas sendo referenciadas dentro dos schemes.
• Possibilitar usar cores com propósito: para garantir consistência e escalabilidade de tantos produtos, cada cor tem sua semântica e seu propósito bem definido.

---

Próximos passos:

• Definição de Tokens de componentes, parte fundamental para adapatar a particularidades de cada marca que usa o DS;
• Expansão para novos produtos
• Aumentar percentual de adoção dos produtos do ecossistema raíz.
• Metrificar todos os componentes para melhorar as estratégias do time de Growth que eu também faço parte.

---

Nosso problema principal estava voltado para o design fragmentado e falta de consistência, que as poucos estamos resolvendo. Mas desejamos ampliar o Design System para apoiar também as estratégias de Growth que precisam de um Time to market acelerado. As métricas que estamos acompanhando no momento são taxa de Adoção e Lead Time de tech. Mas futuramente desejamos adicionar métricas para mapear de fato como o DS se comporta a nível de conversão. Ansiosa por este desafio!