Hair Glow — landing page de lançamento

Contexto

O Hair Glow é um fluido 5 em 1 de 260 ml da linha "Toda beleza de mãe", assinada pela Izadora K. O produto entrava em lançamento e não tinha uma página própria: a única superfície de venda eram posts de rede social, que dão alcance mas não dão argumento.

Meu escopo aqui foi específico e vale dizer de saída: UI e protótipo. A copy veio pronta, de um documento de página de vendas escrito pelo cliente. Meu trabalho não foi decidir o que dizer — foi decidir em que ordem, com quanto peso e em quanto espaço cada coisa é dita.

O problema

O público da linha é mulher com rotina cheia, e esse é o dado que muda tudo. Ela não lê uma página de produto do começo ao fim. Ela rola, para em uma frase, e decide.

Isso cria uma tensão concreta de layout. O produto tem cinco benefícios — hidratação, proteção térmica, controle de frizz, antipoluição, pré e pós-treino — e cinco benefícios é exatamente a quantidade que vira ruído quando apresentada como lista. Uma página que abre despejando os cinco perde a leitora antes do terceiro.

O outro problema é que o argumento real do produto não é técnico. É tempo. "Cinco em um" só significa alguma coisa para quem entende que são cinco frascos e cinco etapas a menos na pia do banheiro.

Meu papel

• Estrutura e ordem das seções da página
• UI de desktop (1440) e mobile (375)
• Adaptação responsiva de todas as seções
• Protótipo navegável e organização do arquivo para handoff

Copy, direção de arte e fotografia vieram do cliente.

Processo

A base foi o Creators Figma Kit somado ao UI Kit Braip e a componentes do Relume. Isso não é detalhe de bastidor: com o esqueleto de componentes pronto, o tempo que iria para desenhar caixas foi inteiro para a decisão editorial — que seção existe, em que ordem, com quanta respiração.

O trabalho ficou em três frentes:

Ordenar. Cada seção da página responde a uma pergunta, e a pergunta seguinte só aparece depois que a anterior foi respondida. Promessa, dor, como funciona, prova, preço, dúvida.

Dosar. Onde a copy dava margem, o layout escolheu densidade. Os cinco benefícios viraram uma coluna de itens curtos ao lado da imagem do produto — leitura vertical rápida, nenhum deles competindo por destaque.

Adaptar. Onze seções de 1440 px reconstruídas para 375. A adaptação não foi empilhamento: as duas colunas do bloco de benefícios viram uma sequência, e o comparativo de kits, que no desktop é lado a lado, no mobile passa a ser decisão sequencial.

Decisões-chave

A dor antes do benefício

A segunda seção da página não fala do produto. Ela pergunta: "cansada de testar cuidados capilares que não cabem na sua rotina?" e nomeia frizz, ressecamento e dano de secador antes de oferecer qualquer solução.

É deliberado. Uma leitora que ainda não reconheceu o problema não tem onde encaixar a resposta. A seção de benefícios que vem logo depois funciona melhor porque chega como alívio, não como catálogo.

Cinco benefícios como um passo, não como cinco

O título carrega o argumento inteiro: cinco benefícios em um único passo. Os itens ficam em uma coluna estreita, com texto curto e sem ícone decorativo — a hierarquia diz que o importante é o "um único passo", e que os cinco são a prova disso, não o protagonista.

Prova por contexto, não por close de produto

A seção de lifestyle mostra o produto em quatro situações de rotina em vez de quatro ângulos do frasco. Cada cartão liga uma cena a um benefício já apresentado — a academia amarra no pré e pós-treino, a chapinha amarra na proteção térmica.

Duas opções, nunca três

A oferta apresenta exatamente dois caminhos: o kit com duas unidades e a unidade avulsa. O combo entra à esquerda, com o selo de lançamento e o preço riscado visível, para que a comparação aconteça sem que a leitora precise fazer conta.

Três opções teriam transformado uma decisão de compra em uma tarefa de planilha.

Marquee como respiro

Entre os blocos densos há três faixas horizontais finas com as condições de compra — compra 100% segura, frete grátis, garantia. Elas resolvem dois problemas ao mesmo tempo: dão pausa visual entre seções longas e mantêm as objeções logísticas presentes sem gastar uma seção inteira com elas.

Resultado

A landing page foi entregue completa nos dois breakpoints, com protótipo navegável e o arquivo organizado para handoff — seções nomeadas, componentes instanciados a partir do kit, versão registrada no changelog do arquivo.

Não tenho número de conversão para mostrar. A página foi entregue no lançamento e a métrica ficou do lado do cliente; publicar um percentual que eu não medi seria pior que não ter nenhum.

O que ficou pendente

A seção de depoimentos está no layout, mas ainda com texto de placeholder. O conteúdo real — nomes, fotos e falas de clientes — dependia de coleta que não estava pronta no fechamento do design.

Deixo isso escrito porque a alternativa seria mostrar um print de prova social inventada em um case sobre uma página de venda, o que é exatamente o tipo de coisa que a página inteira foi desenhada para não fazer.

O que eu faria diferente

Teria desenhado a seção de depoimentos depois do conteúdo existir, não antes. Um bloco de prova social projetado sobre lorem ipsum assume um formato — cinco cartões curtos, todos do mesmo tamanho — que o depoimento real quase nunca respeita. Quando o texto verdadeiro chegar, o layout vai ter que ceder, e teria sido mais barato deixar o espaço aberto do que preencher com uma forma provisória.