← Renan Marçal Landing pages
Mercado Pago · 2021–2022

Landing pages em escala

Engenharia, produto e marketing tinham necessidades que competiam entre si na criação das páginas. O trabalho foi encontrar uma estrutura que atendesse os três sem que cada lançamento virasse um projeto do zero.

Plataforma
Web
Envolvidos
Produto · Engenharia · Marketing · Jurídico · Comercial · Design System
Papel
Design de sistema · Arquitetura de componentes · Alinhamento de stakeholders
cenário 01

Múltiplos mercados, escala regional

O ecossistema reunia mais de 50 landing pages distribuídas em sete países da América Latina. As diferenças de tarifas e regras comerciais exigiam versões específicas para cada mercado.

Na prática, qualquer atualização precisava ser repetida manualmente em várias páginas, tornando a manutenção lenta e difícil de escalar.

50
páginas ativas · 7 mercados
Brasil13
México10
Argentina7
Chile7
Uruguai5
Peru4
Colômbia4

↳ Cada variação de tarifa exigia manutenção manual isolada — sobrecarregando engenharia e design a cada atualização regional.

desafio 02

Equilibrando velocidade e manutenção

O projeto precisava atender necessidades diferentes dentro da empresa.

Post-its mapeando os requisitos concorrentes das equipes de engenharia, produto e pricing durante a definição do sistema de landing pages
O desafio foi desenhar uma estrutura que permitisse atualizar esse conteúdo com mais autonomia, sem abrir mão dos padrões técnicos definidos pela engenharia.
estratégia 03

Estruturando um sistema reutilizável

Comecei mapeando todas as landing pages para identificar padrões de estrutura e conteúdo. Como o volume de interfaces era grande, priorizei as páginas de maquininhas.

Comparei as páginas no Figma para identificar o que mudava entre os países e o que podia virar componente. A partir desse mapeamento, defini as regras de cada bloco, como limites de conteúdo, variações de layout e propriedades editáveis.

Alinhei essa estrutura com a engenharia para que cada componente tivesse correspondência direta com os campos do builder.

Painel no Figma mostrando o sistema de componentes das landing pages do Mercado Pago com variações estruturais e anatomia modular
governança 04

Adaptando o Andes para o builder

Os novos blocos foram construídos seguindo os padrões do Andes, o design system do Mercado Pago, mas adaptados às necessidades do builder de landing pages.

Alinhamento com a engenharia

Mantive a estrutura e a nomenclatura dos componentes alinhadas ao repositório utilizado pela engenharia, facilitando a implementação e a manutenção.

Documentação dos componentes

Documentei os novos blocos e suas variações para que pudessem ser reutilizados em outras páginas e evoluídos de forma consistente pela equipe.

escala 05

Padronização dos assets visuais

Além dos componentes da interface, também estruturei os assets das landing pages. As imagens das maquininhas variavam entre os países por conta de moedas, bandeiras e ofertas, o que gerava dezenas de versões para manter.

Organizei esses materiais no Figma usando componentes, variantes e instâncias. Assim, alterações no modelo principal eram refletidas automaticamente nas versões regionais, reduzindo o trabalho manual de atualização e exportação.

matrizes automatizadas no figma gerando variações de criativos de maquininhas para diferentes moedas, bandeiras e ofertas regionais da América Latina
resultado 06

Menos trabalho manual

Antes, boa parte do tempo era gasta adaptando layouts e exportando imagens para cada país. Com os blocos funcionando direto no builder, esse trabalho praticamente desapareceu. Passei a dedicar muito mais tempo à evolução dos componentes, aos testes e às melhorias da experiência junto com a squad.