Nutripair
Designing an app to help people with chronic illnesses
discover better food for their needs
Introduction - What is Nutripair?
Nutripair is an early stage tech enabled health and wellness company with a mission of pairing people with personalized nutrition solutions so that we can all make better informed decisions for tackling chronic illnesses while staying on budget.
Duration: April 2021 – May 2021 (2 months)
Team: Design team of one (Startup of 6 people)
Role: User Interviews, Competitive Research & Analysis, Ideation, Information Architecture, Wireframing, Moodboard, Style Guide, Prototyping
Category: Startup Internship
Problem
How can we help alleviate the burden of finding out whether or not a certain grocery item is okay for a person with type 2 diabetes to consume?
Solution
Understand the needs of people with chronic illnesses that are impacted by food consumption
Create services that can make their grocery shopping experience easier to maintain and have their needs met.
Design Thinking Process
To pursue my role on the nutripair team, I had to understand the core of who our users would be, define their goals, and design solutions that fit their needs and frustrations of going grocery shopping.
Hypothesis:
The biggest struggle of having type 2 diabetes, is having the ability to self-manage the nutrition side, acknowledging that there needs to be much more care and thought about what to consume and what not to, and Nutripair hopes to ease the difficulty of finding foods at grocery stores that suit the needs of people with type 2 through a digital product.
Competitive Analysis
Apps like Instacart, Mealime, Cooklist, Fooducate, ibotta all have some kind of online shopping experience, recipe builder, nutrition breakdown, but none are heavily focused on chronic illnesses.
The team of Nutripair believes our business could be viable if the core of the app was centered around people with type 2 diabetes and other chronic illnesses since they are a massive audience that has to be more careful with what they put in their bodies.
1:1 User Interviews
To gain insight into the lives of people with type 2 diabetes, we needed to establish their concerns, needs, and issues with their day to day lives as well as talk to nutritionists to learn the specifics of nutritional intake that patients need to look out for.
Total patient interviews: 13
Total physician interviews: 7
Patient Insights
“I’ve got to be very careful with reading the labels of everything I touch in a grocery store.”
Nutripair can provide an educational experience that can help the shopping experience less stressful for people with type 2 diabetes.
“The macros of a certain product might look fine but the ingredients tell a different story.”
That's important of reading labels and education, on the surface a product may look healthy but its ingredients can be alerted on our app.
“When trying new products, looking at labels takes so much time.”
We can save a person time when having our own medically driven filters so that they don't look at different products for an extended amount of time.
"The closest grocery store to me doesn't really have what I need but I still shop there because the prices are convenient."
We can save a person time by showing the costs of products across various stores. Might be a bit difficult for backend but it's possible.
Physician Insights
What can we add to the criteria of our diabetes filter?
“A big problem would be the misleading of labels such as a gluten free product and how even though it doesn’t have gluten, that means it must have more of something else.”
“Biggest problem in a grocery store is a lack of good information when it comes to how to properly shop.”
“Nutrition is so individualized that at the end of the day, eating a healthy balanced diet is going to benefit almost all people”
Research Conclusion
Ultimately, we learned that our interviews did help us validate our hypothesis and define the needs of our target audience.
1. Understand how to read labels and compare products that offer different nutritional content.
2. Understand the importance of certain ingredients/nutrients in a more educational experience.
3. Compare product prices across different stores to maximize cost and time efficiency
Ideation Goal
When it came to the brainstorming stage, I needed to organize all the information we've gathered from the research and visualize their design solutions.
The first thing I did was write a few HMW's (How Might We's) to help inspire the direction of each service nutripair would plan to have in its app and prioritize them.
HMW's
Here are some of the more interesting questions that I came up with according to our user research and other thoughts I had that could pertain to the user interface.
These notes helped me discover the features that we can provide to help our target audience fulfill their needs
Sitemap
Now it's time to create information architecture, structuring the layout of what a certain feature has.
This is the sitemap for our shopping feature for the Walmart store. If a user were to shop at Walmart this would be how the experience would be structured.
User Flows
These are visual demonstrations of how the user would get from point a to b in our app for a specific goal. The ones below represent our MVP (Minimum Viable Product) and will display the journey taken to accomplish that goal.
User Flow 1: Profile Survey
The survey allows the user to create a profile dedicated to their personalized experience
User Flow 2: Add Ingredients to List & Cook Now
The 'Add Ingredients to List' flow contains most of our features, shopping with geolocation, store comparison, nutrition breakdown, recipes, and of course the personalized list.
The 'Cook Now' flow allows the user to make a recipe step by step without the use of their hands touching the phone since their hands will not be clean. This can be a reality with the help of a motion censor through the camera.
Lo-fi sketches
Moving on to the design stage, it was time for some sketches which acts as the first imagining with how the user interface will look like, with the sketches I’m not going in depth with what I’m drawing but I’m focusing on getting the user’s experience with the app’s features across
Figma Time! - Wireframes
Usually the first part would be sketches but since we were starting to get on a time crunch, I jumped straight to figma for some mid-fidelity mockups.
Onboarding - Creating a Profile
The purpose of the onboarding survey is to create a personalized experience suited for a user's needs so we thought about what information can be used to make a user-friendly UI.
Since they are looking at recipes and grocery products, it would be helpful to know their health concerns, dietary preferences, cuisines that they prefer eating or even cooking.
Discover Recipes & Cook Now Flows
Recipes are featured in the landing page of the app because intuitively, a user can buy a brunch of random products but not know what to do with them. Therefore, it's logical to have recipes be the first thing the user sees when trying to figure out what they want to eat. The user can add a recipe's ingredients on their list and they see their list with the added ingredients.
The 'Cook Now' button is on the recipe page which I thought to be intuitive since the recipe lists its ingredients, benefits, and nutritional value.
Adding Ingredients to List
If the user wants to add more products to their list, they can do so by going on one of their local stores in the app and browsing as if they were in the actual store.
Nutrition Breakdown and Personalized List
The nutrition breakdown consists of highlights that show off a product's highest qualities and of course the nutrition label to let the user know it's nutritional value. In the center of the tab menu, the user can view their personalized shopping list where they can see all their items.
The personalized list allows the user to see the various prices of items at different stores which saves the user the time of going to different stores and adding all their items individually for a repeated process.
Personalized Filters
The user's personalized filters that were created from the survey are there to further personalize the shopping experience.
Cash Back Flow
The cash back feature is to allow users save more money by uploading the receipts of their grocery store purchases and redeeming the savings that they've earned.
Interactive Prototype
Main Accomplishment
With the help of these designs, the Nutripair team was able to obtain funding from 2021 Butterworth Product Development Competition and become closer to bringing this idea to life
Key Takeaways
Communicating Designs with the Team
As part of the startup, each meeting I got the opportunity to discuss what I was working on, showing some designs and brainstorming ideas on how to proceed to the next step for the design process.
Creating a Design System
Learning to create a design system saved me time in changing any details regarding the UI cards, buttons, or drop shadows.
Things I Would Do Differently
User Testing
The biggest tradeoff of this design work was not being able to do user testing. If I could go back I would definitely test the designs to see if they fulfill the user goals.
Put More Emphasis on Education
I'd like to reiterate my work to see if I could make the experience more educational. I could do a little more research to see how other products educate their users, or if that problem can even be solved through an application like this