Um design system que unificou três equipes de produto
A StackFlow tinha três equipes de produto entregando features com padrões de UI diferentes. Construímos um design system unificado que trouxe consistência sem desacelerar ninguém.
redução em inconsistências de UI
mais agilidade na entrega de features
componentes principais cobrindo 83% dos padrões
menos gargalos em revisões de design
equipes usando um único sistema
01 / O Problema
A plataforma de ferramentas para desenvolvedores da StackFlow cresceu por meio de aquisições. Três equipes de produto usavam bibliotecas de componentes, tokens de design e padrões de interação diferentes. Os usuários perceberam — tickets de suporte sobre 'UI confusa' eram a terceira categoria mais comum. As revisões de design se tornaram gargalos porque não havia linguagem compartilhada entre as equipes.
02 / Nossa Abordagem
Auditamos os três produtos, catalogamos cada variante de componente e identificamos o princípio 80/20: 24 componentes principais cobriam 83% dos padrões de interface em todos os produtos. Desenhamos uma arquitetura de tokens capaz de acomodar a expressão de marca de cada produto enquanto impunha consistência no nível de interação.
03 / A Solução
Entregamos uma biblioteca de componentes React publicada como pacote npm, uma biblioteca de componentes no Figma com paridade 1:1 e um site de documentação no Storybook que serviu como fonte única da verdade. O framework de governança incluiu diretrizes de contribuição, uma estratégia de versionamento e revisões trimestrais de adoção. Conduzimos sessões de onboarding com as três equipes e fornecemos 8 semanas de suporte integrado.
Stack de Tecnologia
“Pela primeira vez, nossas três equipes de produto entregam features que parecem pertencer à mesma plataforma. O sistema se pagou no primeiro trimestre.”
Qual é o próximo passo
Pronto para construir algo assim?
Todo projeto começa com uma conversa. Agende uma call de discovery e vamos explorar como podemos ajudar.