MealQuest
Client
N/A
Year
2025
Tag
UI/UX
Duration
2 months
The project itself :
Project Overview
MealQuest is a mobile application designed to simplify the process of meal planning while encouraging healthier habits through gamification. By turning everyday planning tasks into quests and rewarding users with experience points and progress levels, the app motivates users to stay consistent with meal preparation.
Problem:
Many people want to cook more meals at home but struggle to consistently plan meals due to the time and effort required to organize recipes and grocery lists.
Goal:
Create a mobile experience that simplifies weekly meal planning while motivating users to stay consistent through light gamification and habit-building mechanics.
My role:
UX/UI Designer responsible for product concept development, interaction design, and interface design.
Responsibilities:
Defined the core product concept and habit-building experience
Designed meal planning and grocery management workflows
Created wireframes and high fidelity UI designs
Developed user flows connecting recipes, planning, and grocery lists
iterating on designs,
making high-fidelity prototype
All about the user :
Research & Insights
Research explored how people currently plan meals and shop for groceries. Many users want to cook more meals at home but abandon meal planning due to the time and mental effort required to organize recipes and grocery lists.
Pain Points
Consistency:
Users struggle to consistently plan meals for the entire week
Recipe Tracking:
Grocery lists often become disconnected from recipes and meal plans
Decision Making:
Planning meals requires significant mental effort and decision making
Opportunity Areas
Weekly Scheduling:
Simplify weekly meal planning through structured scheduling tools
Grocery List Ease:
Automatically generate grocery lists based on selected recipes
Gameify:
Use game mechanics to motivate consistent meal planning habits
User Personas
The primary audience consists of busy individuals who want to cook more meals at home but struggle with planning consistency. These users value tools that reduce decision fatigue and help organize their routines.
Stakeholder Needs
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
Existing infotainment development workflows are spread across disconnected tools and disciplines, creating friction during iteration and review. Interface concepts are often evaluated without accurate physical context, making it difficult to assess spatial relationships, reach, and visibility early in the process. As a result, feedback cycles slow down and misalignment between teams can persist until later stages of development.
Designer
A spatially accurate reference environment to evaluate layout, scale, and visual hierarchy in context
Developer
Clear alignment between digital interface behavior and physical hardware constraints
Survey
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
I developed a user journey map of Carlos's experience with the app to highlight potential pain points and identify areas for improvement.
Goal
After figuring out our user group, we created a survey for Gen-Z commuters to help draw out insights that might lead to design opportunities. This survey was equipped with two different types of questions:
Current driving questions
Future thinking, Level 5 questions
User Journey Map
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
I developed a user journey map of a typical user's experience with planning out meals for the week to pinpoint potential pain points and identify areas for improvement.
Goal
The ideal user journey begins with planning meals for the week, selecting recipes, generating a grocery list, and completing meals throughout the week. By connecting these steps into a continuous workflow, the platform helps users stay organized and maintain healthy cooking habits.
Opportunity Areas
Work vs Rest:
A slight majority of surveyors would like to rest in a driverless car, but getting additional work done was a close second.
Visibility:
Visibility to the road is important to surveyors, so the HUD should not clutter their view.
Wasted Time:
Commute time often feels underutilized or disconnected from passengers’ goals
Value Proposition
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
MealQuest transforms meal planning from a repetitive chore into a structured and rewarding habit. By integrating recipes, weekly planning, and grocery shopping into one system, the app reduces the effort required to cook consistently while motivating users through gamified progress.
Goal
Choose a good movie in a cinema theatre nearby and select seats in an app in a fast and clear way
Technical Constraints
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
Accurate alignment between physical and digital environments was critical to the success of this system. Scan data required careful reconstruction to preserve production vehicle proportions while meeting fabrication and simulator constraints. Considerations such as driver eye point, seating position, reach zones, and mounting tolerances informed how the digital model was engineered and how physical components were integrated, reinforcing the need for a tightly coupled physical and digital reference.
Goal
Choose a good movie in a cinema theatre nearby and select seats in an app in a fast and clear way
The project schematically :
Concept Development
Early concept exploration focused on structuring the core workflow of the product: planning meals, gathering ingredients, and completing meals throughout the week.
Storyboards
The series of hand-drawing frames that visually describe and explore a user's experience with a product.
Storyboards were used to visualize how users would interact with the platform throughout the week, from planning meals to grocery shopping and completing daily cooking tasks.
Big picture storyboard, which focuses on the user experience. It's about how people will use the Voo's app during their day and it will be useful.
Close-up storyboard focuses on the app instead of on the user experiencing that product. Shows what happens on each screen of the app.
Buck Frame
We were able to determine three zone of legibility when testing text elements on the HUD. From here we started creating an information hierarchy based on these zones to identify what should be displayed where.
When testing, users reported eye fatigue when there were large blocks of bright colors on the HUD. We pivoted to muted/ transparent elements in later designs.
Alias Interface
After capturing the interior data of the Ioniq 6 with the Artec Leo 3D scanner, this mesh data became the digital reference that the team would use for the dashboard and all surrounding geometry to work from. The scan captured accurate proportions and spatial relationships, giving us the baseline needed for downstream modeling.
Concept Platform
These are a high fidelity design that represents a final product
At the start of the project, the team identified the 2023 Hyundai Ioniq 6 at the target platform to test this mixed reality experience.
Rebuilt Surfaces
After placing the 3D scan into Autodesk Alias, we using the point data of the scan to guide the resurfacing of the Ioniq 6 interior. This shows the rebuilt surfaces in Alias.
VR Passthrough
The virtual development environment was created to support the design, testing, and evaluation of spatial interfaces while maintaining alignment with a physical interior dash model. This environment enables the simultaneous use of 3D content, interactive screens, and external development tools, allowing rapid iteration and comparison across platforms. By combining virtual and physical elements, the system serves as a mixed-reality testbed for evaluating usability, interaction methods, and system behavior in an automotive HMI context across different user groups.
Dashboard Removal
These are a high fidelity design that represents a final product
Initial Model (Physical)
These are a high fidelity design that represents a final product
Dashboards Render
It's a structured scheme that outlines the pages and content hierarchy of the app.
Insights
Work:
Apps like your calendar and email lean heavily into the realm of work.
Rest:
Almost all social media leans into the rest category.
Appmap
It's a structured scheme that outlines the pages and content hierarchy of the app.
The app map illustrates how MealQuest organizes meal planning, recipes, and grocery management into a unified workflow. The structure prioritizes the daily quest system while allowing users to easily move between weekly planning, recipe exploration, and grocery tracking.
3D Scan Data
It's a structured scheme that outlines the pages and content hierarchy of the app.
We first scanned the interior of an Ioniq 6 using an Artec Leo 3D scanner. This shows the raw output of this scan.
Initial Wireframes
They initially oriented on the basic structure of the homepage and highlight the intended function of each element.
Initial sketches explored layout structures for the weekly planner, recipe browsing interface, and grocery list workflow. These sketches helped determine the most intuitive way to visualize weekly meal planning on a mobile device.
Low-Fidelity Wireframes
More "clear" version of wireframes in a digital form. Also all the important pages are added
in it.
Low fidelity wireframes translated early sketches into structured digital layouts. These wireframes focused on organizing information clearly while keeping interactions simple and easy to navigate.
Usability Studies
This is an examination of users and their needs, which adds realistic context to the design process.
Early usability testing was conducted with participants who regularly cook meals at home but do not consistently plan meals in advance. Participants were asked to plan a week's meals using the planner and generate a grocery list.
Weekly Planning:
Users easily understood the weekly planner interface and how to assign meals to specific days
Keep Grocery List:
Participants responded positively to automated grocery list generation
Quest Feedback:
Some users wanted clearer visual feedback when completing daily quests
The clear version :
Refinement
The refinement stage focused on improving clarity in the planning interface and strengthening the visual feedback associated with quest completion and progress.
3D Printing
It's a structured scheme that outlines the pages and content hierarchy of the app.
With the dashboard surfaces finalized in Alias, the next step was preparing the model for 3D printing. To accomplish this, we transitioned the design into Fusion 360, where we added material thickness, converted surfaces into solids, and introduced breakpoints to segment the dashboard based on the Formlabs Form 4L printer bed dimensions (13.9 x 7.7 x 13.8 inches).
Full Dashboard
It's a structured scheme that outlines the pages and content hierarchy of the app.
After all parts on the top half of the dash were attached together, light spackle was used to fill the seams created where parts met. This meant that now the top of the dash was one full piece. The model now fits in the lab’s buck as a 1:1 representation of a 2023 Hyundai Ioniq 6 dashboard.
Part Segmentation
These are a high fidelity design that represents a final product
Build Progression
Assembling the model after printing out all the parts was simple. A lot of time and effort went into planning the B side of the parts so that slotting and gluing the parts together was as smooth as possible.
Instrument Panel
We were able to determine three zone of legibility when testing text elements on the HUD. From here we started creating an information hierarchy based on these zones to identify what should be displayed where.
When testing, users reported eye fatigue when there were large blocks of bright colors on the HUD. We pivoted to muted/ transparent elements in later designs.
Mounting Brackets
We were able to determine three zone of legibility when testing text elements on the HUD. From here we started creating an information hierarchy based on these zones to identify what should be displayed where.
When testing, users reported eye fatigue when there were large blocks of bright colors on the HUD. We pivoted to muted/ transparent elements in later designs.
Mockups
These are a high fidelity design that represents a final product
High fidelity wireframes introduced the final visual design system, including typography, spacing, iconography, and progress indicators. These designs refined the structure of the planner, recipe explorer, and grocery list while maintaining a clear hierarchy of information.
User Flow
This is the primary user flow that was tested on my prototypes. The flow involves a user starting on the MealQuest app homepage and stepping through various screens to ultimately complete meals and daily quests to gain XP within the app.
Center Stack UI
It's the detailed, interactive version of designs that closely match the look and feel of the final product.
The center stack display and auxiliary displays carry most of the information related to the vehicle itself. They work in tandem with the HUD since the information being displayed on the HUD will either be work or social/ entertainment related.
All of these screens were fully built out in Figma.
HUD and UI Settings
Environment Settings
Home (General Vehicle Settings)
Map Settings
Multimedia Settings
High-Fidelity Prototype
It's the detailed, interactive version of designs that closely match the look and feel of the final product.
A high fidelity prototype was created to demonstrate the full planning workflow. The prototype simulates how users browse recipes, assign meals to specific days, generate grocery lists, and complete daily quests.
Daily Quests
Weekly Planner
Recipe Planner
Grocery List
Recipe Details
Profile Settings and Preferences
The project schematically :
Outcome
The final outcome is a high fidelity mobile application which creates an interactive and gamified experience for users wanting to get better at meal prepping and staying consistent.
Programmable Haptic Knobs
It's a structured scheme that outlines the pages and content hierarchy of the app.
The new and improved haptic knob was built completely in-house and allowed us to customize the force feedback of the knob based on certain scenarios. This means as a user steps through the UI experience, the knob can be programmed to feel different at each step of the UI.
Final HMI System
It's a structured scheme that outlines the pages and content hierarchy of the app.
The final HUD has work (orange) and rest (blue) modes to account for whether the user is actively or passively engaging with the UI. This split perspective shows a difference in information density between the two different modes on the HUD
Takeways
MealQuest demonstrates how gamification can encourage users to build consistent planning and cooking habits.
Impact:
By integrating meal planning, recipes, and grocery lists into one workflow, the concept reduces the effort required for users to organize weekly meals.
What I learned:
This project reinforced the importance of balancing engaging features with usability when introducing gamification into productivity tools.
Next Steps
Future work would focus on expanding the recipe browsing experience and creating an even better feedback loop for completing the Daily Quests.
Expand recipe recommendations based on dietary preferences
Introduce shared meal planning for households or roommates
MealQuest
Client
N/A
Year
2025
Tag
UI/UX
Duration
2 months
The project itself :
Project Overview
MealQuest is a mobile application designed to simplify the process of meal planning while encouraging healthier habits through gamification. By turning everyday planning tasks into quests and rewarding users with experience points and progress levels, the app motivates users to stay consistent with meal preparation.
Problem:
Many people want to cook more meals at home but struggle to consistently plan meals due to the time and effort required to organize recipes and grocery lists.
Goal:
Create a mobile experience that simplifies weekly meal planning while motivating users to stay consistent through light gamification and habit-building mechanics.
My role:
UX/UI Designer responsible for product concept development, interaction design, and interface design.
Responsibilities:
Defined the core product concept and habit-building experience
Designed meal planning and grocery management workflows
Created wireframes and high fidelity UI designs
Developed user flows connecting recipes, planning, and grocery lists
iterating on designs,
making high-fidelity prototype
All about the user :
Research & Insights
Research explored how people currently plan meals and shop for groceries. Many users want to cook more meals at home but abandon meal planning due to the time and mental effort required to organize recipes and grocery lists.
Pain Points
Consistency:
Users struggle to consistently plan meals for the entire week
Recipe Tracking:
Grocery lists often become disconnected from recipes and meal plans
Decision Making:
Planning meals requires significant mental effort and decision making
Insights
Work vs Rest:
A slight majority of surveyors would like to rest in a driverless car, but getting additional work done was a close second.
Visibility:
Visibility to the road is important to surveyors, so the HUD should not clutter their view.
Wasted Time:
Commute time often feels underutilized or disconnected from passengers’ goals
User Personas
The primary audience consists of busy individuals who want to cook more meals at home but struggle with planning consistency. These users value tools that reduce decision fatigue and help organize their routines.
Stakeholder Needs
At the start of our research, we listed out possible stakeholders and mapped them out based on their importance and influence to the project and relative to themselves. We made sure to note where the vulnerable populations would be, but since this project is so closely tied with the experience on the interior of the vehicle, we stayed focused on just the driver and our sponsor.
Survey
Goal
After figuring out our user group, we created a survey for Gen-Z commuters to help draw out insights that might lead to design opportunities. This survey was equipped with two different types of questions:
Current driving questions
Future thinking, Level 5 questions
Gen-Z Age Bracket
51% of Americans ages 18-29 say they would ride in a driverless vehicle if they had the opportunity. So, now we can narrow our user group further to Gen-Z commuters.
Opportunity Areas
Weekly Scheduling:
Simplify weekly meal planning through structured scheduling tools
Grocery List Ease:
Automatically generate grocery lists based on selected recipes
Gameify:
Use game mechanics to motivate consistent meal planning habits
User Journey Map
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
I developed a user journey map of a typical user's experience with planning out meals for the week to pinpoint potential pain points and identify areas for improvement.
Goal
The ideal user journey begins with planning meals for the week, selecting recipes, generating a grocery list, and completing meals throughout the week. By connecting these steps into a continuous workflow, the platform helps users stay organized and maintain healthy cooking habits.
Insights
Add initial screen:
In the beginning, before choosing a city and theater, it would be great to look through the whole app and learn everything about it.
Movie search:
There are no movie search - it's necessary to add it on the movies list page.
Buttons in account:
If user wants to change his account, he should be able to log out or delete it completely.
Insights
This is an examination of users and their needs, which adds realistic context to the design process.
First I conducted unmoderated usability studies with a few participants: they had to answer different questions about the app and share their observations while using the initial low-fi prototype. After getting the data, I analyzed it and synthesized the information obtained. Finally, I found themes and came up with several insights.
The goal was to identify pain points that the user experiences with the app designs so the issues can be fixed before the final product launches.
Work vs Rest:
A slight majority of surveyors would like to rest in a driverless car, but getting additional work done was a close second.
Visibility:
Visibility to the road is important to surveyors, so the HUD should not clutter their view.
Buttons in account:
If user wants to change his account, he should be able to log out or delete it completely.
Value Proposition
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
MealQuest transforms meal planning from a repetitive chore into a structured and rewarding habit. By integrating recipes, weekly planning, and grocery shopping into one system, the app reduces the effort required to cook consistently while motivating users through gamified progress.
Key Takeaway
A fully autonomous vehicle can give you the best of both worlds. You can have your own personal space while the car does all the driving for you.
The question then becomes: What do you do with the time you spend riding in this vehicle?
Technical Constraints
Accurate alignment between physical and digital environments was critical to the success of this system. Scan data required careful reconstruction to preserve production vehicle proportions while meeting fabrication and simulator constraints. Considerations such as driver eye point, seating position, reach zones, and mounting tolerances informed how the digital model was engineered and how physical components were integrated, reinforcing the need for a tightly coupled physical and digital reference.
I developed a user journey map of Carlos's experience with the app to highlight potential pain points and identify areas for improvement.
Goal
Choose a good movie in a cinema theatre nearby and select seats in an app in a fast and clear way
The project schematically :
Concept Development
Early concept exploration focused on structuring the core workflow of the product: planning meals, gathering ingredients, and completing meals throughout the week.
Concept Platform
These are a high fidelity design that represents a final product
At the start of the project, the team identified the 2023 Hyundai Ioniq 6 at the target platform to test this mixed reality experience.
Buck Frame
We were able to determine three zone of legibility when testing text elements on the HUD. From here we started creating an information hierarchy based on these zones to identify what should be displayed where.
When testing, users reported eye fatigue when there were large blocks of bright colors on the HUD. We pivoted to muted/ transparent elements in later designs.
Alias Interface
After capturing the interior data of the Ioniq 6 with the Artec Leo 3D scanner, this mesh data became the digital reference that the team would use for the dashboard and all surrounding geometry to work from. The scan captured accurate proportions and spatial relationships, giving us the baseline needed for downstream modeling.
Dashboard Removal
These are a high fidelity design that represents a final product
Rebuilt Surfaces
After placing the 3D scan into Autodesk Alias, we using the point data of the scan to guide the resurfacing of the Ioniq 6 interior. This shows the rebuilt surfaces in Alias.
VR Passthrough
The virtual development environment was created to support the design, testing, and evaluation of spatial interfaces while maintaining alignment with a physical interior dash model. This environment enables the simultaneous use of 3D content, interactive screens, and external development tools, allowing rapid iteration and comparison across platforms. By combining virtual and physical elements, the system serves as a mixed-reality testbed for evaluating usability, interaction methods, and system behavior in an automotive HMI context across different user groups.
Storyboards
The series of hand-drawing frames that visually describe and explore a user's experience with a product.
Storyboards were used to visualize how users would interact with the platform throughout the week, from planning meals to grocery shopping and completing daily cooking tasks.
Big picture storyboard, which focuses on the user experience. It's about how people will use the Voo's app during their day and it will be useful.
Close-up storyboard focuses on the app instead of on the user experiencing that product. Shows what happens on each screen of the app.
Initial Model (Physical)
These are a high fidelity design that represents a final product
Dashboard Render
It's a structured scheme that outlines the pages and content hierarchy of the app.
Appmap
It's a structured scheme that outlines the pages and content hierarchy of the app.
The app map illustrates how MealQuest organizes meal planning, recipes, and grocery management into a unified workflow. The structure prioritizes the daily quest system while allowing users to easily move between weekly planning, recipe exploration, and grocery tracking.
3D Scan Data
It's a structured scheme that outlines the pages and content hierarchy of the app.
We first scanned the interior of an Ioniq 6 using an Artec Leo 3D scanner. This shows the raw output of this scan.
Initial Wireframes
They initially oriented on the basic structure of the homepage and highlight the intended function of each element.
Initial sketches explored layout structures for the weekly planner, recipe browsing interface, and grocery list workflow. These sketches helped determine the most intuitive way to visualize weekly meal planning on a mobile device.
Low-Fidelity Wireframes
More "clear" version of wireframes in a digital form. Also all the important pages are added
in it.
Low fidelity wireframes translated early sketches into structured digital layouts. These wireframes focused on organizing information clearly while keeping interactions simple and easy to navigate.
Usability Studies
This is an examination of users and their needs, which adds realistic context to the design process.
Early usability testing was conducted with participants who regularly cook meals at home but do not consistently plan meals in advance. Participants were asked to plan a week's meals using the planner and generate a grocery list.
Weekly Planning:
Users easily understood the weekly planner interface and how to assign meals to specific days
Keep Grocery List:
Participants responded positively to automated grocery list generation
Quest Feedback:
Some users wanted clearer visual feedback when completing daily quests
The clear version :
Refinement
The refinement stage focused on improving clarity in the planning interface and strengthening the visual feedback associated with quest completion and progress.
3D Printing
It's a structured scheme that outlines the pages and content hierarchy of the app.
With the dashboard surfaces finalized in Alias, the next step was preparing the model for 3D printing. To accomplish this, we transitioned the design into Fusion 360, where we added material thickness, converted surfaces into solids, and introduced breakpoints to segment the dashboard based on the Formlabs Form 4L printer bed dimensions (13.9 x 7.7 x 13.8 inches).
Full Dashboard
It's a structured scheme that outlines the pages and content hierarchy of the app.
After all parts on the top half of the dash were attached together, light spackle was used to fill the seams created where parts met. This meant that now the top of the dash was one full piece. The model now fits in the lab’s buck as a 1:1 representation of a 2023 Hyundai Ioniq 6 dashboard.
Part Segmentation
These are a high fidelity design that represents a final product
Build Progression
Assembling the model after printing out all the parts was simple. A lot of time and effort went into planning the B side of the parts so that slotting and gluing the parts together was as smooth as possible.
Instrument Panel
We were able to determine three zone of legibility when testing text elements on the HUD. From here we started creating an information hierarchy based on these zones to identify what should be displayed where.
Mounting Brackets
We were able to determine three zone of legibility when testing text elements on the HUD. From here we started creating an information hierarchy based on these zones to identify what should be displayed where.
Mockups
These are a high fidelity design that represents a final product
High fidelity wireframes introduced the final visual design system, including typography, spacing, iconography, and progress indicators. These designs refined the structure of the planner, recipe explorer, and grocery list while maintaining a clear hierarchy of information.
User Flow
This is the primary user flow that was tested on my prototypes. The flow involves a user starting on the MealQuest app homepage and stepping through various screens to ultimately complete meals and daily quests to gain XP within the app.
High-Fidelity Prototype
It's the detailed, interactive version of designs that closely match the look and feel of the final product.
A high fidelity prototype was created to demonstrate the full planning workflow. The prototype simulates how users browse recipes, assign meals to specific days, generate grocery lists, and complete daily quests.
Daily Quests
Weekly Planner
Recipe Planner
Grocery List
Recipe Details
Profile Settings and Preferences
Center Stack UI
It's the detailed, interactive version of designs that closely match the look and feel of the final product.
The center stack display and auxiliary displays carry most of the information related to the vehicle itself. They work in tandem with the HUD since the information being displayed on the HUD will either be work or social/ entertainment related.
All of these screens were fully built out in Figma.
HUD and UI Settings
Environment Settings
Home (General Vehicle Settings)
Map Settings
Multimedia Settings
The project schematically :
Outcome
The final outcome is a high fidelity mobile application which creates an interactive and gamified experience for users wanting to get better at meal prepping and staying consistent.
Programmable Haptic Knobs
It's a structured scheme that outlines the pages and content hierarchy of the app.
The new and improved haptic knob was built completely in-house and allowed us to customize the force feedback of the knob based on certain scenarios. This means as a user steps through the UI experience, the knob can be programmed to feel different at each step of the UI.
Takeways
MealQuest demonstrates how gamification can encourage users to build consistent planning and cooking habits.
Impact:
By integrating meal planning, recipes, and grocery lists into one workflow, the concept reduces the effort required for users to organize weekly meals.
What I learned:
This project reinforced the importance of balancing engaging features with usability when introducing gamification into productivity tools.
Next Steps
Future work would focus on expanding the recipe browsing experience and creating an even better feedback loop for completing the Daily Quests.
Expand recipe recommendations based on dietary preferences
Introduce shared meal planning for households or roommates
MealQuest
Client
N/A
Year
2025
Tag
UI/UX
Duration
2 months
Project Overview
MealQuest is a mobile application designed to simplify the process of meal planning while encouraging healthier habits through gamification. By turning everyday planning tasks into quests and rewarding users with experience points and progress levels, the app motivates users to stay consistent with meal preparation.
Problem:
Many people want to cook more meals at home but struggle to consistently plan meals due to the time and effort required to organize recipes and grocery lists.
Goal:
Create a mobile experience that simplifies weekly meal planning while motivating users to stay consistent through light gamification and habit-building mechanics.
My role:
UX/UI Designer responsible for product concept development, interaction design, and interface design.
Responsibilities:
Defined the core product concept and habit-building experience
Designed meal planning and grocery management workflows
Created wireframes and high fidelity UI designs
Developed user flows connecting recipes, planning, and grocery lists
Research & Insights
Research explored how people currently plan meals and shop for groceries. Many users want to cook more meals at home but abandon meal planning due to the time and mental effort required to organize recipes and grocery lists.
Pain Points
Consistency:
Users struggle to consistently plan meals for the entire week
Recipe Tracking:
Grocery lists often become disconnected from recipes and meal plans
Decision Making:
Planning meals requires significant mental effort and decision making
User Personas
The primary audience consists of busy individuals who want to cook more meals at home but struggle with planning consistency. These users value tools that reduce decision fatigue and help organize their routines.
User Journey Map
I developed a user journey map of a typical user's experience with planning out meals for the week to pinpoint potential pain points and identify areas for improvement.
Goal
The ideal user journey begins with planning meals for the week, selecting recipes, generating a grocery list, and completing meals throughout the week. By connecting these steps into a continuous workflow, the platform helps users stay organized and maintain healthy cooking habits.
Opportunity Areas
Weekly Scheduling:
Simplify weekly meal planning through structured scheduling tools
Grocery List Ease:
Automatically generate grocery lists based on selected recipes
Gamify:
Use game mechanics to motivate consistent meal planning habits
Value Proposition
MealQuest transforms meal planning from a repetitive chore into a structured and rewarding habit. By integrating recipes, weekly planning, and grocery shopping into one system, the app reduces the effort required to cook consistently while motivating users through gamified progress.
Concept Development
Early concept exploration focused on structuring the core workflow of the product: planning meals, gathering ingredients, and completing meals throughout the week.
Storyboards
Storyboards were used to visualize how users would interact with the platform throughout the week, from planning meals to grocery shopping and completing daily cooking tasks.
Appmap
The app map illustrates how MealQuest organizes meal planning, recipes, and grocery management into a unified workflow. The structure prioritizes the daily quest system while allowing users to easily move between weekly planning, recipe exploration, and grocery tracking.
Initial Wireframes
Initial sketches explored layout structures for the weekly planner, recipe browsing interface, and grocery list workflow. These sketches helped determine the most intuitive way to visualize weekly meal planning on a mobile device.
Low-Fidelity Wireframes
Low fidelity wireframes translated early sketches into structured digital layouts. These wireframes focused on organizing information clearly while keeping interactions simple and easy to navigate.
Usability Studies
Early usability testing was conducted with participants who regularly cook meals at home but do not consistently plan meals in advance. Participants were asked to plan a week's meals using the planner and generate a grocery list.
Weekly Planning:
Users easily understood the weekly planner interface and how to assign meals to specific days
Keep Grocery List:
Participants responded positively to automated grocery list generation
Quest Feedback:
Some users wanted clearer visual feedback when completing daily quests
Refinement
The refinement stage focused on improving clarity in the planning interface and strengthening the visual feedback associated with quest completion and progress.
Mockups
High fidelity wireframes introduced the final visual design system, including typography, spacing, iconography, and progress indicators. These designs refined the structure of the planner, recipe explorer, and grocery list while maintaining a clear hierarchy of information.
User Flow
This is the primary user flow that was tested on my prototypes. The flow involves a user starting on the MealQuest app homepage and stepping through various screens to ultimately complete meals and daily quests to gain XP within the app.
High-Fidelity Prototype
A high fidelity prototype was created to demonstrate the full planning workflow. The prototype simulates how users browse recipes, assign meals to specific days, generate grocery lists, and complete daily quests.
Daily Quests
Weekly Planner
Recipe Planner
Grocery List
Recipe Details
Profile Settings and Preferences
Outcome
The final outcome is a high fidelity mobile application which creates an interactive and gamified experience for users wanting to get better at meal prepping and staying consistent.
Takeways
MealQuest demonstrates how gamification can encourage users to build consistent planning and cooking habits.
Impact:
By integrating meal planning, recipes, and grocery lists into one workflow, the concept reduces the effort required for users to organize weekly meals.
What I learned:
This project reinforced the importance of balancing engaging features with usability when introducing gamification into productivity tools.
Next Steps
Future work would focus on expanding the recipe browsing experience and creating an even better feedback loop for completing the Daily Quests.
Expand recipe recommendations based on dietary preferences
Introduce shared meal planning for households or roommates