Criação de uma biblioteca de módulos de landing pages no figma para qualquer designer da Alice criar LPs de forma mais ágil.
Atuação
Discovery, mapeamento, benchmarking, criação de seções/blocos, critique, regras, documentação.
Empresa
Alice - 2022/2023
Contexto
Conforme as demandas de landing page aumentavam, veio a necessidade agilizar a criação de layouts para o time de design. Esse projeto surgiu como uma solução para criação de páginas de uma forma mais rápida e consistente dentro da Alice.
Discovery
No primeiro ano de operação da Alice, as LPs eram feitas por freelancers, mas ao passo que a operação de growth cresceu, a demanda por LPs ficou cada vez maior. Começou a ficar inviável aguardar de 3 a 4 semanas para a produção de uma LP que ficaria 2 semanas em teste. Além disso, havia o custo alto e a inconsistência das páginas. Ao passo que o time de design da Alice cresceu, foi possível absorver o layout dessas páginas, mas a implementação continuava sendo terceirizada e as inconsistências continuavam. Assim identificamos os principais problemas a serem resolvidos:
Aumento de demanda - conforme o time de Growth e PLG cresceram, as demandas de LPs deixaram de ser algo pontual e de prioridade baixa. Agora tínhamos uma operação com foco em criação de leads e retenção de membros que precisava de muito auxílio do time de design.
Falta de escalabilidade - mesmo com o aumento de prioridade dessas páginas, entendemos que esse aumento não deveria crescer exponencialmente para o time de design. Precisaríamos trabalhar focando em escalabilidade e agilidade. Uma vez que uma LP teste pode ficar no ar apenas 2 semanas, não fazia sentido demorar 4 semanas pra construí-la.
Inconsistência - o uso de freelancers somado a uma nova estrutura de design fez com que, no começo da operação de landing pages, surgissem diversas inconsistências de layout/visual. Mas, uma vez que a operação cresceu e o time de design se consolidou, não fazia mais sentido publicar páginas que não seguissem nossa identidade.
LP = Código - no fim do dia, LP é código. O design system da Alice já se encontrava maduro o suficiente pra ser aplicado e desdobrado na área de landing pages.
Pensando nisso, e após o sucesso da biblioteca de emails, decidimos criar a biblioteca de LPs.
Mapeamento
A partir das principais questões a resolver, o primeiro passo foi fazer um mapeamento das principais LPs publicadas pela Alice.
A partir do mapeamento, foi possível identificar melhor tanto os acertos e sucessos de nossos layouts, quando os erros que não deveríamos repetir. A inconsistência era tanta, que precisamos acrescentar uma etapa de faxina pra tirar do ar páginas desatualizadas e com erros.
Benchmarking
Com os aprendizados do mapeamento, foi a hora de buscar referências fora da Alice. Buscamos inspirações para cada tipo de estrutura que iríamos construir.
Criação de seções e blocos
Sempre alinhado a liderança de design system, construímos uma vasta biblioteca de módulos dentro do Figma (ferramenta usada por todo o time de design). Assim, criamos módulos autolayoutáveis e componentizados de acordo com o design system da empresa. Desde o início, tínhamos em mente que os módulos deveriam ser padronizados o suficiente para garantir a consistência de comunicação visual da Alice, mas sem perder o caráter de personalização e novidade que cada LP deve ter para que performasse acima da média. Sabíamos que se todos as páginas saíssem iguais, corríamos o risco de perder o interesse do lead/membro, portanto garantimos que a biblioteca fosse um facilitador para cada designer, e não uma estrutura fechada e limitada.
A biblioteca contou com mais de 220 módulos (desktop + mobile) divididos entre: header, menu, hero, form, slider, CTA, logo, header, body, CTA, imagem e vídeo, devices (notebook, celular), proposta de valor, features/steps/como Funciona, logo clouds/clients, stats/dados/counters, quote/bio, tabela comparativa, FAQ, press/news, content, TY Page, error e footer.
Com todos esses módulos componetizados em uma biblioteca própria, foi possível automatizar o processo de criação, aumentando as possibilidades de conteúdos, testes e aprendizados. A seguir, alguns exemplos de módulos criados com a biblioteca.
Critique/Alinhamentos
Todo esse projeto foi feito pensando não só na operação de LPs, que demandava as páginas, mas também no time de design que iria montar esses layouts. Antes da biblioteca, apenas 2 designers criavam páginas na Alice. Após este projeto, as demandas de páginas passaram a ser atribuídas para o designer que atendia o squad específico que fez a demanda. Levando isso em conta, o projeto contou com alinhamentos e critiques em todas as etapas. Foi assim que entregamos uma biblioteca que pode ser usada pelo time todos desde o dia um, tornando-se um documento vivo passível de evolução sempre.
Aprendizados e resultados
Com a finalização desse projeto, saímos de uma produção lenta e ineficiente para um processo estruturado e ágil, dando ao time de design mais tempo para focar em estratégia.
Os time que passam as demandas LPs também se beneficiaram da biblioteca. Não foi só o tempo de entrega que diminuiu: as estruturas de layout também funcionam com uma base para as pessoas que pensam no conteúdo/copy, criando novas possibilidades de testes.
A biblioteca também possibilitou um novo projeto, que consiste em construir todos os blocos no wordpress via elementor. Assim, além de agilizar a criação do layout, conseguimos implementar LPs sem ajuda do time de engenharia, tornando o processo mais rápido e barato. Com isso, a quantidade de testes aumentou e se tornou muito mais eficiente, visto que o elementor possibilita que qualquer pessoa faça pequenos testes de LPs, sem precisar necessariamente de um designer alocado pra isso.