Food hub
Project Context
In today’s fast-paced world, health and fitness go hand-in-hand with good nutrition. Yet many fitness enthusiasts struggle to discover recipes that align with their goals recipes that are quick, nutritious, and inspiring.
FoodHub is a responsive web concept designed to bridge that gap. It’s a fitness-centered recipe hub that surfaces meals aligned with workout goals (e.g., “post-workout,” “lean gain”) and makes discovery seamless across mobile and desktop.
As the Lead UX/UI Designer, I crafted FoodHub from the ground up: defining the product vision, structuring the architecture, conducting research, creating the interface, and prototyping responsive flows.
Below you’ll see how the information architecture (sitemap), workflows, and content hierarchy were laid out to prioritize clarity, speed, and consistency before diving into user personas and interface design.
Problem Statement & “How Might We”
Problem Statement:
Many users like Amelia struggle to find healthy fitness-oriented recipes across devices because existing recipe blogs/websites are not optimized for fitness-goals, are inconsistent between mobile & desktop, and place too much friction in discovery and navigation.
Problem:
Many users like Amelia struggle to find healthy, fitness-oriented recipes because existing recipe blogs and apps:
- Are not optimized for mobile or cross-device use.
- Lack filtering by fitness goals or macros.
- Have cluttered navigation that increases friction.
How Might We (HMW):
- HMW allow a user to discover healthy fitness-recipes quickly on mobile or desktop?
- HMW enable filtering or contextualising recipes based on fitness goals (e.g., “post-workout”, “muscle-gain”, “under 30 mins”)?
- HMW create a seamless cross-device experience so the user can start browsing on phone and switch to desktop effortlessly?
- HMW reduce cognitive load and friction in navigation so the user can get to a recipe in under 3 taps/clicks?
Competitive & Contextual Research
We reviewed several existing recipe blogs and fitness-nutrition platforms.
Key Usability Problems Identified
- Navigation menus on mobile were too dense, leading to confusion about where to find “recipes geared for fitness”.
- On desktop, pagination and layout disrupted flow, making recipe discovery cumbersome.
- Users often lost context when switching devices — e.g., mobile → desktop: bookmarks not synchronised or state lost.
- Filtering and tagging of recipes (by fitness goal, macro-nutrients, time) was inconsistent or buried.
- Visual design: bright imagery but low contrast or slow-loading hero banners hindered the mobile experience.
Key findings:
- Many recipe sites: large hero images, but poor mobile optimization (slow load times).
- Fitness apps: strong fitness goal orientation, but weak in recipe discovery or cross-device browsing.
- There was a gap: websites that merge fitness-goal context + performant responsive design + seamless mobile ↔ desktop continuity.
- This informed our design direction: emphasise performance, fitness alignment, clear navigation, cross-device fluidity.
Key Usability Problems Identified
- Navigation menus on mobile were too dense, leading to confusion about where to find “recipes geared for fitness”.
- On desktop, pagination and layout disrupted flow, making recipe discovery cumbersome.
- Users often lost context when switching devices — e.g., mobile → desktop: bookmarks not synchronised or state lost.
- Filtering and tagging of recipes (by fitness goal, macro-nutrients, time) was inconsistent or buried.
- Visual design: bright imagery but low contrast or slow-loading hero banners hindered the mobile experience.
Primary Persona
Name: Amelia Jones
Age: 29
Occupation:
Digital-marketing specialist, works long hours, active lifestyle but struggles to consistently eat well and try new healthy recipes.
Bio:
Amelia often hits the gym 3-4 times/week. She tracks workouts in one app and uses another for recipes but juggling between apps and websites frustrates her. She wants meals that are quick, nutritious and aligned to her fitness goals (e.g., lean muscle, recovery).
Goals:
- Find healthy recipes that fit her macros and time constraints.
- Browse and bookmark recipes both on mobile (commute) and desktop (at home).
- Get motivated by content that connects food to fitness.
Frustrations / Pain Points:
- Many recipe websites are cluttered, not optimized for mobile, and don’t tie into fitness goals.
- On mobile, loading times are slow, navigation is confusing.
- On desktop, switching to mobile loses context (desktop-only designs).
- Finding a recipe that fits her equipment/time/fitness focus (e.g., high-protein, gluten-free) takes too many clicks.
Motivation / What she values:
- Efficiency: “I don’t want to spend 20 mins just to find a recipe.”
- Relevance: Content should align with her fitness goals, not generic.
- Seamless cross-device experience: if she bookmarks on phone, she wants to continue on desktop without friction.
Information Architecture
To ensure intuitive navigation and a clear content hierarchy, I created a sitemap that outlines the primary and secondary pages within the Food Hub application.
The structure focuses on user flow from discovery (Home, Explore, Blogs) to action (Store, Product, Transaction) and support (Contact, FAQs). Each section was designed to minimize friction, helping users find recipes, browse local food stores, and manage transactions efficiently.
Sitemap Overview
- Home: Overview, benefits, featured content, and calls-to-action.
- Explore: Allows users to discover food-related blogs, recipes, and nearby restaurants.
- Store: Central hub for e-commerce functionality — browse, compare, and purchase products.
- Product: Detailed product pages with reviews, features, and comparisons.
- Transaction: Streamlined checkout, pricing, and legal pages.
- Gallery: Visual space for food images, brand visuals, and user content.
- Blogs: Educational and community-focused content.
- Contact: Support, inquiries, and location details.
Design Solution / Design Approach
Responsive Design
- Created a responsive layout that adapts gracefully: mobile first, then tablet → desktop.
- On mobile: streamlined hero section, minimal navigation, sticky filter bar for recipe criteria (time, fitness goal, equipment).
- On desktop: multi-column layout, persistent filter sidebar, and recipe cards with hover states for extra detail.
Fitness-Goal Integration
- Introduced tag system: “Post-workout”, “Lean-gain”, “Recovery”, “Under 30 mins”, etc.
- Users can filter by fitness goal and time-constraint.
- Recipes display macro-nutrient info and optional fitness context (e.g., “Great after lower-body session”).
Performance & Usability
- Optimised images for mobile (compressed, responsive markup) to reduce load times.
- Navigation designed for “within 2-3 taps” to reach a recipe from home screen.
- Clear call-to-action buttons (“View recipe”, “Save for later”) with sufficient tap target size.
Prototypes
.png)
.png)
Visual & Branding
- Grey with light accent colors (to reflect healthy, energetic fitness vibe) on a black background to create strong contrast and premium feel.
- Clean typography, consistent spacing, high-legibility on mobile screens.
- Design system built with reusable components (cards, filters, hero banners) to maintain consistency across mobile + desktop.
Brand Direction:
Energetic, modern, and performance-focused.
Color Palette:
Grey + light accents on a black base for strong contrast.
Typography:
Clean sans-serif for legibility; consistent hierarchy across devices.
Design System:
Built reusable components (cards, filters, banners) for UI consistency and scalability.
Reflection & Next Steps
What I learned:
- Cross-device continuity is often an overlooked dimension in website design, delivering a seamless mobile → desktop hand-off adds significant value for users.
- Performance (especially mobile) matters not just for speed but for perceived usability and engagement.
- Filtering by fitness goal and time-constraint resonated strongly with users in this space (mirroring findings from similar nutrition/fitness apps).
Next steps:
- Conduct A/B testing of homepage hero messaging (“Healthy Recipes for Your Fitness Goals” vs generic).
- Explore personalisation: after users save/favourite recipes, tailor recommendations based on their fitness goal tags.
- Improve accessibility: ensure contrast ratios are met (especially with bright colours on black background), add keyboard navigation, screen-reader friendly components.
- Monitor analytics over time: track bookmark conversions, mobile↔desktop switching behaviour, recipe completion rate (did users actually make the recipe?).
- Potential feature expansion: integrate video cooking demos, macro tracking integration, community ratings/comments on recipes.
