Huggies
UI Design
Cargo: Web Designer
Equipe: Kimberly-Clark da Accenture Song
​
Período: Setembro e Outubro de 2021
Durante o rebranding e reposicionamento global da marca Huggies, fui responsável pela proposta web de Landing Pages para o site de Mais Abraços — plataforma online de chá de bebê e artigos da Huggies.
​
Tomamos como referência o site de Huggies no Reino Unido, que já adotava o novo style guide da marca. Com base nos conteúdos desenvolvidos para o Brasil e a América Latina, criamos blocos modulares versáteis, permitindo a construção de páginas dinâmicas e adaptáveis dentro do site, garantindo flexibilidade para atender a qualquer demanda de criação.
As LP's desenvolvidas para anunciar novos produtos ou ações da marca, costumava manter um padrão de conteúdo, com header, vídeo comercial, características do produto, combinação com outros produtos e destaque.
1. Header: A função desse primeiro módulo é apresentar o produto de forma emocional. O título em linha única ou, no máximo, duas e texto de duas linhas, no máximo três.
​
2. Módulo de vídeo: Título (H2) de destaque em uma ou duas linhas no desktop para que fique em, no máximo, 3 linhas no mobile. Mostrar ícone de play. Não ter mais que 2 vídeos por página.
​
3. Módulo carrossel principal: A função é explicar as funcionalidades do produto de forma mais emocional. Largura de 100% com a página. Não ter limite de quadros.
​
4. Tabela de tamanhos: Abaixo de um carrossel de fralda, sempre deve vir uma tabela de tamanho com um CTA mandando para o e-commerce. No mobile mostrar até 3 tamanhos com deslizamento horizontal.
​
5. Módulo coringa: Tem a função de destacar a combinação perfeita, ou ferramentas de dentro de site ou mesmo um conteúdo muito relevante.
​
6. Módulo de produtos: Para sugerir outros produtos. Recomendado apenas 4 produtos, mas se necessário não ter limites no módulo. Os indicadores no desktop aparecer apenas quando houver mais de 4 quadros.
​
7. Módulo de artigos: Destacar artigos relacionados. Recomendado sempre 4, mas sem limites. O botão "Ver mais" para a página principal de artigos.
​
8. No pé da Landing Page, os destaques a partir de agora serão editáveis (era um banner fixo), bem como o título, que pode variar de acordo com o conteúdo da página.
​
*Nos módulos 6, 7 e 8, foi proposto pelo cliente, que no mobile, ao invés de carrossel ficasse um quadro em baixo do outro. Entregamos as duas versões.​
**Importante ressaltar que esse guia foi baseado em LPs anteriores, mas os módulos após o desenvolvimento podem ser utilizados para diferentes campanhas dentro da plataforma.
Exemplo de LP utilizando todos os módulos, criado para exemplificar para o cliente e para outros designers posteriormente.
As ilustrações mostradas aqui correspondem à segunda versão do projeto. Após essa entrega, fui alocada em outro projeto, e outros designers deram continuidade. Por isso, a versão publicada no site de Huggies podem apresentar variações ao que foi apresentado aqui.
Projeto de CRM
Este é um projeto piloto de uma iniciativa comercial para testar pop-ups no site e e-mails marketing com novos usuários e não assinantes da plataforma Mais Abraços.
​
Fiquei responsável pela criação visual dos e-mails e pop-ups. Como os testes seriam realizados antes do lançamento oficial do rebranding da marca, o design precisava se alinhar ao novo posicionamento sem revelar totalmente a nova identidade visual.
​
​Durante o desenvolvimento desse projeto tive bastante contato com o DEV (programador).
Na imagem temos: 1. Tela do pop-up para desktop, imagem dividida meio a meio, na primeira metade temos a imagem de uma mãe lendo com seu bebê + produtos Huggies em cima de uma faixa vermelha, e na segunda metade temos logo de Mais Abraços, título, texto, labels de preenchimento e CTA. 2. Tela do mesmo pop-up versão mobile, com o mesmo conteúdo da versão desktop sem a divisão na horizontal, a imagem + produtos vêm logo abaixo da logo, e o restante abaixo dela. 3. Mockup de celular com o pop-up mobile anterior, o pop-up ocupa 70% da tela com uma margem lateral, botão de fechar no canto direito e CTA fixo na margem inferior, para ver o conteúdo que não fica visível no espaço usa-se a rolagem.
Na imagem temos: um dos caminhos proposto para o teste com usuários desconhecidos, então temos 2 pop-ups com a mesma chamada oferecendo um desconto, mas imagens diferentes, na primeira destaca a imagem de pais brincando com seu bebê e na segunda temos apenas os produtos Huggies. Ao clicar no CTA aparece uma tela de confirmação que já encaminha para o e-commerce com o desconto aplicado. Ou a pessoa pode comprar depois através do e-mail marketing enviado e que segue a mesma estrutura de testar a imagem.
Na imagem temos: um dos caminhos proposto para o teste com usuários conhecidos, então temos 2 pop-ups com a tela de confirmação de cada um e o e-mail marketing enviado como resposta de cada. Ambos os pop-ups, têm a mesma imagem, mas o primeiro oferece e-books exclusivos Disney, e o segundo um desconto de 15% no e-commerce de Huggies.
Ao todo foram criadas umas 30 telas para rodar os testes, entre usuários conhecidos e não conhecidos, pop-ups e e-mails marketing.