End-to-End Mobile App: Happy Gut
A product designed to rekindle the joy of home cooking in every household.
Overview
Since the pandemic, there's been a notable surge in home cooking. In 2021, around 44% of U.S. respondents reported increased home cooking due to Covid-19. Happy Gut, an app dedicated to promoting healthy home cooking, curates personalized recipes aligned with users' dietary preferences and goals. This case study delves into the comprehensive design journey of Happy Gut, from ideation to the delivery of its final MVP version.
End-to-End Design
iOS App
UX Research
View Prototype
Problem
Despite the change in cooking habits, more people are experiencing difficulties with cooking healthy food.
Despite the desire for healthier eating, some lack the knowledge or skills. Quick research reveals feelings of overwhelm due to the abundance of online recipes and resources, while others cite time constraints hindering their cooking and recipe research.
Goal
Inspire home cooks to plan and prepare meals intuitively, empowering them to achieve their health goals.
The primary goal is to create an app that inspires users to choose from a variety of recipes to spark joy in cooking, provide a way to plan ahead of time, and keep track of their food-related goals and habits.
Proposed Solutions
Develop one-stop recipe app that promotes efficiency, ease of use, and sparks joy of cooking.
01 Research
Market Research
As people enter the workforce, one of the most common challenges found online was cooking meals at home while working demanding jobs. Working professionals often had desire to eat healthier, but found it difficult to juggle with other responsibilities.
Main themes that kept coming up during the initial research consisted of key words such as "lack of time", "difficulty setting a good habit", "not knowing where to start."
Quotes
"Shopping for ingredients and not knowing what to buy is frustrating. Often I get sidetracked when groceries shopping." - Quora
"It it about planning ahead as much as making it your routine. My husband and I try to make it a routine to buy the ingredients ahead of the time." - Quora
Qualitative Interviews
I conducted 4 moderated interviews with participants interested in cooking more often. One of the interviews were conducted in a form of contextual inquiry, where I interviewed the participant at her place while she was cooking. I was able to make observations on how people might use the app while they prepare their meals.
Participants:
4 participants
Age between 23 - 38
2 female & 2 male
various cooking levels
Research Goals
I addressed the topics below during the interviews. The interview questions were phrased as open-ended questions in order to get the most authentic responses, and avoid influencing users' answers.
Perception & attitude toward cooking
Factors that affect their choice of recipes
Current eating routines or habits, or any future ones they would like to develop
Where and how the users find recipes
Desire toward healthy eating
Dietary preferences/restrictions
View Interview Debrief
Extracting Key Insights
Using affinity mapping to review insights from the interviews.
Through affinity mapping, I was able to group together similar opinions and results. Based on the interviews, I found there were 4 main topics users mentioned the most.
Time
All participants mentioned time is the most important factor when deciding what to cook.
"I like to cook, but I don't always have time for it. Healthy cooking takes planning, and searching for recipes can be time-consuming." - Megan P.
Preferences
Most participants indicated they had some kind of dietary restrictions or preferences.
"I'm gluten-free, so I try to eat mostly fish. I have to be mindful of what I buy when I do groceries shopping." - Allison B.
02 Define
How Might We Questions
After synthesizing research findings and insights from interviews, I honed my focus by posing targeted How-Might-We questions. Asking strategic questions backed up with data, is pivotal in identifying the core features and functionalities to prioritize for the product.
Personalization
01. How might we help users eat according to their health conditions?
Community
02. How might we support users stay accountable and connected within a like-minded community?
Habits
03. How might we help users track their eating habits and achieve their health goals?
Learning
04. How might we support users learn essential cooking skills to cook healthy meals at home easily?
Efficiency
05. How might we support users to discover healthy recipes that are quick and easy to make?
Skills
06. How might we help users cook according to their cooking skills?
Personas
Using the data from user interviews and secondary research, I created 2 different personas that combined many qualities of my interview participants. The personas serve as a realistic reference of the users' needs, goals, and expectations. By developing these personas, I was able to identify more specific needs and frustrations of different types of users. During the design process, I continued to come back to my personas for reference and ideas.
Jackson the Eager Learner
Lily the Master Chef
03 Ideate
Feature Prioritization
Prioritizing key features based on the combination of research, user interviews, and synthesis from personas.
Questions
Personalization
01 How might we help users eat according to their health conditions?
Community
02 How might we support users stay accountable and connected within a like-minded community?
Habits
03 How might we help users track their eating habits and achieve their health goals?
Learning
04. How might we support users learn essential cooking skills to cook healthy meals at home easily?
Efficiency
05 How might we support users to discover healthy recipes that are quick and easy to make?
Skills
06 How might we help users cook according to their cooking skills?
Feature Prioritization
→
Onboarding customization
→
Community forums
→
Habit & goal tracker
→
Instruction videos
→
Recipe feed
→
Recipe filters
**I opted to deprioritize the "Community Forums" feature due to its need for extensive research on community dynamics and accountability. As this is an MVP development, I prioritized core functionalities of a recipe app. Additionally, I deprioritized the "Instruction Videos" feature due to insufficient data highlighting its importance, making it a potential 'nice-to-have' for future iterations.
Site Map & Task Flows
Defining structure with site mapping & flows.
Once I finalized the key features, I created a detailed site map to outline the app's structure comprehensively. Incorporating insights from user interviews, I introduced filters like "cooking level" and "dietary restrictions" on the filter page to enable users to personalize their searches. This visual representation of the site map not only establishes a clear information architecture but also serves as a blueprint for the app's development.
User Journey Map
In conjunction with the site map, I crafted a user journey map to illustrate the overall navigation. This visual representation offered a cohesive sequence of steps users would undertake from beginning to end. By integrating both the site map and journey map, I gained more clarity and structure as I progressed into the design phase.
Task Flows
Creating task flows for 3 primary tasks.
I developed task flows for the three core functionalities, enabling a deeper comprehension of their journey and the precise actions required within key areas of the app.
04 Design
Low-Fi Wireframes
To craft low-fidelity wireframes, I referenced task flows and user journeys to pinpoint key features and components. By understanding user steps and interactions, I identified core elements for each screen. Using my iPad, I sketched rough wireframe drafts, focusing on simplicity and ease of use. This initial visual representation captures screen structure and content, laying the foundation for design.
After sketching various versions, I sought feedback from mentors and peers to refine wireframes into mid-fidelity. This process translated conceptual ideas into tangible designs, providing a roadmap for future development.
Onboarding experience:
Experimented with horizontal/vertical layouts. Making sure to include elements such as progress bar, multiple selections, etc.
Recipe feed:
Captures 3 different versions. Changed the placement of key components and overall layout. Using card format for recipes.
Schedule recipe:
Determining information that are necessary for scheduling recipes.
Recipe calendar:
Exploring how to show recipes that are cooked and scheduled on the dates in the calendar image.
Mid-Fi Wireframes
Expanding on the insights gained from the low-fi sketches, I created digital mid-fi wireframes for the key screens. Here, I enriched the designs with additional detail and introduced brand colors and visuals to provide a more holistic impression of the app. While not yet polished to the level of high-fidelity wireframes, I ensured that these mid-fidelity versions encapsulated all core functionalities and key interactions of Happy Gut.
Style guide
Here's an overview of Happy Gut's Style Guide. I opted for green as the primary color to embody freshness, aligning with the brand's values. For the typeface, "SF Pro" was selected for its simplicity and readability, ensuring users can easily engage with recipes and other visual elements.
05 Prototype & Test
Prototyping
After crafting high-fidelity wireframes, I transitioned them into an interactive prototype to simulate the actual user experience. This allowed me to test and validate the design concept, gather feedback, and implement crucial iterations.
View Prototype
Gathering feedback and identifying points of iterations.
Key Quotes
Mare
Onboarding - “How can I define which cooking level I am? This is a bit confusing because I don’t know what factors I should consider to know my cooking level.”
Jie
Goals & habits - “What’s the point of having both goals and habits? They seem to be overlapping and it's a bit confusing.”
Kweku
Calendar - “In the recipe calendar, is there a way I can see all the ingredients for my scheduled recipes? I would like to see them at once, so I can plan out my groceries for the week.”
View Testing Debrief
These are the key findings & feedback from the user testing.
01 Recipe page - Users found the "start cooking" button unnecessary, since they can start cooking the recipe right away. Instead, they wanted an option to "schedule" for the future or mark the recipe as "cooked."
02 Habits/goals - Most users found habits and goals to be interchangeable, and rather confusing. They suggested sticking to one (either habits or goals) to simplify the purpose of the feature. Some users mentioned that for this app, habits can be more easily trackable and fitting to this app.
03 Onboarding - Some users thought the onboarding experience can be more consistent. Some screens had vertical screens, while other screens had horizontal. Unifying this will minimize cognitive load for the users.
04 Filters - Most users wanted an option to filter recipes by "cooking time." I had not included this initially
05 Calendar - Several users mentioned they would love to see an option to view all the ingredients for scheduled recipes, so they can easily view it when groceries shopping.
06 Connectivity - Some users mentioned while they appreciate the habit tracking feature, they didn't see much connection between the habit tracking and the recipe feed. "What is the actual point of tracking habits here? I can use a different app to do that."
Positive Feedback
01 Recipe feed - All the users mentioned they like the look and navigation of the recipe feed. It's simple, easy to navigate, and the filter is useful in narrowing down to a specific recipe of choice.
02 Habits/goals - Users liked the idea of "Suggested Habits" and how easy it was to add it as their own habits.
03 Onboarding - Users appreciated how thorough the onboarding customization was and how they can customize their feed based on their onboarding setting.
Key Revisions
Based on this feedback, I made the following specific iterations.
Onboarding
Before
After
Layout consistency
Updated to vertical layout to fit more information. Easier to maneuver.
Outcome
Increased UI consistency.
Less cognitive load for the users, easier to navigate.
Cooking skills
Home (Feed)
Before
After
Outcome
Users get more personalized feed.
Provides more recipes that are directly connected to their personal health goals.
Added a new section
Added recipe recommendations based on users' goals they set during onboarding.
Users can easily switch between their goals to view recipe suggestions.
Shows which filter is applied based on the tag "quick & easy."
Additional categories to explore more.
Filters
Before
After
Outcome
Increased freedom & control for users.
Delivers more refined, specific search results.
Refined filter options
Recipe time was a critical factor in choosing a recipe. Now users can filter by time.
Want to filter by equipment such as "air fryer?" Now you can!
Seasonal wasn't as popular. Instead, switched to "food type." Now users can easily sort by food group.
Added "meal type" for more granular search.
Recipe
Before
After
Outcome
By re-ordering some information, recipe page provides more comprehensive information and clearer visual hierarchy.
Primary information
Social factors like ratings and reviews are more prominent on the top.
Consistent layout in buttons.
Included essential information such as nutritional values & ingredients.
Recipe Calendar
Before
After
Outcome
More integrated use of the recipe calendar.
Increased user control & freedom.
Clarity on the calendar dates
Included indication on the circles on the calendar for better understanding.
Downloadable shopping list
Easily view & download the shopping list for scheduled recipes. (quote reference above)
Keep track of recipes
Quick summary of cooked & scheduled recipes.
My Tracker
Before
After
Outcome
Simple, more intuitive use of "My Tracker" feature.
Minimized cognitive load for users.
More straightforward "add habit" button than before.
Narrowing down on habits
Some users found habits and goals confusing. Users mentioned habits seemed more trackable and relevant. (quote reference above)
I decided to focus on "habits" only.
Progress Tracker
Tracking progress
Refined the UI of current habits.
Added visual aid for progress bar and percentage.
Users can share their progress to boost sense of community and motivation.
Outcome
Much more refined "Today's habit" page.
Enhanced UI patterns and consistency.
Included sense of accountability.
06 Final Design
Happy Gut is your go-to recipe app designed to inspire home cooks from all walks of life. Our mission is to reignite the joy of cooking and simplify healthy eating for everyone. The MVP version of Happy Gut offers three core features to assist users: personalized onboarding for presetting food preferences, a tailored recipe feed and calendar for planning, and My Tracker to monitor health-related habits. We're dedicated to enhancing your kitchen experience and providing virtual support on your journey to wellbeing.
Final prototype
Key Screens
Happy Gut was the first project where I took charge of the entire end-to-end design process. Through this case study, I honed skills in navigating constraints, conducting moderated interviews, and extracting invaluable insights from research to shape app functionalities.
I particularly enjoyed the process of user interviews. Given my personal journey with health conditions, healthy eating holds significant importance to me. Engaging in conversations with close friends and participants shed light on diverse motivations and goals surrounding healthy cooking.
If I had more time, I would do this
If I were to approach this project again, I'd conduct user testing after mid-fidelity wireframes instead of waiting until high fidelity. Testing at this stage would have allowed for earlier adjustments, minimizing time invested in the high fidelity prototype, which can be more time-consuming to modify.
I'd dedicate more time to in-depth research on motivations and accountability related to healthy eating. While I focused on providing a habit tracker feature due to time constraints, exploring accountability and community aspects would further enrich the app's functionality.
I'd explore the integration of gamification elements to encourage users to cook and schedule more recipes, enhancing user engagement and motivation.
Additionally, I'd consider adding a video feature to the recipe page to provide users with more instruction options for a more accessible design.
