Outcomes
Artefatos entregues no design system do CMS
Strategy & Leadership Overview
Quando 100% das publicações e alterações de conteúdo — incluindo ajustes de SEO — dependem exclusivamente de designers e desenvolvedores, o resultado é um gargalo estrutural que limita a velocidade de crescimento da empresa. A tese deste projeto foi clara: desacoplar o site institucional do core da plataforma e criar um CMS que devolvesse autonomia aos times de conteúdo, marketing e growth.
Como líder de Design e Produto, coordenei squads multidisciplinares de design e desenvolvimento na concepção, planejamento e execução do projeto — desde a avaliação de tecnologia até a entrega de um ecossistema de componentes reutilizáveis com governança visual.
O Problema: Dependência Estrutural
Cada nova página, ajuste de copy ou otimização de SEO exigia um ciclo completo de design → desenvolvimento → PR → deploy. O tempo médio para uma simples alteração de conteúdo era de pelo menos 5 dias, criando um bottleneck que afetava diretamente a capacidade de experimentação e a velocidade de go-to-market.
Para um time de Growth, cada dia de espera para publicar conteúdo é um dia de oportunidade perdida. Precisávamos de autonomia sem sacrificar consistência.
Abordagem: Design System Meets CMS
Levantamento e Auditoria de Componentes
O primeiro passo foi mapear todas as páginas principais da Nuvemshop e seus componentes. Identificamos quais se repetiam globalmente e quais haviam sido desenvolvidos como soluções pontuais para páginas específicas. Criamos um sistema de etiquetas visuais no Figma: verde para componentes reaproveitáveis, vermelho para os que precisavam de adaptação.
Sistema de Design e Nomenclatura
Definimos um design system com uma nomenclatura rigorosa para escalar:
- M-XX — Molecules (elementos atômicos)
- C-XX — Components (blocos compostos)
- S-XX — Structural Components (layouts e grids)
- T-XX — Templates (composições de página)
O maior desafio foi torná-lo verdadeiramente flexível: todos os componentes precisavam funcionar tanto no site institucional quanto em contextos de campanhas.
Artefatos entregues no design system do CMS
Documentação Dupla
Criamos dois tipos de documentação desde o design:
- Para desenvolvedores: Specs técnicos, tokens, variantes e regras de uso dos componentes.
- Para times de conteúdo: Protótipos interativos no Figma explicando de forma visual todo o processo de criação e edição de páginas no CMS.
Escolha de Tecnologia e POC
Levamos em consideração dois critérios: conhecimento interno e validação de mercado. A stack final foi WordPress como CMS + Elementor como page builder, integrados com Nimbus Design System, Bootstrap, CSS vars e Vanilla JS.2
A POC foi essencial para validar nossos requisitos principais: internacionalização, layout drag'n'drop e SEO. Com ela, entendemos as possibilidades e limitações da plataforma.
APIs
Além da consistência visual, precisávamos manter um padrão de dados cross-project. Criamos endpoints (Insti APIs) que serviam dados do CORE em formato JSON — planos e preços, menus globais e autenticação — garantindo que todas as páginas refletissem informações atualizadas e centralizadas.3
Arquitetura: CMS desacoplado consumindo dados do Core via APIs
Consistência via Restrição
Para impedir inconsistências, restringimos o Elementor para exibir apenas os componentes Nuvemshop/Tiendanube. Ao mesmo tempo, utilizamos design tokens para garantir que as especificações fossem aplicadas corretamente — criando um ecossistema sólido entre Figma, código e site builder.
Para um tipo de conteúdo, uma única forma de visualizá-lo. Se criamos novos componentes, ficam disponíveis para qualquer página. A consistência não é opcional.
Timeline do Projeto
Q4 2022 → Q1 2023
Resultados
O projeto transformou fundamentalmente o processo de criação e gestão de conteúdo:
- Autonomia operacional: Diferentes times passaram a criar e publicar conteúdo de maneira autônoma — 78 páginas no Brasil e 38 na Argentina, incluindo 25 páginas novas de SEO programático e 7 adaptações para o novo sistema de marca.
- Performance de conversão: O CVR do grupo de páginas migradas aumentou 15% MoM comparado ao mesmo grupo não migrado, com queda de 10% no bounce rate.1
- Mudança radical de processo: O ciclo de publicação caiu de no mínimo 5 dias (ideia → design → desenvolvimento → PR → deploy → check) para aproximadamente 10 minutos (ideia → design/copy no CMS → check).
Liderança Data-Centric
Este projeto não foi apenas uma migração tecnológica — foi uma mudança de paradigma operacional. Ao combinar um design system governado com um CMS restritivamente flexível, criamos um modelo onde autonomia e consistência coexistem.
A medição comparativa entre páginas migradas e não migradas nos deu a evidência de que o investimento em infraestrutura de conteúdo gera retorno direto em conversão. Cada componente construído uma vez é reutilizado dezenas de vezes, com garantia de qualidade visual e técnica.
Footnotes
1. Dados referentes aos mercados Brasil e Argentina. Métricas comparativas MoM entre grupo de páginas migradas e não migradas. [↩]
2. WordPress + Elementor como plataforma base, customizado com componentes do Nimbus Design System para manter governança visual. [↩]
3. Insti APIs — endpoints internos servindo dados do CORE (planos, preços, menus) em formato JSON para consumo cross-project. [↩]