Tayane

UI Design, Desenvolvimento

Nutricionista

Sobre

Criar uma página de vendas para uma nutricionista com foco em mulheres com rotina corrida, que não têm tempo para cozinhar ou seguir dietas complexas, mas desejam emagrecer e melhorar a alimentação.

O ponto principal do produto— destacado logo na primeira dobra da página (hero banner) — é um plano alimentar prático desenvolvido no notion, com fácil acesso e pensado.

Para isso, foi desenvolvida uma Landing Page com WordPress e personalização através de código com HTML e CSS.

Figma

WordPress

Elementor

Desafio

Transformar um serviço tradicional de consultório em um produto mais acessível, prático e escalável, mantendo a personalização como diferencial.

Público-Alvo

O primeiro passo foi entender profundamente o público-alvo:

  • Mulheres com rotina intensa (trabalho, casa, múltiplas responsabilidades)
  • Falta de tempo para cozinhar ou planejar refeições
  • Histórico de frustração com dietas difíceis de manter
  • Busca por praticidade sem abrir mão de resultados

Facilidade

Rotina

Consistência

Posicionamento

A página foi construída com base em um posicionamento claro: Nutrição prática para mulheres ocupadas.

O produto foi estruturado como uma adaptação do atendimento tradicional, com um diferencial importante:

  • cardápios pensados para serem seguidos na vida real
  • foco em simplicidade, rapidez e acessibilidade

Estrutura e Prototipagem

A estrutura foi pensada para guiar a usuária de forma simples e direta:

  • Conexão imediata com a dor (falta de tempo e dificuldade em seguir dietas)
  • Explicação dos serviços (consulta, cardápio e suporte)
  • Apresentação da solução prática
  • Prova social (resultados de pacientes)
  • Apresentação da profissional (humanização e autoridade)
  • Oferta clara e direta

Com base nos insights obtidos, foi conduzida a fase de prototipação, incluindo a definição do fluxo de navegação e a construção dos wireframes.

Figma

Guia Visual

Nessa etapa foi desenvolvido um logotipo simples e seleção de cores, fontes e elementos gráficos. Com foco em criar uma página visualmente agradável e confiável, sem poluição.

  • Logo: O logo combina fonte serifada com bordas arredondadas (transmite segurança, equilíbrio e acolhimento) e fonte manuscrita (traz proximidade e um toque humano, como uma comunicação pessoal).
  • Cores: A paleta foi baseada em dois pilares referência pessoal da cliente (limão siciliano) e psicologia das cores. Foram escolhidos tons de amarelo e verde mais fechados, que:
    • transmitem naturalidade e saúde
    • evitam excesso de estímulo visual
    • geram sensação de calma e equilíbrio
  • Fontes: As escolhidas seguem a base do logotipo, com adição do uso de uma fonte sem serifa para textos mais longos, garantindo leitura mais fluida e acessível.

 

Também foi realizado um teste de acessibilidade para verificar se a combinação das cores utilizadas tem um bom contraste.

Figma

Adobe Color

Copy

A construção da copy foi baseada em dois pilares principais:

  • Direcionamento da cliente
    Foram utilizados os textos enviados pela cliente, garantindo autenticidade e alinhamento com a sua comunicação.
  • Aprimoramento estratégico com apoio de inteligência artificial
    A copy foi refinada com o auxílio de um assistente de copy, com foco em:
    • Clareza da mensagem
    • Conexão com as dores do público
    • Simplificação da linguagem
    • Direcionamento para ação

A linguagem foi intencionalmente simples, direta e próxima, refletindo o posicionamento da marca e facilitando a compreensão para o público.

ChatGPT

Experiência do Usuário

Foram adicionados detalhes pensados em tornar a experiência do usuário mais agradável:

  • Animações sutis na entrada da página
  • Cursor personalizado
  • Cor de seleção de texto personalizada
  • Favicon de Brilho(com base em um gosto pessoal da cliente)

 

Além disso, a Inteligência Artificial foi utilizada como apoio para personalização de HTML e CSS.

Figma

WordPress

Elementor

HTML

CSS