Food & Lifestyle
Major Meal Manager
An all-in-one tool that helps people curate, organize, shop for, and cook multi-course meals.
Context
Project brief
A self-initiated mobile app that connects three steps of hosting a multi-course meal: planning the menu, shopping from one consolidated grocery list, and cooking with guided instructions.
The problem
Cooking several courses means juggling recipes, quantities, and timing across apps, notes, and printouts. Existing tools help with planning, but offer little support once people are in the kitchen.
My Role
What I owned
This was a solo project. I led the research, defined the product concept, designed the flows and interface, built the interactive prototype, and created the light and dark design system.
Research / What I Learned
Competitor analysis
I reviewed Tasty and Yummly. Both are strong at recipe discovery, but treat each dish on its own rather than as part of a multi-course meal.
- No structured multi-course planning
- Little coordination of timing across dishes
- Planning, shopping, and cooking live in separate places
The gap: no single workflow that takes a full menu from plan to grocery list to the stove.
Tasty: Recipes & Cooking Videos
A large recipe library with step-by-step videos. Strong for discovery, but no way to organize several dishes into one menu.
Yummly Recipes & Meal Planning
Personalized recommendations and meal planning, but still treats each recipe separately, with no support for timing across courses.
Key challenges identified
01
Planning
Choosing and scheduling several courses has no single home.
02
Shopping
Ingredients across dishes must be combined by hand.
03
Cooking
Switching between recipes mid-cook breaks focus.
Final Experience
Home Page
One hub for the grocery list, meal planner, and recently saved menus.
Menu Browsing
Curated 4–6 course menus organized by cuisine, with filters for theme and occasion and search for known dishes.
Add Menu to Planner
Saving a menu also schedules it, so preparation can be spread over several days.
Dark Mode Toggle
Dark mode provides an alternative theme for lower-light cooking environments while preserving the same contrast requirements.
Grocery List Consolidation
Ingredients from every selected menu merge into one list, with duplicates combined and each item still traceable to its dish.
Cook Mode
A step-by-step view of the full meal, with video or written instructions and timing for each course.
Design System
Consistent in light, legible in the dark
Contrast Grid
I tested every text and background pairing in the colour system against WCAG contrast ratios. The grid marks which combinations pass AA or AAA and which fail, which set clear rules for body text, UI elements, and emphasis states.
Light and Dark Components
Navigation, buttons, and cards are variant-based Figma components with hover, active, and disabled states, built once and themed for both light and dark mode.
Outcome & Impact
Workflow-Driven Design
Breaking a complex, real-world task into a clear sequence of planning, consolidated shopping, and guided cooking keeps each screen focused on one job.
One connected flow
Linking the planner, grocery list, and Cook Mode means people do not have to switch between separate tools mid-task.