📌 Overview

Project Name: NutriHub

Role: UI/UX Designer, Web Developer

Goal: Promote healthy living, encourage newsletter sign-ups, and offer personalized tools like a calorie calculator.

Target Audience: Individuals seeking wellness, meal planning support, and nutrition advice.

🎨 Tools & Methods Used

• Figma – for wireframing, visual design, and component libraries
• FigJam – to map user journeys and define the core funnel
• Google Fonts + Custom Icon Set – for accessible typography and clean visual identity
• WebAIM Contrast Checker – to ensure legibility and accessibility
• Attention Insight – for AI-powered heatmap analysis and visual attention validation pre-launch

🔁 UX Design Process

1. Empathize:

   Conducted informal user interviews and research on barriers to healthier eating. Insights showed users often feel overwhelmed by too much information or unclear next steps.

2. Define:

   Synthesized findings into a clear user need: “I want to eat healthier, but I need a clear and realistic starting point.”

3. Ideate:

   Explored ways to break the experience into small, motivating steps. Key features like the calorie calculator and structured 3-step flow emerged from this phase.

4. Prototype:

   Built mid- to high-fidelity wireframes in Figma. Emphasis was placed on visual hierarchy, CTA placement, and storytelling through imagery.

5. Validate:

   Ran Attention Insight heatmaps to test focal points and ensure key CTAs and headlines were receiving attention. Adjustments were made to improve visual flow based on this feedback.