Health Planning App
My Role: UX/UI Designer
Timeline: 16 weeks
Overview
Nourish Now is an exploration into how meal and restaurant planning could increase people’s healthy outcomes in diverse circumstances.
The Challenge
People experience challenges sticking to their healthy eating goals during busy work weeks, travels and holidays.
The Solution
A nutritional app that helps people accomplish their health goals through meal and restaurant planning.
Secondary Research
I started by conducting secondary research to validate my hypothesis and gain a clear picture of the problem. Below are some highlights of my findings:
National Library of Medicine
43% of males and 37% of females report being too busy to eat healthy foods
Science Direct
122 adults went on a 1-3 week vacation, gained significant weight, and carried it for 6 weeks
APA
U.S. adults obtain 57% of their calories from ultra-processed foods
Competitor Research
I analyzed three nutritional apps to understand what is working well and what needs to be improved. I evaluated them based on Nielsen’s principles: match between the system and the real world, user control and freedom, and aesthetic and minimalist design.
MyFitnessPal
MyNetDiary
Lifesum
Survey & User Interviews
Then I sent out a screener survey to identify people for user interviews. I collected 33 responses, where 76% were female and 24% were male. I conducted 5 user interviews - I learned about their goals, struggles, and cooking and eating habits. I synthesized the data with an affinity map and identified key findings:
People struggle to find options that tailor to their diet when eating out
During busy weeks people didn’t have enough time to plan and cook meals
People generally didn’t have a system in place to make meals every week
Hypothesis Reframe
I reflected on everything I learned in my research and asked myself how might we help people:
-
Create healthy meal plans on the go?​
-
Choose food that aligns with their goals when eating out?
Empathy Mapping
I took these findings, and created an empathy map to gain a holistic view of user feelings, behaviors, pain points and needs.
Personas
With my empathy map in hand, I defined the personas to understand who the users are.
User Stories & Flows
I wrote out 34 user stories for both personas and prioritized them to determine the MVP. Then I created 3 user flows that outlined the necessary actions users would take in the app.
As a busy adult...
-
I want to have a simple meal plan so I can consistently eat healthy
-
I want to see my macro nutrients for each recipe so I can progress towards my goals
As a traveler...
-
I want to find restaurants that have healthy options so I can stay on track in my goals
-
I want to save healthy restaurants so I can easily access them later on
Sketches
I sketched out my ideas for each page of the user flows, including two versions of an onboarding flow. Below are sketches for user onboarding before entering the app.
I created a simple prototype of the sketches with Marvel to get some initial feedback. I completed Guerilla Testing with 4 participants, testing all user flows and the two different onboarding flows. The main finding was that all participants preferred the onboarding flow integrated in the app:
50% felt their personal information was more secure
explore the app on their own
less time consuming
Wireframes & Flows
I created wireframes in Figma and implemented the integrated onboarding flow. I created wireflows and annotations to show how users will navigate through the app.
User Interface
I wanted users to feel supported throughout their health journey. I chose green as the primary color because it represents health and strikes the right balance between calming and energizing. I developed the following style guide to ensure consistency:
Mockups
I applied my style guide to the wireframes and created mockups. Below are 4 of the 32 pages:
Prototype
I prototyped all mockups to give a realistic feel of the app for user testing. Here are videos for 3 user flows:
Set Goals
Create Meal Plan
Find Restaurants
Usability Testing
I conducted moderated usability testing with 4 participants and asked them to complete 6 tasks. These included signing up, customizing their account, creating a meal plan and changing a meal, and finding groceries, a restaurant, and saved restaurants.
I identified 5 items that were unclear to the user and needed to improve. Below are these findings with the before and after:
User Problem #1
Before: Users had trouble finding where to fill out goals since it wasn't in the Profile section.
After: I added a goals section to the Profile.
User Problem #2
Before: Users found nutritional targets unclear.
After: I added a confirmation page where users review their targets after completing personal information, activity levels, and goals.
User Problem #3
Before: Users did not find the button to create a meal plan clear or obvious.
After: Users can create a meal plan directly on the dashboard.
User Problem #4
Before: Users did not find the button to confirm or change a meal obvious.
After: I added a page where users can select alternate meals and confirm their choices.
User Problem #5
Before: There was no button to share a restaurant with others.
After: I included a button so users can share restaurants with friends and family.
Usability Testing #2
After iterating on my design, I got 3 new participants for this round of moderated usability testing. All participants completed the 6 tasks with ease – success! A couple new findings:
-
Include an option for users to change a meal to their own recipe and track food that is not a part of the plan
​
-
Customize the plan to how often users cook and eat leftovers
​
-
Provide additional guidance for users less familiar with nutrition and meal planning
Learnings
I learned so much! When interviewing users, asking open-ended and follow-up questions was essential to uncovering patterns and understanding the core problem. I learned how important it was to test the product – the earlier the better. Guerilla testing was so valuable before I started wireframing, and next time I’d also conduct testing after I created wireframes.
It’s also very important to be open-minded and receptive to feedback throughout the entire process. Not getting too attached to a specific idea or design was crucial in creating a user-centric product.