de capacidade de entrega em design.
01 / Riachuelo + Midway / Sistema de DesignFintech + varejo · Liderança em design
Duas marcas. Um design system.
Uma base compartilhada criada para escalar produtos financeiros e de varejo sem apagar a identidade de nenhuma das marcas.
Explorar ↓00 / Contexto
Infraestrutura compartilhada. Sistemas de produto separados.
Riachuelo e Midway compartilhavam Engenharia e liderança, mas suas bibliotecas e fontes de referência haviam evoluído separadamente.
Investimentos feitos para uma marca raramente beneficiavam a outra. Componentes duplicados, handoffs inconsistentes e trabalho de desenvolvimento repetido desaceleravam as entregas em produtos financeiros, varejo e e-commerce.
Defini a arquitetura do sistema, os princípios de marca e o modelo de governança. Depois, conduzi a entrega com os times internos de Design e Engenharia e com a parceira Try.
- ProblemaSistemas duplicados em duas marcas
- Meu papelLiderança de design · Arquitetura · Governança
- Decisão-chaveBase compartilhada · Expressão própria de cada marca
- Evidência+30% de capacidade de design · -50% no tempo de implementação front-end
- 15squads
- 11liderados diretos
- 2marcas
- 30 mi+clientes
01 / Modelo operacional
Dê sustentabilidade financeira ao sistema antes de escalá-lo.
UX operava sem orçamento dedicado. Criei o primeiro centro de custo de UX da Midway para ferramentas, contratações e o sistema de design, enquanto liderava 11 designers em 15 squads.
Quando carteiras digitais e crédito ampliaram o roadmap sem novas contratações, mapeei a capacidade do time, comparei o valor presente das entregas internas e de parceiros e conduzi uma RFP com cinco fornecedores. A Try foi selecionada por sua experiência no setor financeiro e por seu modelo de entrega integrado.
Resultados operacionais relatados no case
Uma base. Mais capacidade.
no tempo de implementação front-end.
liberado do centro de custo de UX e realocado.
02 / Arquitetura do sistema
De bibliotecas duplicadas a uma visão compartilhada do sistema.
Um workshop com o time de UX revelou componentes e dependências duplicados entre Midway e Riachuelo.
Inventariamos 98 componentes essenciais e classificamos cada um como compartilhado, adaptado visualmente ou parametrizado por tokens.
Identidade
Tipografia, ícones e cores desconectados entre as duas marcas.
Interface
Experiências diferentes para ações que deveriam parecer relacionadas.
Componentes
Padrões, documentação e handoff inconsistentes.
Design universal
Ausência de padrões de acessibilidade, movimento e feedback.
03 / Modelo de marca
Compartilhar a estrutura. Preservar a expressão.
Um sistema comum não significava fazer um banco e uma varejista parecerem idênticos.
A pesquisa separou o problema em duas frentes: como marcas conectadas criam continuidade e como sistemas visuais permanecem flexíveis sem perder consistência estrutural.
- Uma base de componentes para Midway, Riachuelo e E-commerce.
- Distinção de marca por meio de tokens, assets e variações controladas.
- Movimento como feedback de produto para ação, confirmação e atenção.
Evidências de direção
O posicionamento tornou-se uma decisão de sistema.
Uma matriz com 16 marcas esclareceu o território em aberto. Escolhi uma direção que combinava a expressividade da rota Inovadora com a clareza da rota Alternativa.
Linguagem de movimento
Feedback que dá para sentir.
O movimento tornou-se um recurso de interface: sinalizava ações, confirmava respostas e guiava a atenção de um público diverso.
04 / Anatomia do sistema
Das regras do sistema às bibliotecas de produção.
A arquitetura ganhou escala em componentes, ícones, logotipos e ilustrações para Midway, Riachuelo e E-commerce.
O inventário inicial definiu 98 componentes essenciais para o escopo da contratação. Ao final, a biblioteca de produção entregou 135 componentes.
- 135componentes
- 521ícones
- 11ilustrações
05 / Governança
Um produto vivo precisa de direitos de decisão.
A adoção dependia de governança, não apenas de uma biblioteca finalizada no Figma.
Implementei um modelo híbrido, centralizado e federado. Um designer do núcleo protegia as contribuições, a qualidade técnica e a integração dos componentes, enquanto designers das squads contribuíam por meio de padrões compartilhados. Orientações de uso, versionamento, changelogs e restrições de implementação viviam junto à biblioteca governada.
- Responsabilidade pelo roadmap e RACI.
- Padrões de contribuição e acompanhamento da adoção.
- Versionamento obrigatório e exceções controladas.
- Descontinuação formal da biblioteca legada.
06 / Do design ao código
Conecte o sistema à entrega.
Introduzi o primeiro fluxo do grupo entre design e código, conectando componentes governados à entrega no front-end sem perder os critérios de aceite do sistema.
Validação
Teste o sistema em uma jornada real.
Cards Home tornou-se a primeira jornada completa criada sobre o novo sistema, em um dos pontos de entrada de maior tráfego da Midway e Riachuelo.
tarefas atingiram 100% de sucesso.
tarefas terminaram em falha completa.
para acessar uma fatura.
de CSAT geral.
A conclusão do pagamento levou 3 segundos, e os mapas de calor mostraram onde a atenção se concentrava no acesso à fatura e no pagamento.
O número de participantes não foi documentado na fonte preservada do case, por isso nenhum tamanho de amostra é declarado aqui.
Expressões finais
Um sistema capaz de mudar de contexto sem deixar de ser ele mesmo.
Liderança além do sistema
O design system deu suporte a resultados mais amplos.
- +59%na conversão de upsell de cartão · +33% em gastos no cartão
- −50%nos contatos de cancelamento · −14% no custo de atendimento via TMA
- #2Melhor Onboarding · idwall 2024
Resultados mais amplos do portfólio apresentados como contexto de liderança, não atribuídos ao design system.
Próximo case
BV: Onboarding Ver ↘