Donut Design System

Resumo

Na Squadfy, cada projeto era uma ilha, com biblioteca de componentes e desenvolvimento próprios. Liderei pelo design, com o Davilson de Casto, a criação do Donut: uma biblioteca única e brandless para marcas com estilos, cores e tipografias diferentes. Em dois anos, com duas pessoas, a prototipação ficou 50% mais rápida, o handoff teve 30% menos ruído e a consistência entre design e produção chegou a quase 100%.

O problema

Na Squadfy, cada projeto era uma ilha isolada. Biblioteca de componentes, desenvolvimento e outras questões do tipo eram resolvidos dentro de cada projeto, sem um método comum entre eles.

Meu papel e o time

Liderei o projeto pelo design. Ao meu lado, o Davilson de Casto, Tech Manager da Squadfy, atuou como tech lead e foi meu braço direito. Um profissional brilhante. Éramos duas pessoas, trabalhando em ciclos de entrega, sem dedicação exclusiva ao projeto, ao longo de dois anos. Entregamos valor já nos primeiros ciclos.

A primeira opção que consideramos foi um design system para cada marca. Descartamos porque a escala inviabilizaria a manutenção, e a manutenção da biblioteca era justamente o problema que tínhamos antes. Seria trocar um problema pelo mesmo problema. Decidimos então criar uma biblioteca única e brandless, que funcionasse para várias marcas com estilos, cores e tipografias diferentes e unificasse o método de design e desenvolvimento da empresa inteira.

Nessa decisão pensamos na engenharia tradicional, aquela que constrói casas e prédios. A engenharia é a responsável por contruir da base sólida de uma construção. Nessa parte estrutural, o Donut fez esse papel. Os designers dos times entraram com a arquitetura, decorando o ambiente conforme a necessidade de cada projeto. Card, modal, drawer e shell estão entre os componentes estruturais.

Em cada um deles, a parte estrutural guarda o que dá identidade à marca: bordas, cores, interações, border radius e as demais definições de estilo. O conteúdo fica em um slot (no código, o children), e o designer o adapta ao projeto. Isso evitou centenas de variações de um mesmo componente para atender demandas diferentes.

Resultado

Medimos o trabalho antes e depois do Donut. A prototipação de UX ficou 50% mais rápida, o handoff teve 30% menos ruído entre design e desenvolvimento e a consistência entre o design e a tela em produção chegou a quase 100%.

Hoje o Donut sustenta todos os produtos digitais da Heineken. Eles vão de sites a sistemas que apoiam a operação dos times de marketing, trade marketing, agentes de campo e demais pessoas da Heineken, e alcançam bares e consumidores finais. Também sustenta produtos internos da Squadfy como B.codes, FluxRPA e Tradeflow, entre outros.

Aprendizado

A parte mais complicada foi o rollout para as marcas. Levar o Donut até elas exigiu analisar os sistemas legados, planejar a adaptação, montar um roadmap e negociar prazos. Cada sistema legado trazia decisões de código e de design anteriores ao Donut, e o plano de adaptação precisava caber nos prazos de cada produto. Esse trabalho nos ensinou a ser estratégicos na implementação de uma solução.

Também aprendi muito mais sobre como a estrutura de código funciona. Passei a enxergar um componente e uma biblioteca em duas camadas: a visual e a técnica, que inclui como tudo roda por baixo dos panos.