Design System e
Governança em Escala

Um sistema. Duas marcas. Quinze squads. Quinze squads mantinham diferentes versões do mesmo botão. Construí um sistema para duas marcas que reduziu em 50% o tempo de desenvolvimento.

Empresa Midway Financeira + Riachuelo · Grupo Riachuelo
Meu Papel UX Manager. Arquitetura do sistema, governança, adoção nas duas marcas e interface com Tech, Produto e o Diretor de Produtos Financeiros.
Escala Operacional 11 designers em 15 produtos · 11 canais · ecossistema financeiro e varejista operando em App Midway, App Riachuelo, E-commerce e PDV, Web, WhatsApp e Backoffice
Período 2023 a 2025
Resultado Sete dígitos de eficiência anualizada · +30% de capacidade · −50% no tempo de código · CSAT 4.7
11
designers · 15 squads
+30%
capacidade de entrega
−50%
tempo de código · primeiras jornadas
7dig
impacto de eficiência anualizado
Design SystemInfraestrutura Compartilhada de MarcaComponente para CódigoGovernança15 SquadsIntegração com IA2 Marcas Design SystemInfraestrutura Compartilhada de MarcaComponente para CódigoGovernança15 SquadsIntegração com IA2 Marcas
Midway — Design System
Sumário Executivo

Uma operação de design fragmentada
impacta diretamente o resultado.

Onze designers, 15 squads, um ecossistema de App, PDV, Web, WhatsApp e Backoffice. Nenhuma das duas marcas tinha infraestrutura de design unificada, e a inconsistência se acumulava a cada sprint como retrabalho e janela competitiva perdida. O design system foi resposta estrutural a um risco organizacional, medida em headcount equivalente e tempo de código.

Indicadores-Chave

+30%
Capacidade de entrega
−50%
Tempo de código
100%
Sucesso · jornadas de cartão
7dig
Eficiência anualizada
02 Problema Organizacional

O problema não era
estético.
Era sistêmico.

Fragmentação de componentes é sintoma de falha organizacional: design e engenharia operando como sistemas paralelos. Na Midway e na Riachuelo isso custava em todas as camadas da entrega.

Componentes duplicados
Cada squad mantinha a própria biblioteca. O mesmo botão existia em diferentes versões, cada uma com manutenção separada, divergindo com o tempo.
Desalinhamento entre Design e Tech
Design e engenharia trabalhavam de fontes de verdade diferentes. Desenvolvedores reconstruíam o que já estava desenhado. Retrabalho estrutural, não acidental.
Nenhum mecanismo de governança
Nada governava o que entrava no sistema, quem era dono ou como o padrão se aplicava. A qualidade variava com a pessoa e a pressão do sprint.
Isolamento entre marcas
Midway e Riachuelo operavam como ambientes separados, apesar de compartilharem infraestrutura, engenharia e liderança. Investimento numa marca era invisível para a outra.
Fricção do discovery à entrega
Sem padrões compartilhados, o pipeline de entrega se estendia desnecessariamente. O tempo de design era consumido reconstruindo em vez de criando. O tempo de engenharia era consumido alinhando em vez de entregando. O gargalo era infraestrutura, não capacidade.
03 Risco Econômico

A fragmentação tem
um custo real.

O caso de um design system é econômico, não estético. Infraestrutura fragmentada acumula custo invisível a cada sprint: retrabalho, desalinhamento, atraso e headcount para compensar a ineficiência.

Esses custos não estabilizam: crescem com o número de squads e canais. O design system não foi investimento em qualidade, foi mitigação de risco.

Registro de Riscos
Time to Market

Ciclos longos por reconstrução de componente e realinhamento a cada sprint. Cada atraso evitável encolhe a janela competitiva.

Pressão de Headcount

Organização sem infraestrutura compartilhada compensa ineficiência com headcount. Crescer exigia expandir time na mesma proporção.

Redundância de Código

Código redundante entre canais aumentava manutenção, risco de regressão e superfície técnica sem valor proporcional.

Inconsistência de Experiência

Interfaces inconsistentes entre canais elevavam a taxa de contato. Usuários encontrando padrões diferentes no mesmo produto geravam volume de suporte evitável e erodiam a confiança.

04 Decisão Estratégica

O UX parou de responder
a demandas isoladas
e começou a organizar o sistema.

Em vez de gerenciar um backlog de pedidos de componente, estruturei um RFP interno: o design system virou iniciativa organizacional com sponsorship executivo.

RFP Interno

Business case construído antes do primeiro componente

Ganho de capacidade e redução de risco antes do primeiro componente. Direcionei como decisão de eficiência financeira, não iniciativa de craft, e garanti o sponsorship do Diretor de Produtos Financeiros.

Fundação de Marca Compartilhada

Midway e Riachuelo operando a partir de uma única infraestrutura de design

Estruturei o sistema para servir fintech e varejo da mesma fundação. Os tokens permitiram diferenciar marca na superfície com a camada estrutural unificada. Um sistema, duas expressões.

Governança Formal

Comitê de DS, RACI e limite obrigatório de adoção

Comitê semanal de Design System estabelecido com representação de design, engenharia e produto. Documentação formal de RACI criada. Métricas de adoção obrigatórias por squad definidas no roadmap público. Governança institucionalizada.

05 Arquitetura Construída

Quatro camadas.
Um sistema integrado.

Camada 01
Fundação de Design
Figma · Tokens
Arquitetura de Tokens
Tokens primitivos, semânticos e de componente: marca diferente na superfície, estrutura compartilhada entre Midway e Riachuelo. Mudança no primitivo se propaga nas duas marcas.
Biblioteca Figma
Biblioteca versionada com documentação, regras de uso e variantes obrigatórias. Uma fonte de verdade com acesso governado acabou com a fragmentação dos 15 squads.
Padrão de Documentação
Cada componente com regras de uso, antipadrões, acessibilidade e variantes de marca. Tratei documentação como entrega de produto, não anotação opcional.
Expressão de Marca Compartilhada
Os tokens permitem diferenciar cor, tipografia, espaçamento e raio com componentes estruturais idênticos. Acessibilidade e clareza regulatória governaram as duas marcas na linha de base.
Camada 02
Integração de Código
React · Storybook · IA
Componente para Código via AI
Integrei Locofy AI ao fluxo DS Commit para gerar React e React Native direto do Figma. Comprimiu o ciclo design-código e eliminou uma categoria inteira de retrabalho.
Integração com Storybook
Referência viva no Storybook: engenheiro consulta especificação sem depender de designer.
Conexão com Repositório de Código
Sistema conectado ao monorepo. Toda atualização passava pelo DS Commit antes de entrar na biblioteca de código, o que acabou com componente ad hoc de squad.
Impacto na Entrega
As primeiras jornadas nativas do DS cortaram 50% do tempo de implementação, medido em horas de engenharia contra entregas equivalentes do período anterior.
Camada 03
Governança
Comitê · RACI · Roadmap
Comitê de DS
Criei o comitê semanal com design, engenharia e produto na mesa: pauta fixa, decisão documentada, ritual permanente e não escalação ad hoc.
Protocolo DS Commit
Toda adição ao sistema exigia documentação, revisão entre funções e aprovação do comitê. Acabou a criação unilateral de componente por squad, o principal driver da fragmentação pré-DS.
Roadmap Público
Roadmap visível para todos os squads. Reduziu pedido duplicado e deixou o squad planejar entrega contra a disponibilidade do sistema.
Métricas de Adoção
Rastreei adoção por squad e reportei na governança executiva. Não conformidade exigia justificativa, o que inverteu o padrão de construir local para usar o sistema.
Camada 04
Curva de Adoção
Economia · Escala · CSAT
Retorno Composto
A economia do DS é composta, não linear: cada squad integrado multiplica o retorno. Na adoção plena em 15 squads, o sistema gera capacidade equivalente a vários headcounts sem expandir orçamento.
Adoção Faseada
Sequenciei a adoção por criticidade e prontidão de engenharia, jornadas de maior tráfego primeiro. A evidência inicial sustentou o sponsorship executivo.
Sinal de Qualidade
CSAT acima de 4.7 nas jornadas prioritárias e 100% de sucesso em tarefas nos testes moderados. Foi a evidência que abriu a adoção além dos squads iniciais.
Trajetória de Eficiência
Na adoção plena em 15 squads e duas marcas, a eficiência anualizada chega a sete dígitos, contando headcount equivalente, retrabalho e custo de manutenção eliminado.
06 Impacto Mensurável

Infraestrutura com
retorno mensurável.

+30%
Capacidade de entrega
Tempo de design que saiu da reconstrução e voltou para produto.
−50%
Tempo de implementação de código
Engenharia em componentes nativos do DS contra complexidade equivalente pré-DS.
>4.7
CSAT · jornadas prioritárias
Jornadas financeiras prioritárias, medido em usabilidade pós-implementação.
100%
Taxa de sucesso · jornadas de cartão
Jornadas de cartão prioritárias em testes moderados.
Múltiplos
Capacidade equivalente a headcount
Capacidade equivalente a vários headcounts, sem expandir orçamento.
7dig
Eficiência anualizada
Na adoção plena das duas marcas.
15
Squads no roadmap de adoção
Todos numa curva estruturada de adoção.
2
Marcas · 1 sistema
Fintech e varejo na mesma infraestrutura, com independência de marca via tokens.

Todas as métricas são mascaradas e baseadas em modelos de medição internos; os números refletem cenários de adoção inicial ou de adoção plena projetada.

08 Mudança Cultural

Da cultura de urgência
ao sistema previsível.

Antes do DS
Depois do DS
Efeito Organizacional
Urgência justificava furar o padrão
Urgência pesada contra custo sistêmico; exceção exige justificativa
Padrão como padrão. Exceção como exceção.
Cada squad resolvia o mesmo problema sozinho
Problema compartilhado resolvido uma vez, consumido por todos
Retorno multiplicado sobre investimento em design
Alinhamento negociado sprint a sprint
Alinhamento no sistema; squad consome, não negocia
Handoff previsível. Retrabalho reduzido.
Qualidade variava com a cultura do squad
Piso de qualidade dado pelo sistema
Experiência consistente em todos os canais
Execução fragmentada, cronograma imprevisível
Sistema governado permite prever entrega e capacidade
Previsibilidade como capacidade organizacional
DS visto como custo de ferramenta
DS medido como headcount equivalente e custo operacional
Design como ativo do balanço patrimonial
Evidências de Suporte

Arquitetura,
governança e adoção.

Materiais disponíveis sob solicitação, abstraídos aqui para proteger dados confidenciais.

Visual 01
Diagrama de Arquitetura de 4 Camadas
Four-layer Design System architecture diagram showing token hierarchy, component library, organism patterns, and governance model
Visual 02
Curva de Adoção e Economia
Squad adoção curve over time plotted against annualized efficiency saving projection across 15 squads and two brands
Visual 03
Governança & RACI Snapshot
RACI matrix and Comitê de DS governance structure with contribution flow and ownership model across design, engineering, and product
Próximo Projeto
My · FIAT · Plataforma Digital de Veículos
Voltar ao topo