Nature Foods Case Study
UX/UI
RESEARCH
BRAND IDENTITY
WIREFRAMING
PROTOTYPING
RESEARCH
BRAND IDENTITY
WIREFRAMING
PROTOTYPING
Goals
Creating an end to end product that gives users the ability to add on ingredients from saved recipes compiled from other apps like Instagram, Pinterest, and Tiktok. This product helps people prioritize healthy eating, receive recommendations for exciting new recipes, and stick to meal plans.
Problem
Buying groceries without a plan can be overwhelming and many people end up with random ingredients that don’t go together. Part of the problem is that people get bored with ordering the usual rotation or poor planning which leads to wasted food and money. Proper meal planning helps households avoid food waste.
RESEARCH
User Interview
For my research, I interviewed people ages 27-44 who currently use a grocery delivery app. Through this research I was able to identify common users behaviors and experiences with tasks which my app is trying to address, and understand their needs and frustrations as they relate to the app.
I was able to see that:
1. The majority of customers wanted be offered meal planning ideas especially for those who do not readily have extra time to research recipes.
2. They wanted to have a shortcut where they can transfer bookmarked recipes from other social media apps and directly order groceries. They also wanted to be able to save their own frequently used recipes and orders.
3. Many participants experienced wasting food from not knowing how to incorporate it into their weekly meals.
4. One user missed the in store shopping experience of coming across new items.
User Interview
For my research, I interviewed people ages 27-44 who currently use a grocery delivery app. Through this research I was able to identify common users behaviors and experiences with tasks which my app is trying to address, and understand their needs and frustrations as they relate to the app.
I was able to see that:
1. The majority of customers wanted be offered meal planning ideas especially for those who do not readily have extra time to research recipes.
2. They wanted to have a shortcut where they can transfer bookmarked recipes from other social media apps and directly order groceries. They also wanted to be able to save their own frequently used recipes and orders.
3. Many participants experienced wasting food from not knowing how to incorporate it into their weekly meals.
4. One user missed the in store shopping experience of coming across new items.
Competitive Audit
![]()
DEFINE
User Personas
I came up with personas who had varying lifestyles and personalities, which I knew would shape the way they would use the product and their goals in using the app. Mina is a working mom who’s main use for Nature Foods is to be introduced to new brands and recipes, while Payton wants less food wastage and needs help menu planning when grocery shopping, and wants to lessen her use of takeout and is more focused on healthy eating.
![]()
How Might We Statements
1. How might we bring the qualities of in store shopping to the online shopping experience?
2. How might we encourage users to branch out and try new meal ideas through the recipe feature?
3. How might we simplify the healthy meal planning process for users?
User Personas
I came up with personas who had varying lifestyles and personalities, which I knew would shape the way they would use the product and their goals in using the app. Mina is a working mom who’s main use for Nature Foods is to be introduced to new brands and recipes, while Payton wants less food wastage and needs help menu planning when grocery shopping, and wants to lessen her use of takeout and is more focused on healthy eating.
How Might We Statements
1. How might we bring the qualities of in store shopping to the online shopping experience?
2. How might we encourage users to branch out and try new meal ideas through the recipe feature?
3. How might we simplify the healthy meal planning process for users?
IDEATION
Sketches
Information Architecture
![]()
Lo- Fi Prototypes
Lo- Fi Prototypes
PROTOTYPE & TESTING
Affinity Diagram
![]()
I ran early usability tests on my lo fi prototypes and found the main revisions to implement first.
This decreased the number of iterations to the later versions with all effort being put into creating the hi-fi interface.
The version below includes iterations made mainly to the information architecture such as:
Affinity Diagram
I ran early usability tests on my lo fi prototypes and found the main revisions to implement first.
This decreased the number of iterations to the later versions with all effort being put into creating the hi-fi interface.
The version below includes iterations made mainly to the information architecture such as:
RECIPE ICON: I made the iconography consistent to represent recipes so users can easily identify.
ADD TO CART OVERLAY: I added the pop up message to let users know when a product has been added without going straight to cart.
BEFORE-> AFTER
![]()
SHOP BY RECIPE: I decided to create a multi select horizontal scroll with pill boxes instead of the round buttons to allow for more recipe categories.
BEFORE
![]()
AFTER
![]()
SOCIAL MEDIA INTEGRATION: I made changes to the Recipe page. I decided to incorporate more personalized searchable recipes, from Tiktok, Pinterest and Instagram and the option to upload your own.
![]()
RECIPE ICON: I made the iconography consistent to represent recipes so users can easily identify.
ADD TO CART OVERLAY: I added the pop up message to let users know when a product has been added without going straight to cart.
BEFORE-> AFTER
![]()
ADD TO CART OVERLAY: I added the pop up message to let users know when a product has been added without going straight to cart.
BEFORE-> AFTER
SHOP BY RECIPE: I decided to create a multi select horizontal scroll with pill boxes instead of the round buttons to allow for more recipe categories.
BEFORE
![]()
AFTER
![]()
BEFORE
AFTER
SOCIAL MEDIA INTEGRATION: I made changes to the Recipe page. I decided to incorporate more personalized searchable recipes, from Tiktok, Pinterest and Instagram and the option to upload your own.
![]()
UI Kit
CONCLUSION
Through working on this project, I learned to take the process one step at a time, trusting each component of the research process. I learned how critical each part of the process is to building the entire app. I also learned that creating as many wireframes as possible in the beginning helps to explore enough ideas so that we can find the best solution at the end.
From the Usability test, I was surprised to find out the various user needs and preferences, and I prioritized the needs of the user above all else. I had fun trying new ways to solve user problems and create a seamless user flow. An unexpected idea to come from this project was the social media integration. I found that by reducing the amount of steps required by the user to plan, it made it easier for users to achieve their health goals.