Marcel Design System
Um design system global que ganhou uma camada de temas por região para funcionar no Brasil.
O Carrefour é um dos maiores grupos varejistas do mundo, presente em dezenas de países. Como todo grupo global, ele vivia um problema clássico: como manter consistência entre mercados completamente diferentes sem apagar o que cada um tem de particular.
No Brasil, esse problema tinha uma camada extra.
O app antigo separava alimentação e não alimentação como se fossem dois produtos diferentes. Dois e-commerces dentro do mesmo app, com experiências e arquiteturas que não conversavam entre si. E o design system local, não tinha estrutura para sustentar a complexidade de um grupo com três marcas: Carrefour, Atacadão e Sam's Club Brasil.
Era hora de construir algo à altura disso.
Meu papel
Entrei como Design System Specialist, referência técnica do time de design no Brasil e responsável por representar a geografia brasileira dentro do Marcel, o design system global do grupo.
No dia a dia, isso significava transitar entre várias frentes. Criar e evoluir componentes para as necessidades do mercado brasileiro. Documentar padrões, diretrizes e comportamentos para designers e devs. Governar as decisões de arquitetura do sistema no Brasil sem quebrar a consistência global. Dar suporte direto a PMs, POs e devs dos 6 a 7 times de produto que consumiam o sistema. Estruturar processos de Design Ops para o time local. Ser referência de boas práticas de design de produto e acessibilidade. E trabalhar lado a lado com engenharia no desenvolvimento dos componentes locais.
O problema
O Marcel nasceu na França como o design system global do grupo. A arquitetura inicial partia de um tema único, pensado para a marca Carrefour de forma genérica, sem considerar as particularidades culturais e de negócio de cada país.
Isso mudou a partir de um estudo que conduzi e apresentei ao time global. Identifiquei que faltava uma camada intermediária entre o tema global e a execução local, e propus a criação de temas regionais. A proposta foi aprovada e incorporada à arquitetura oficial do Marcel.
Um exemplo mostra bem o tamanho do problema. Os tokens do sistema tinham nomes semânticos baseados no contexto francês. Um deles era o token marketplace, que no tema global representava uma cor ligada ao conceito amplo de "mercado".
No Brasil, marketplace não é um conceito amplo. É a área de produtos não alimentícios do e-commerce, e ela é azul. Alimentação é food, e é vermelho. Na França, a lógica era invertida: a cor associada a "mercado" era um vermelho vinho, que aqui seria lida na hora como alimentação.
O resultado era um designer ou dev brasileiro procurando o token marketplace esperando azul, e encontrando vermelho. O token tinha o nome certo. Só estava errado para o Brasil.
A solução
Defendi a criação de uma camada de temas por região dentro da arquitetura global do Marcel. Simples na teoria, trabalhosa na prática. O tema global define os padrões visuais e os tokens do Carrefour. Cada tema regional ajusta os tokens semânticos para a realidade do seu mercado.
No Brasil, isso virou redefinição dos tokens semânticos com nomes e valores que fazem sentido aqui, subtemas para as três marcas da geografia (Carrefour, Atacadão e Sam's Club Brasil, que fora do país é uma marca Walmart mas aqui pertence ao Grupo Carrefour e precisava caber nessa estrutura) e implementação replicada em web, Android e iOS.
Essa camada regional resolveu o problema dos tokens e, de quebra, abriu caminho para que cada país evoluísse seu sistema dentro da estrutura global sem comprometer a consistência da marca.
A reconstrução do app
Em paralelo à construção do Marcel, o app do Carrefour Brasil passou por uma reconstrução completa.
O app antigo tratava food e não food como mundos separados. O novo unificou tudo numa única estrutura de e-commerce, porque quem compra não pensa em categorias internas do varejista, pensa em comprar. O Marcel foi o que sustentou essa reconstrução, garantindo consistência visual e de interação em todas as telas e fluxos da nova experiência.
Black Friday
Quando encerrei minha passagem pelo projeto, a implementação de temas sazonais para a Black Friday já estava planejada dentro do Marcel. A arquitetura de temas foi pensada desde o início para suportar esse tipo de extensão, temas temporários que se aplicam sobre os temas de marca sem quebrar o sistema.
Conexão global
Cada país do grupo tinha um responsável por fazer a ponte entre as necessidades locais e o time global de design system, na França. No Brasil, esse papel era meu. Participar das decisões de evolução do sistema garantindo que as necessidades brasileiras fossem consideradas na arquitetura central, e traduzir as diretrizes globais para a realidade local sem perder consistência.
[diagrama da estrutura global — França como hub, países como geografias]
Resultado
O Marcel se tornou o design system global do Grupo Carrefour, com o Brasil como uma das geografias pioneiras na camada de temas regionais. A reconstrução do app unificou food e não food numa única estrutura de e-commerce, e a arquitetura de temas sazonais ficou pronta para operações como a Black Friday.
[link para o app Carrefour nas lojas] [prints ou gravação de tela do app em uso]
https://carrefour.design/328eff0d7/p/1784c3-welcome-to-marcel