Reduzindo o time-to-market em 80% com um design system
Direct response de nutracêuticos nos EUA: o problema era escala e replicação. Uma biblioteca dinâmica de componentes por nicho, com o time de dev e o de CRO, levou o time-to-market de 14 dias pra menos de 3.
Confidencial por NDA — nomes e telas do produto ficam de fora.
Tokens, tipografia e blocos — a matéria do sistema, sem o produto.
Escopo do projeto
Projeto conduzido junto com o time de desenvolvimento pra uma empresa de direct response de nutracêuticos nos Estados Unidos, com mais de 200 ofertas ativas. O problema era escala e replicação: o direct response trabalha com testes A/B, otimização, copy agressiva em ofertas white e gray com VSL — mas isso não se sustenta sozinho e limita criar oferta nova ou otimizar o que já existe. Cada página levava 14 dias.
Com o time de desenvolvimento e o time de CRO dedicado, desenhamos um design system: uma biblioteca dinâmica de componentes. Cada nicho passou a ter dezenas de layouts possíveis com seções dinâmicas e temas de cor, com copies já validadas pelo time de copy e seções mapeadas no Storybook — moderado pelo time de design e por uma squad dedicada de dev. O protótipo sai 90% pronto: falta só a revisão do copy, as finalizações de dev e os ganchos de teste A/B.
Papel
Product Designer & Design Lead
Auditoria das top 20 ofertas, entrevistas com engenharia, mapeamento de atributos, arquitetura de tokens e componentização espelhada — e a liderança do time de design durante a parada. Dois meses, sob NDA.
Desafios
O gargalo da escala manual:
-
01
14 dias por página
Design + dev num catálogo de 200 produtos: janelas de mercado perdidas
-
02
O problema era o handoff
Blocos HTML fáceis de montar um a um, impossíveis de gerenciar em escala
-
03
Inconsistência e retrabalho
Sem padrão, engenharia escrevia código redundante e difícil de manter
-
04
Múltiplas identidades
Nichos diferentes de suplemento pedem “vibes” visuais diferentes
-
05
Time no limite
Capacity moderado só mantendo a demanda recorrente
-
06
Teto de crescimento = velocidade do time
O argumento que levei aos stakeholders
Soluções
-
01
Auditoria das top 20
Distrinchei os layouts que mais faturavam e achei os padrões que se repetiam
-
02
Arquitetura de tokens por nicho
Cor, tipografia e assets separados: trocar a identidade de uma página inteira em minutos
-
03
Componentes espelhados
Figma e código com os mesmos blocos — 80% das dúvidas de handoff sumiram
-
04
Liberdade pra testes A/B
Variações de layouts vencedores aplicadas a nichos menos performantes, de forma sistêmica
-
05
Sprints de laboratório
Com o tempo liberado, o time passou a rodar experimentos contínuos com métrica real
-
06
ROI de produtividade como argumento
Foi assim que a parada estratégica foi vendida
A biblioteca: tokens, componentes e temas por nicho
O que os dez dias compravam
Levar duas semanas pra produzir uma página — design e dev — num catálogo de 200 produtos significava perder janelas de oportunidade de mercado. O problema não era falta de braço, era a passagem de bastão: a estrutura de blocos HTML era fácil de montar individualmente e impossível de gerenciar em escala sem gerar inconsistência e retrabalho técnico. Com o sistema, o tempo caiu pra menos de 3 dias por página. Os componentes espelhados entre Figma e código eliminaram 80% das dúvidas de handoff.
Micro vitórias de UX
Auditoria das top 20
Distrinchei os layouts que mais faturavam e achei os padrões que se repetiam
Entrevista com engenharia
O diagnóstico: falta de padronização forçava código redundante e difícil de manter
Múltiplas identidades coexistindo
Nichos diferentes de suplemento pedem “vibes” diferentes; o sistema comporta todas
Componentes espelhados
Figma e código com os mesmos blocos — 80% das dúvidas de handoff sumiram
ROI de produtividade como argumento
Foi assim que a parada estratégica de 1 a 2 meses foi vendida
Sprints de laboratório
Com o tempo liberado, experimentos contínuos alimentados por métrica real
Tema é uma troca de tokens
Trocar o nicho de uma página é trocar cor, tipografia e assets — o layout nem sabe que mudou
Copy validada dentro do bloco
Cada seção nasce com a copy já aprovada pelo time de copy; o protótipo sai 90% pronto
Storybook como fonte
Toda seção mapeada no Storybook, moderada por design e por uma squad de dev — nada de bloco solto
O sistema em uso
Liberdade pra testar
Com o sistema pronto, o time ganhou agilidade pra testar variações de layouts de ofertas vencedoras em nichos menos performantes, aplicando o que já funcionava de forma sistêmica. Saímos de uma postura reativa pra uma de experimentação constante, e o time ficou 40% mais eficiente: aprovar um teste e descartar o que não funciona passou a ser questão de horas.
O mesmo produto, dois públicos: energia
O mesmo bloco de oferta de um suplemento de energia, com dois temas. Pro público geral: contraste alto, cor quente e urgência na forma. Pro público feminino: o mesmo produto e a mesma promessa, com tons mais suaves, respiro e um convite em vez de um empurrão. A seção é a mesma, os tokens é que mudam.
O mesmo público, duas paletas: feminino
Agora um produto só feminino, testado em duas leituras do mesmo público. De um lado, a paleta rosa genérica que o mercado associa ao feminino; do outro, tons terrosos e confortáveis, que falam com a mesma mulher sem o clichê. É o tipo de variação que o sistema deixa rodar como teste A/B em horas, não em dias. Nenhum dos temas é o do cliente — são exemplos.
Liderar o time durante a parada
Como lead, a preocupação não era só o sistema — era a carga do time. Uma parada estratégica puxa mais de todo mundo por um tempo, e eu queria que isso fosse vivido como investimento em liberdade, não como sobrecarga. Então o processo teve duas rotinas fixas: workshops de design critique, pra o time decidir junto o que entrava no sistema e ficar mais unido no meio da pressão; e mentorias individuais em one-on-one, ao longo de todo o projeto e da minha passagem pela empresa, pra cada pessoa ter espaço pra falar de carga, dúvida e carreira. O sistema saiu — e o time saiu mais time.
- Design critiqueworkshops em grupo: o que entra no sistema se decide junto
- One-on-onementoria individual, durante todo o projeto e o estágio na empresa
- Carga vigiadapuxar mais por um tempo, com a liberdade depois como contrapartida explícita
Resultados
−80%
no time-to-market: de 14 dias pra menos de 3 por página
De duas semanas pra três dias, por página
Ser lead de design em direct response é entender que a beleza do layout está a serviço da velocidade da iteração. O sistema não foi sobre componentes; foi sobre liberdade pra testar e escalar — com qualidade e consistência na entrega.
