Construção de landing pages escaláveis

No início de 2023, atuando enquanto Design Lead na INGAGE Digital e junto ao time comercial da agência, identificamos uma necessidade a partir do movimento do mercado e das necessidades trazidas através da prospecção de clientes: reduzir o custo de produção das páginas de destino que construímos e oferecê-las com um valor reduzido. Para empresas que enfrentam restrições orçamentárias, uma solução de baixo custo poderia oferecer uma entrada valiosa para o marketing digital, mas para isso, precisaríamos superar alguns desafios.

Entendendo a demanda e identificando os desafios

Quando começamos a pensar nas LPs Low Cost, o primeiro passo foi entender como funcionava o processo na época. Partimos para um roadmap dos passos tomados desde a entrada do projeto até o lançamento, de fato, das landing pages.

Logo nessa etapa já foi possível identificar que o principal ponto de atenção era o nível de personalização que cada LP demandava para o time de design, e nos deparamos com um processo contraproducente de construir cada página do zero.

Com base na nossa expertise e analisando diversas landing pages, perecebi que todas têm estruturas básicas comuns, como a herosection e formulários/CTAs para captura de leads.

Ampliei a análise para identificar as boas práticas de design que são fundamentais para o desempenho das landing pages, focando em três principais aspectos:

• estrutura da página;
• principais dobras e elementos visuais;
• aplicação de cores.

De um lado, entendi que o desafio maior estava atrelado à customização e à construção dessas LPs do início.

Do outro lado, a maioria das landing pages de alta performance rodando no mercado hoje contam com uma estrutura (dobras, fluxo, etc.) e elementos visuais típicos: prova social, recursos dos produtos/serviços em questão e diferenciais perante os concorrentes são exemplos do que ficou entendido de serem dobras comuns e convencionais numa LP.

Metodologia e soluções propostas

Com o resultado do roadmap e da análise qualitativa, parti para a construção de uma biblioteca de componentes que garantisse escalabilidade às landing pages.

A ideia por trás da biblioteca de componentes foi criar um conjunto de elementos de design reutilizáveis, desde os mais simples como tokens de design, CTAs e headers padrão, aos mais complexos como herosections, FAQs, formulários de captura de leads e demais elementos visuais, que pudéssemos utilizar em diferentes projetos de landing pages.

Design atômico

A partir da abordagem de design atômico, defini e construí componentes menores e reutilizáveis, de CTAs a formulários e dobras completas. A decisão foi estratégica para transformar as LPs em estruturas modulares, onde cada parte pudesse ser montada rapidamente, mas sem comprometer interface e usabilidade.

A partir disso, desenvolvi a biblioteca de componentes no Figma, organizada em tokens de design e variáveis que pudessem ser customizados conforme o brandbook de cada cliente. Isso permitiu que o time de design trabalhasse de forma mais ágil, e cada elemento foi otimizado para que pudéssemos reaproveitá-lo projetos com características diferentes mas com uma estrutura padrão que levava em conta interface intuitiva e boas práticas para LPs, o que resultou em uma redução de 62% no esforço operacional.

Ferramentas

A componetização dos elementos e a biblioteca de recursos foi construída inteiramente no Figma. Criei uma estrutura de design versátil e detalhada, desde elementos básicos (cores, espaçamentos, tipografia) até componentes mais complexos (herosections, acordions, FAQs). Com o design atômico, foi possível garantir uma consistência visual e estrutural sem necessariamente contar com templates prontos, o que traz liberdade para adaptar cada página à identidade de cada cliente.