Issue 1:
-
Before - Users were unsure when the icons in the navigation bar were highlighted. The icon outline color when highlighted became brown but was confused with black. The users were not sure which page they were on.
-
After - Changed the icons to the filled icon when selected.
Issue 2:
-
Before - Users were uncertain about what the “Featured” section on top of Home page which featured Breakfast, Lunch and Dinner categories. They were expecting it to be named something else.
-
After - Change the label to “Categories” to be more precise.
Issue 3:
-
Before - 20% of users thought Ingredients and Instructions were the same tab. They were not distinct enough to tell them which one was highlighted.
-
After - Highlighted selected tab with Primary color.
Process
Tools
My Role
-
Discovery
-
Ideation
-
Design
-
Testing
-
Figma
-
Sketch
-
Sole Ui UX Designer
-
8 weeks
Discovery
Ideation
Design
Testing
Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
KOHLS
Big One Juvi Bedding Collection
Year:
2021
FreshMate
Mobile App to help reduce food waste in domestic kitchens
.png)
The Pink Orange
Design & Motion Studio
Reflection
Project Duration
Discovery
Ideation
Testing
Reflection
After completing the full case study, I recognized the critical importance of each part of the user-centered process in creating a useful and intuitive product for end users. With additional time, I would conduct further usability testing and iterate on the screens to achieve an optimal design. Interviewing users was particularly enlightening, as it highlighted the shared goal of finding solutions to reduce food waste in kitchens.
This journey has equipped me with a valuable skill set and knowledge base that will serve me as a UX/UI professional. Additionally, I greatly value the personal growth and insights I gained from challenging myself in a technical area I once thought was beyond my reach. And this is just the beginning.
Design
Overview
Food waste is a big issue in the United States. It is estimated that around 30-40% of the food supply in the U.S. goes to waste.
At the consumer level, food is wasted due to overbuying, confusion about expiration dates, and improper storage.
Leftover food management can be one of the key areas that can help reduce food waste at home. FreshMate provides sustainable plant-based recipes that help reduce food waste in consumer kitchens.
The Challenge
Food waste in kitchens stems from various factors such as:
-
Overbuying or overstocking, improper storage methods that lead to premature spoilage, confusion over expiration dates, and a lack of meal planning.
-
Inefficient use of leftovers, poor portion control, and neglect of perishables also contribute to the issue.
-
Impulse purchases and a general lack of awareness about food shelf life and storage practices play a role in the unnecessary disposal of edible items.
Solution
Adopting mindful shopping habits, improving storage practices, and implementing better meal planning are crucial.
-
FreshMate helps manage inventory and allows users to shop as needed to avoid overbuying.
-
It provides sustainable plant-based recipes based on leftovers or foods nearing expiration that help reduce food waste in consumer kitchens.
-
It helps suggest recipes based on family preferences and marks them as favorites for quick navigation.
-
It allows users to connect with their local community to share excess food/ingredients to reduce food wastage.
Secondary Research
To better understand the various contributing factors leading to food wastage, I conducted secondary research. The objective of researching food waste in kitchens was to understand, quantify, and address the various factors contributing to food waste in domestic kitchens.
Some key findings were as follows:
-
The frequency of throwing away leftovers was 2-4 times a week, which suggests a recurring challenge in managing excess food.
-
Vegetables are the most commonly wasted food items, indicating a potential area for targeted strategies to reduce waste in this category.
-
Leftovers not being appealing and family preferences are the primary factors contributing to the decision to throw away food, emphasizing the importance of aligning meal plans with family preferences.
-
Memory and Pen & paper are the primary methods used to track grocery purchases, suggesting potential areas for improving tools and systems to assist in better planning and reducing waste.
-
Expiration date plays a significant role in the decision to discard items, particularly for vegetables, indicating a need for clearer guidelines and awareness around understanding expiration dates.
Primary Research
Once I had a general understanding of the issue, I wanted to gain a first-hand understanding of actual food waste in domestic kitchens. I chose to conduct a 10-minute survey because it’s a fast, cost-efficient, and effective way to gather a lot of information, with high participation rates. I wanted to specifically understand 1) how much food an average household creates and the challenges of managing leftovers 2) the most common reasons for food waste, and 3) how they plan their grocery and meals.
Survey
Using special prompts for ChatGPT, I created a screener survey to identify potential participants who cooked for their families in an average household and decided on what groceries to buy. I recruited participants who were interested in reducing food waste in their kitchens from my network and social media.
Jobs to be Done
Using ChatGpt, I analyzed the results of my secondary research and survey. In doing so, I gained an understanding about the key things my users wanted to accomplish using a food app that can help reduce food waste in kitchens.
What are they hoping to gain out of it? I created my jobs to be done to help frame these needs, into concrete statements. I concluded that they wanted to feel supported, and confident in the people they were meeting.
Competitive Analysis
To understand what functionalities and solutions were available, I conducted a competitive analysis of food waste-reducing apps. This provided me with valuable insights and prevented the need to start new ideas from scratch.
It helped me understand how people were providing solutions within this space. I chose 'My Food Ways' because of its innovative approach to using leftovers, 'Nosh' due to its ability to track food nearing expiration, and 'Kitch' due to its appeal and ease of finding recipes and integrating shopping lists by planning.
They all utilized prompts, and many pictures, focused on great recipes the user can try to help reduce food waste.
Problem Statements (HMW)
By conducting extensive secondary and primary research and utilizing tools like affinity maps, empathy maps, and personas, I created focused "How Might We" statements.
These statements were aimed at addressing the common challenges identified during participant interviews. The "How Might We" statements served as a key reference point in ensuring that the app's features and functionalities directly addressed the identified challenges.
-
How might we help consumers reduce food waste due to overbuying, impulse purchases, and improper planning and preparation?
-
How might we find a way to minimize the wastage of fruits and vegetables?
-
How might we align meal plans with family preferences to reduce food wastage due to leftovers being thrown away?
-
How might we provide solutions to plan meals with leftovers creatively?
Brainstorming
Ideation played a pivotal role in visualizing the user experience by leveraging the analysis of "How Might We" statements, personas, and affinity maps.
Through this process, a multitude of ideas were generated, providing a rich pool of possibilities to shape the UX. These ideas were then translated into visual representations, such as rough sketches and prototypes, allowing for a tangible visualization of the UX design.
I knew this part could present a creative block, so instead of focusing on figuring out an ideal solution which created a ton of pressure, I stayed true to myself and noted every single idea I had using the Crazy8 method.
Using the HMW statements helped make sure I didn’t fixate too much on one particular idea or design. If I caught myself staring at my paper too long without actually getting anything out, I’d redirect myself to get the flow going again. Starting loose and impartial gave me a great start for the later stages of ideation.
User Stories
User stories allowed me to empathize with the users by highlighting the most important features needed to resolve their issues. Because of my extensive research into this problem, I was inspired to majorly change the way food leftovers are managed in the kitchen.
As a new user...
-
I want to plan meals based on leftovers so that I can reduce wastage.
-
I want to prioritize recipes based on family preferences to create fewer leftovers.
-
I want to track the expiration of products purchased so that I can use them.
-
I want to learn how to prep all veggies and store them correctly so that I can make fresh produce last longer.
-
I want to track the amount of money wasted when throwing away leftovers so that my family is aware of money getting wasted.
-
I want to see multiple ways to cook each ingredient so that I can creatively make use of one ingredient.
Sitemap
With these ideas in mind, it was time to start building the app. The user stories provided me with a blueprint for the app's organization and feature requirements. The first step was to create the site map. This gave me a bird’s eye view of the entire app’s content, and how everything related to each other. Information needed to be grouped intuitively so information would be easily findable by users. By having the map, I can also continue building out other components of the app as more features get added.
User Flows
I created 3 user flows that were unique to this app to better understand how users would navigate through it.
Flow 1: Find an Apple recipe for Breakfast
-
This 1st action cuts straight to the purpose of finding creative ways to use an Apple that the user wants to consume in the best possible way.
Flow 2: Find a way to use Tofu nearing expiration
-
Similar to Flow 1, this action allows the user to find creative recipes for Tofu that is nearing expiration and they want to avoid throwing it away.
Flow 3: Find recipes preferred by Mom
-
This feature of finding recipes preferred by family members (Mom in this case) allows users to cook based on family preferences which will avoid food getting wasted.
Sketching
It is time to design! I added a visual aspect to the user flows in the form of sketches to see how intuitive the flows were.
This helped me envision the pathways needed to get users going on a date in a straightforward process as well as understand the actions and decisions available to the user. I used these sketches for inspiration to create the wireframes.
Wireframes
Using the sketches as a guide, I began wireframing in Figma to establish a solid foundation for the app while ensuring that all necessary features were included. To determine the essential features for each screen and follow the best practices, I drew inspiration from various apps and prototypes.
Low-fi frames consisted of a lot of placeholder imagery and text to allow me to focus on spacing, padding, and general placement. Moving into medium-fidelity, I added real text, images, labels, etc, and found there were ways to make the flows more intuitive.
I had to re-evaluate a lot of content, and placement and consider whether users would find it valuable.
Style Guide
Creating a style guide simplified life as the sole designer because it gave me a plan to follow for the HiFi screens that would keep them consistently styled. For the font, ‘Roboto’ struck the right font aesthetic with its readable, clean style, and was not overpowering to the eye when bolded.
As for my color choices, warm, and comforting tones were key to highlighting the brand’s inviting personality. I drew from the sustainable plant-based food images in the mood board, playing around with different shades of warm tones, but settling on friendly Marigold with Mocha to complement its vibrance.
Moodboard
To better understand the flavor and personality of the app, I created a mood board and brand personality. I chose the name FreshMate, because to me, the word “mate” represents a friend who will help the user consume groceries while they are “fresh”, and provide ideas to keep food fresh while reducing wastage in the kitchens. The app also helps manage inventory and allows users to shop as needed to avoid overbuying.
FreshMate, a sustainable and creative app, effortlessly reduces kitchen waste by offering delicious plant-based recipes for leftovers. Easy to use, it connects users with resourceful ideas for a greener, more mindful culinary experience. This innovative app connects like-minded individuals on a shared mission to minimize food waste.
High Fidelity Screens
Creating the face of FreshMate took multiple iterations and it was a balancing act of colors that were fun, pass contrast and appeal to both men and women. The images would prioritize the ingredient or recipe. Thoughtfully incorporating white space was also a key factor I experimented with, making adjustments to screen length and vertical scrolling, so users could easily find relevant information and not get overwhelmed with busyness. Lastly, I wanted a way to make the app fun and memorable for users. So, I incorporated a happy mascot in the form of an Orange Chef.
Prototype
I created a prototype of my application using Figma to evaluate its usability and design. The prototype brought the application to life and helped me identify and address any issues while navigating through different sections. It allowed me to experience the design as if it were a real application, providing valuable insights into how users would interact. This hands-on approach helped me understand the functionality better and make improvements to enhance the user experience.
Usability Testing
It’s important to test your designs with actual users to find out if the app is easy to use and intuitive, and if its intended purpose is recognized by the user. The main objectives of the usability testing include:
-
Gain the initial impressions of the UI
-
Determine if the flow is simple for users to navigate
-
Identify if the user can navigate the three red routes
I conducted five in-person usability tests. Participants were recruited using remote moderated user testing. The test included anyone who cooked for their families in an average household, decided on what groceries to buy, and was interested in reducing food waste in their kitchens.
Participants were asked to complete the following tasks
(1) Find an Apple recipe for Breakfast
(2) Find a way to use Tofu nearing expiration
(3) Find recipes preferred by Mom.
Findings
During my findings, I observed critical issues where users were confused whether a particular navigation icon was highlighted or not when selected, making it unclear which page they were on. I also noticed users struggling to find recently viewed recipes on the homepage for quick navigation. Instead, they had to trace back all steps.
After usability testing, I analyzed the data to prioritize critical and major issues and began my redesign to improve usability.
