Nourish Bar | Portfolio UX UI

Projeto Nourish Bar

Design de Interface (UI) | Figma & Framer | Protótipo | Geração de Imagem com IA | Landing Page

Função:

Lead Designer UX UI

Tipo de projeto:

Workshop / Rápido

Ano:

2025

Resumo do projeto:

Projeto de web design desenvolvido no Figma e implementado no Framer para uma marca fictícia de cereal bar premium. O site foi projetado para promover um estilo de vida fitness natural e profissional, visando atletas por meio da direção de marketing. O layout responsivo garante uma experiência fluida em dispositivos desktop e mobile, combinando estética com mensagens claras e focadas no usuário.

Desafio:

Como Designer UX/UI, desempenhei um papel fundamental no desenvolvimento de um website responsivo com geração de imagens por IA.

Minha solução:

Defini e refinei proto personas para mirar nos usuários corretos e alinhar as decisões de design com as suas necessidades.

Projetei interfaces de usuário (UIs) limpas e intuitivas, focadas na clareza e na usabilidade.

Apliquei princípios de design centrado no usuário para garantir que a experiência equilibrasse os objetivos de negócio e a satisfação do usuário.

Audiência:

Pessoas ativas

"Eu só quero algo que me dê energia para minhas atividades diárias"

Consumidores que buscam o natural

"Eu prefiro produtos naturais, sem químicos, sem nada artificial."

Levantadores de peso

"Estou sempre procurando opções ricas em proteínas que possam me ajudar a ganhar força."

Necessidade da audiência:

Pessoas que buscam o natural querem a garantia de produtos 100% naturais.
Atletas de levantamento de peso precisam de opções ricas em proteína para melhorar o desempenho/ganhos (musculares).
Pessoas ativas em geral procuram suporte energético em suas atividades diárias.

Objetivo definido:

Projetar uma landing page visualmente atraente e consistente para a Nourish Bar que comunique claramente seus benefícios naturais e ricos em proteínas a diferentes segmentos de público, garantindo uma primeira impressão intuitiva e profissional.

Por não ser um produto barato, a estética precisava corresponder a um produto sofisticado.

Começando o design:

O projeto começou diretamente em um protótipo de média fidelidade, utilizando o Figma como tela principal e, posteriormente, refinando os designs no Framer.

Alguns assets (elementos visuais) foram intencionalmente deixados em branco no Figma, por se tratar de uma etapa de média fidelidade, mas incluíam indicadores claros para as animações planejadas.

O primeiro estilo de animação que decidi usar era um rotativo, mas devido ao limite de tempo, acabei usando outro.

Como o produto não foi lançado, criei uma pré-assinatura para que os usuários pudessem pré-encomendar sua Nourish Bar.

Animações:

A primeira animação destaca as características dos ingredientes usados na barra de proteína.

A segunda animação foi escolhida devido à familiaridade com a maioria dos websites que usam animações de acordeão (accordion) para exibir o FAQ. Isso reduz a carga cognitiva por não mostrar tudo de uma vez

Utilizei ferramentas com suporte de IA para criação de imagens

Utilizei o Leonardo.Ai para gerar as imagens, testando múltiplos prompts e refinando-os através de várias iterações até atingir a direção visual desejada.