Nourish Bar | Portfolio UX UI

Nourish Bar project

UI Design | Figma & Framer | Prototype | AI assisted image generation | Landing Page

Role:

Sole UX/UI Designer

Project type:

Workshop / Fast paced

Year:

2025

Project Overview:

Web design project developed in Figma and implemented in Framer for a fictional premium cereal bar brand. The site was designed to promote a natural and professional fitness lifestyle, targeting athletes through marketing direction. The responsive layout ensures a seamless experience across desktop and mobile devices, combining aesthetics with clear user-focused messaging.

Challenge:

As a UX/UI Designer, I played a key role in developing a responsive website with AI image generation

My Actions/Solution

Defined and refined proto personas to target the right users and align design decisions with their needs.

Designed clean and intuitive user interfaces focused on clarity and usability.

Applied user-centered design principles to ensure the experience balanced business goals and user satisfaction.

Audience:

Active people

"I just want something that gives me energy for my daily activities"

Natural seekers

"I prefer products that are natural, no chemicals, no artificial stuff "

Weightlifters

"I’m always looking for protein-rich options that can help me build strength."

Audience's needs:

Natural seekers want assurance of 100% natural products.
Weightlifters need protein-rich options to boost performance/gains.
Active people in general look for energy support in their daily activities.

Goal defined:

Design a visually appealing and consistent landing page for Nourish Bar that clearly communicates its natural and protein-rich benefits to different audience segments, while ensuring an intuitive and professional first impression

Since it isn't a cheap product, the aesthetics needed to match a sophisticated product

Starting the design:

The project began directly in a medium-fidelity prototype, using Figma as the main canvas and later refining the designs in Framer

Some assets were intentionally left blank in Figma, as this was a medium-fidelity stage, but included clear indicators for planned animations

The first animation style I decided was a rotating one, but due to the time limit I ended up using another

Since the product was not launched, I created a pre-subscription so users could pre-order their nourish bar

Animations:

The first animations highlights the features from the ingredients used on the protein bar

The second animation was chosen due to the familiriaty with the most websites that uses accordion animations to show the FAQ, it reduces the cognitive load due to not showing everything at once

Leveraged AI-powered tools for Image creation

I used Leonardo.Ai to generate the images, testing multiple prompts and refining them through several iterations until I reached the desired visual direction