Site completo

Projeto real para a empresa

Nutrian

Site estratégico desenvolvido para aumentar contatos qualificados e vendas diretas de programas digitais para um casal de nutricionista e educador físico, utilizando confiança progressiva e arquitetura de decisão.

Framer

Landing Page

SEO

Web Design

Visão Geral do Projeto

Nutricionistas e educadores físicos dependem majoritariamente de redes sociais para atrair clientes, mas não possuíam uma página estruturada que centralizasse autoridade, explicasse o método e conduzisse o usuário à ação. Isso limitava a conversão de interessados em pacientes e compradores de programas digitais.

O desafio foi criar um site institucional completo, humanizado, estratégico e orientado à conversão, que refletisse a parceria do casal e facilitasse tanto o contato direto quanto a compra de produtos e serviços oferecidos.

01 | O Problema

Falta de um site completo para conversão

Apesar do interesse gerado nas redes sociais, não existia uma experiência estruturada que organizasse as informações de forma estratégica. O visitante entendia que se tratava de nutrição e treino, mas não compreendia claramente o diferencial, o método ou o próximo passo.

Confiança Fragmentada

As informações sobre formação, metodologia e serviços não estavam organizadas para construir credibilidade de forma progressiva.

Proposta de Valor Pouco Clara

O conceito de acompanhamento integrado existia, mas não estava estruturado visualmente para demonstrar sua força.

Conversão Única e Limitada

Não havia múltiplos caminhos de entrada para usuários com diferentes níveis de intenção.

02 | O Processo de Design

Briefing e Levantamento de Requisitos

O projeto iniciou com uma etapa de briefing junto aos responsáveis pela Nutrian, com o objetivo de entender o modelo de negócio, os serviços oferecidos e o posicionamento da marca. A principal necessidade identificada foi transformar o site em um canal estruturado de aquisição, capaz de apresentar os serviços com clareza e direcionar o usuário para ações como contato ou compra.

Benchmark

A partir disso, foi conduzida uma análise de mercado para entender como outras marcas da área estruturam suas ofertas, comunicação e presença digital. Esse estudo permitiu identificar padrões, oportunidades de diferenciação e boas práticas aplicáveis ao projeto.

A análise mostra que a maioria dos concorrentes foca em nutrição esportiva, geralmente associada à performance ou emagrecimento isolado. Poucos estruturam uma abordagem integrada que combine alimentação, treino e acompanhamento contínuo.

A Nutrian se diferencia ao integrar nutrição e treino em um único sistema, oferecendo uma proposta mais completa e acessível para o público geral. O foco em transformação progressiva, aliado a uma comunicação mais humanizada e uma jornada digital estruturada, fortalece o posicionamento e potencializa a conversão de novos clientes.

Referências de Design

Durante essa etapa, foram buscadas referências visuais em plataformas como Dribbble e Behance, com o objetivo de explorar diferentes estilos e abordagens de layout. A partir dessas referências, foram selecionados elementos e seções específicas que serviram como base para a construção do design, permitindo combinar boas práticas e soluções já consolidadas no mercado.

Esses insights visuais orientaram as decisões iniciais de interface, que posteriormente foram estruturadas em wireframes com apoio de ferramentas de IA, possibilitando validar a organização das seções e a hierarquia das informações antes da execução final.

Direção Estratégica

Desenvolvi um guia de marca, definindo o posicionamento da Nutrian, as persona, a direção visual e o tom de voz, garantindo consistência entre identidade, conteúdo e experiência.

Posicionamento

A Nutrian é uma marca de transformação corporal que une nutrição e orientação prática para ajudar pessoas comuns a terem resultados sustentáveis, sem dietas extremas.

Persona

Direção Visual

A direção visual do projeto foi construída para transmitir leveza, naturalidade e acolhimento, com uma estética limpa, moderna e próxima da vida real. O verde é utilizado como base, representando saúde e equilíbrio, enquanto o roxo aparece como destaque, trazendo percepção de valor e transformação.

Tom de Voz

Foi definido um tom de voz acolhedor, simples e profissional, buscando criar conexão e segurança desde o primeiro contato. A comunicação parte de uma abordagem empática, mostrando que a pessoa não precisa passar pelo processo sozinha, respeitando seu ritmo e evitando qualquer ideia de extremos ou cobranças excessivas.

Ao mesmo tempo, mantém um posicionamento profissional, utilizando termos corretos, mas sempre explicados de forma clara e acessível, sem complexidade desnecessária. As mensagens são diretas, com frases curtas e objetivas, facilitando o entendimento e tornando a experiência mais leve, o que contribui para gerar confiança e aumentar a conversão.

Style Guide

A Nutrian busca transmitir leveza, vida real e proximidade. Escolhi a Nunito para títulos por ser mais arredondada e trazer um acolhimento, e a DM Sans traz uma clareza e confiança. As cores já estavam definidas para a marca, então apenas defini as Gray Colors necessárias para complementar.

Arquitetura da Informação e Ideação

Com a estratégia definida, foi estruturada a arquitetura do site, organizando o conteúdo em múltiplas páginas. Antes da construção visual, foi definida a estrutura detalhada das páginas, organizando o conteúdo seção por seção e estabelecendo a ordem das informações, a narrativa e a distribuição dos pontos de conversão. Essa etapa permitiu validar a lógica de navegação e o fluxo de leitura antes da execução.

Wireframing e Estruturação de Layout

Os wireframes foram desenvolvidos com apoio de ferramentas de IA, permitindo explorar rapidamente diferentes possibilidades de layout. Essa etapa foi focada em validar a hierarquia de informação, o posicionamento de CTAs e a organização dos blocos, garantindo que a estrutura fosse clara e orientada à ação.

Alta fidelidade | Em desenvolvimento

Em breve estará disponível!

Veja meus outros projetos

KIUNE

Design de posts e materiais físicos

Conteúdo

Redes Sociais

UI Design

UI

AKIRA ENEM

Redesign completo da Landing Page

Web Design

Landing Page

LP

Figma

Create a free website with Framer, the website builder loved by startups, designers and agencies.