Overview do projeto
A Liz Naturals é um projeto de estudo — uma marca de skincare criada para praticar o design de uma landing page completa, do Figma ao site publicado.
A proposta da marca é simples: em vez de empurrar produtos, a Liz ajuda a pessoa a entender o que a pele precisa e entrega uma rotina clara, com o que usar, quando usar e por que cada produto entra. Quem faz essa ponte é a Liz AI, uma assistente que conversa com a usuária e sugere a rotina.
O projeto envolveu o design da página inteira — hero, rotina, linha de produtos, comparação antes/depois, depoimentos, FAQ e chamada final —, um sistema de ícones próprio, a tela de chat da Liz AI e toda a camada de interação e animação.
Qual problema resolver?
Comprar skincare costuma ser uma decisão no escuro: são muitos produtos, termos técnicos e promessas parecidas, e quem tem pele sensível ainda carrega o medo de errar e irritar a pele.
O resultado é conhecido — compra por impulso, produto que não faz sentido na rotina e uma sensação de que cuidar da pele exige dez passos e muita pesquisa.
O desafio da Liz foi o contrário: dar clareza. Cada produto com um papel definido, uma rotina curta que cabe no dia e uma página que explica em vez de convencer.
Como abordei o problema?
Usei IA ao longo de todo o processo — para explorar o posicionamento da marca, organizar a estrutura da página e, na etapa final, implementar o design com o Claude Code.
A decisão central foi tratar a rotina como o produto, e não o frasco. Por isso a página segue a jornada de quem está em dúvida: promessa, entendimento, rotina, linha de produtos, confiança, perguntas e, por fim, a chamada para começar.
Principais decisões de design
- A ação principal é conversar. O hero abre com um campo de conversa — "O que você quer melhorar na sua pele hoje?" — com atalhos como "Começar", "Pele sensível" e "Mais glow", em vez de um catálogo.
- Rotina em 5 passos, sem adivinhação. Limpar, preparar, tratar, nutrir e proteger, cada passo com os produtos indicados e uma frase explicando o motivo.
- Linha organizada por função. Um carrossel em que cada produto traz o que faz — por exemplo, o Renew Serum, para viço, textura e aparência descansada.
- Transparência onde importa. A comparação antes/depois tem um aviso explícito de que é uma ilustração gerada por IA e não promete resultado clínico, e o FAQ recomenda teste em área pequena e dermatologista em caso de irritação.
- Confiança antes da compra. Depoimentos curtos e um FAQ que responde às dúvidas mais comuns: como a IA monta a rotina, se precisa usar os 5 passos, se dá para comprar avulso.
Ideação, protótipos & testes
Estrutura e grid
A página foi desenhada no Figma em um artboard de 1920px, com grid de 12 colunas, margem de 320px e gutter de 32px — o que deu ritmo e alinhamento consistentes entre as seções, mesmo com composições mais livres, como o frasco flutuando ao lado da lista de passos.
Rotina em 5 passos
A seção de rotina virou uma lista interativa: ao passar de um passo para outro, o produto e o texto entram por lados opostos, reforçando a ideia de sequência.
Linha de produtos
Os produtos aparecem em um carrossel de cards grandes, com o nome, o formato e a função de cada um. A rolagem automática é pausada quando a pessoa interage, e a barra de progresso mostra onde ela está na linha.
Antes e depois
A comparação usa uma barra arrastável para a pessoa descobrir a diferença por conta própria. É uma interação simples, mas que transforma uma imagem estática em algo para explorar — sempre acompanhada do aviso de que a imagem é ilustrativa.
Liz AI: o chat
Além da landing page, desenhei a tela de conversa da Liz AI, com histórico de conversas, sugestões de início ("Quero cuidar da acne", "Minha pele está oleosa", "Quero uma rotina de cuidado"), envio de foto e um aviso fixo de que a Liz pode errar e não substitui avaliação dermatológica.
Vale a transparência: o chat é uma demonstração. As respostas são simuladas por regras e as conversas ficam salvas apenas no navegador — não há uma IA real por trás. A tela deixa isso claro com a etiqueta "Liz AI · demonstração".
Design final
A identidade visual gira em torno de tons de rosé, terracota e creme com um marrom-ameixa escuro nos textos, para passar acolhimento e sofisticação sem cair no rosa óbvio de skincare. As palavras-chave dos títulos ganham destaque em rosé — "5 passos", "precisa" — como um respiro de cor no meio de bastante espaço em branco.
A tipografia é a Inter, com títulos grandes e leves, e criei um conjunto de 12 ícones próprios para a marca, usados nos botões e no chat. A fotografia dos produtos, com luz suave e texturas minerais, dá o tom de cuidado gentil que a marca promete.
Interação e animação
- rolagem suave e elementos que entram com fade e deslocamento conforme a pessoa avança;
- vídeo em "Cuidado gentil", com o título que acende durante a rolagem;
- em "Produtos fáceis de entender", o frasco gira junto com a rolagem, a partir de uma sequência de 121 quadros;
- carrosséis de produtos e depoimentos que avançam sozinhos a cada 8 segundos;
- layout próprio para telas menores, em uma coluna, com as mesmas seções da versão desktop.
A landing page está no ar — dá para navegar pela página completa e testar a demonstração do chat.
Ver site completoDiferencial do produto
A Liz não é só uma loja de skincare — ela atua como um guia de rotina.
- cada produto com um papel claro na rotina;
- rotina enxuta e explicada, sem excesso de passos;
- IA como ponto de partida, para escolher sem horas de pesquisa;
- comunicação honesta, com avisos sobre resultados e sensibilidade da pele.
O que eu faria se tivesse mais tempo
Com mais tempo, os próximos passos seriam:
- conectar o chat a uma IA de verdade, com backend e regras de segurança para recomendações de skincare;
- testar a página com pessoas reais, principalmente o fluxo da rotina e do chat;
- criar páginas de produto, carrinho e checkout;
- revisar o contraste dos textos em rosé e dos textos sobre fotografia, seguindo os critérios da WCAG.
Aprendizados do processo
A Liz Naturals nasceu no workshop IA Boost 2: o design foi feito no Figma e depois implementado com o Claude Code, buscando ficar fiel ao desenho, e publicado na Vercel.
Foi o projeto em que mais aprofundei a ponte entre design e código — grid, espaçamentos, estados de interação e animação precisavam estar bem definidos para a implementação sair idêntica ao Figma. Também aprendi a pensar uma página como uma jornada de decisão, e não como uma sequência de seções bonitas.
Por ser um projeto de estudo, os depoimentos e a comparação antes/depois são ilustrativos, e o chat é uma demonstração com respostas simuladas — vale essa transparência aqui.