ChefUp: UX Case Study
Overview
What’s the issue?
This diagram depicts all the different potential major food waste drivers. I focused my research on specifically lifestyle, planning, and age.
Here’s what you need to know:
1/3 of the current global food production is wasted
there is a potential to reduce this waste by up to 63% at the household and consumer level
prevention = the most achievable method to reduce food waste
Homemade meals should be painless and easily accessible for everyone. This product aims to reduce the time and effort it takes to grocery shop, prepare, and cook for just yourself or your entire household.
In order to start generating possible solutions, I had to narrow down the problem: “How might we enhance and optimize the user’s meal planning, cooking, and grocery shopping experience?”
User Research
UI Design
Competitor Research
I conducted five user interviews to gain insight into what users are trying to accomplish and what their roadblocks to their goals are.
Prototyping
Usability Testing
Wireframing
Global food wastage.
Why is this happening?
consumers prioritize convenience
lack of cooking skills can lead to excessive or impulsive grocery purchases, which leads to – you guessed it – wastage
The Problem
“I don’t really plan before I grocery shop – I just walk through the aisles until I see something that looks good. But I usually don’t know what to do with it so it ends up expiring in my fridge.”
User Personas
““I have a family of four and we go through groceries quickly. We typically have to go to the store twice a week. It would be easier to have a plan and get all the food we need before the week starts.”
Jane and Carla represent the users I interviewed and served as my guides in the solution creation process. Let’s meet them.
Now what?
Our users’ number one priority is convenience. In building a solution we need to address the following questions:
How can users conveniently find personalized recipes?
How can users keep inventory of current groceries while plan for their next grocery trip?
How can users bridge gaps in their knowledge of cooking?
The Solution
An app that has the answer to the universal question – “What’s for dinner?”
Access one complete grocery list with all the ingredients from all the recipes
Sketching and Wireframing
After creating my user flow, I made some hand-drawn sketches to finally bring my designs to life. I created pages for the search results, recipes, and meal scheduling process.
What happened?
When asked to search for a recipe, users were unable to do so since I had forgotten to include a link to the search page!
TEAM
Sai Ravada
DURATION
3 months
ROLE
“I try to make at least one meal at home each day, but I don’t have much time to keep up with grocery shopping. On busy days – which is most days – I end up ordering in to save time.”
What are users saying?
Using the low-fi wireframes as my guide, I created these high-fidelity mockups and an interactive prototype. The next step: user testing!
Creating a meal plan
When a user wants to add a recipe to their meal plan, they can schedule it through this process. This feature allows users to plan their weekly meals ahead of time and organize everything in one place.
Creating a grocery list
Once users find a recipe that they would like to recreate, they can add all of the ingredients to their virtual grocery list with one click. If the user only needs to add a couple ingredients, they can manually do that as well. The virtual grocery list will keep track of all the ingredients from all of the recipes that the user has selected so grocery shopping can be a breeze.
High-Fidelity Mockups
Validating and Iterating
I conducted my user testing with 5 people. I met with each of them through a Zoom call, where they shared their screen and opened up the Figma interactive prototype. I observed the way they interacted with the application while they were carrying out a few tasks I asked of them.
After my first round of user testing, I noticed one major issue and a few smaller ones.
Though I had included a search button in the menu bar during my low-fidelity wireframes, I had forgotten to include it in my high-fidelity wireframes. This was a major issue and needed to be fixed immediately.
Issue #1
Easily plan and schedule your meals for the week
Searching for recipes
These screens follow a user who is searching for a recipe. From the homepage, they can either browse through suggested recipes or search for a specific one. Then, once a recipe has been chosen, they can schedule it, save it for later, or add the ingredients to their grocery list.
Redesign
To fix this issue, I moved the profile button to the upper left corner of the home page and added a search button to the menu bar. Since users’ priority when using this app will be to search, schedule, and add ingredients to the grocery cart, those 3 buttons are included in the menu bar for easy access.
During user testing, I had noticed that the calendar on the home page was pretty useless. Since there’s a button in the menu bar that will take you to your meal schedule, nobody was using the one on the home page. This is decreases usability, since it seemed to confuse users.
Issue #2
The weekly calendar on the home page had no real use. The home page is prime real estate and adding a feature there that doesn’t benefit the users or product wasn’t a good use of space.
What happened?
Redesign
To fix this issue, I decided to come up with a new feature that would improve the user experience. I added an option that allows users to set goals for themselves and placed it on the home page so users can see their progress as soon as they open the app. By gamifying this app, I hope to increase user interaction and improve their overall experience.
Final Designs
After addressing and iterating upon my main design issues, I went back for a second round of user testing. I chose five new participants and asked them to go through the same tasks that I had used for my previous round of testing.
The main issue in the last round of testing was that the process to search for a specific recipe was confusing and difficult for users. Since I had fixed that part of the design, users were easily able to navigate through the search process.
Conclusion
For me, this project really highlighted the importance of user testing and iteration. Without user testing, I was unable to see the value of specific features or how it would impact the overall user experience.
It also allowed me to see the how beneficial it is to create a thorough low-fidelity wireframe. This wireframe serves as the foundation for your whole design and I found it very important to test your potential features on it through guerrilla testing.
