Projeto · Agosto de 2022

Section components para Landing Pages

Criei 14 componentes de seção reutilizáveis pra acelerar e padronizar a construção de Landing Pages.

Desenvolvi e liderei um projeto essencial para otimizar a construção de Landing Pages, em resposta à crescente demanda causada por revisões nas estratégias de vendas. Meu objetivo era criar componentes template de seções de tela, proporcionando eficiência de produção e uniformidade no processo.

O público-alvo abrangia o time de design, garantindo facilidade na construção de layouts; o time de frontend, agilizando a implementação de modificações nas Landing Pages; e o time de marketing, permitindo testes rápidos e análise imediata dos resultados.

Minhas responsabilidades de liderar o projeto foi devido ao meu interesse e habilidades destacadas em UI Design, Componentização no Figma e Organização de Design System.

Enfrentei o desafio de mapear todas as seções utilizadas nas construções de Landing Pages, previamente criadas por diversos designers, sem alinhamento ou padronização. A principal ferramenta foi o Figma, possibilitando a criação de componentes adaptáveis ao contexto e informações necessárias.

As soluções adotadas foram:

1. Comunicação Efetiva: Mantive constante diálogo com os times de Design, Marketing e Frontend para alinhar expectativas e necessidades.
2. Inspiração em Melhores Práticas: Realizei benchmarking em Design Systems e Landing Pages referência para incorporar as melhores práticas no projeto.
3. Organização por Similaridade: Categorizei layouts de Landing Pages, identificando blocos similares para uma abordagem eficiente na criação de componentes.
4. Nomenclaturas Flexíveis: Alinhei as nomenclaturas dos componentes com base nos termos já utilizados pelo time de frontend e evitando também especificidades que limitariam a aplicação dos componentes.
5. Aproveitamento do Figma: Utilizei a atualização de Propriedades do Figma para criar componentes modulares com toggles de ocultação em elementos dos componentes, criando uma abordagem modular e adaptável às diversas necessidades de aplicação.
6. Diretrizes Detalhadas: Para cada componente, estabeleci regras, guias e recomendações de aplicação, assegurando consistência e facilitando a utilização por parte dos times envolvidos.

O resultado final foi a criação dos “Componentes Sections”, gerando 14 componentes que padronizaram e aceleraram a produção de Landing Pages. Cada componente possui regras, guias e recomendações de aplicação, contribuindo para uma implementação consistente e eficaz.