Case Study :

BEETS App & Responsive Website

While creating this app, my main aim is to make a recipe app that not only teaches users about the big problem of wasting food but also gives them practical tools and knowledge to help them waste less. Often, users want to find recipes for certain types of meals or specific dishes, but they might not have all the ingredients. This can lead to more waste because they might end up buying extra ingredients instead of using what they already have. Fixing this issue in the app could not only cut down on food waste but also make cooking more enjoyable for users by giving them recipes that match what they already have in their kitchen.

1. Research

 1.1. Project Overview

The problem

In the United States, a significant 30% of ingredients stocked in homes end up going to waste each year. This food wastage problem is exacerbated by the limitations of recipe apps, which often lack a convenient option to search for recipes based on the raw ingredients users have on hand. Instead, users typically find themselves needing to search for meal categories or specific dishes, which may not align with the ingredients they already possess. This inefficiency can lead to more food waste as users may resort to buying additional ingredients rather than utilizing what they already have. It's clear that addressing this gap in recipe app functionality could not only reduce food waste but also enhance the overall cooking experience for users by providing tailored recipes based on their available ingredients. 


The goal

My primary goal is to design a recipe app that will not only help users better understand the significant issue of food waste but also empower them with practical tools and knowledge to effectively reduce their own waste footprint. By fostering a strong sense of awareness and offering actionable solutions, this app aims to create a positive impact on individuals and contribute to a more sustainable approach to cooking and consumption. 


The product

The app helps users manage their food waste. College students and adults who are conscious about the food they waste and want to know more about what they can do to reduce waste are the main target users of the BEETS recipe app.


My role

UX designer designing an app for BEETS recipe from conception to delivery.


Responsibilities


Project duration

4 weeks/ March-June 2021.

1.2. Competitor Audit

Initially, I conducted research into several applications known for their prowess in ingredient search and personalization. During this exploration, I came across several services that closely aligned with the requirements of our users. Through this investigation, I identified the following key strengths exhibited by these platforms: 




TASTY





Too Good To Go


1.3. Understanding the user

I made interview questions based on BEETS recipe's food waste info, and then asked users those questions. The majority of interviewees reported having negative feelings toward food waste but did not make any conscious efforts to cut their own food waste. 

Users would be open and willing to work toward minimizing food waste if they had access to an easy-to-use tool to give them recipes based on ingredients available at home, according to the input gathered through the study.

The targeted users for this research were 4 users who are environmentally aware and are actively seeking ways to reduce their carbon footprint and limit the amount of food they waste, also enjoy trying new recipes and techniques.


James needs exciting new recipes that make tasty, easy food to cook with his daughter and make her more interested in home-cooked and healthy meals.

1.5. Ideation

In an effort to formulate strategies for addressing the gaps identified during the competitive audit, I promptly engaged in an ideation session. My particular emphasis during this brainstorming exercise was directed toward the enhancement of user experience, with a primary focus on two key aspects: improving navigational ease and streamlining the process of ingredient incorporation.

Within this ideation activity, I diligently explored various concepts and potential solutions that could effectively address the issues pinpointed in our competitive analysis. My intention was to generate innovative ideas that would bolster our platform's user-friendliness and overall appeal.

Specifically, I concentrated on simplifying the navigation process within our platform, aiming to ensure that users could effortlessly access the desired features and content. Additionally, I delved into strategies for optimizing the functionality related to adding and managing ingredients, aiming to create a seamless and intuitive experience for our users.

By dedicating attention to these fundamental components of user interaction, my goal was to lay the groundwork for a more user-centric and efficient platform. This approach was designed to cater to the diverse needs and preferences of our target audience, ultimately resulting in an enhanced user experience that aligns with our overarching objectives.

1.6.User-flows

Task 1:

From the homepage, add ingredients and search for recipe.

2. Starting the design

2.1. Usability Study Findings


I made a low-fidelity prototype in order to get it ready for testing, which you can see here. I used this prototype with 7 participants, to conduct an unmoderated usability study. The following are the key conclusions reached by the usability study:

People want quick access to recipes that use the ingredients they currently have in their kitchens.

People had difficulty adding new ingredients to the app.

2.2 Refining the design


Mockups

I made design improvements based on the findings from the usability studies, such as adding a clear section from the home screen where users may browse recipes that specifically use the ingredients they already have available.

Additional design changes included adding a “Filter” option to the “search” page.


2.3. Accessibility considerations

Clear labels for interactive elements that can be read by screen readers.

The home screen's initial focus is on personalized recommendations, helping users find the most appropriate recipes. 

Final Design

High-fidelity prototype

The high-fidelity prototype included the design changes made after the usability study. View the BEETS recipe high-fidelity prototype

2.4. Responsive Design

Sitemap

After finishing the app designs, I started to work on the responsive website design. To form a cohesive and consistent experience across devices, I used the BEETS recipe sitemap as my reference for organizing the design of each screen.

Conclusion

Regardless of the size of the issue I was trying to resolve, I carefully followed each step of the design process. Also, focusing on specific user needs helped me develop solutions that were both practical and effective.

Furthermore, by placing a strong emphasis on user-centric design, I could tailor solutions that resonated with our users on a profound level. This, in turn, increased the likelihood of our solutions being well-received and effectively addressing the specific pain points and requirements of our user base. This approach ensured that our efforts were not only technically sound but also closely aligned with the human aspect of our design, ultimately leading to more meaningful and successful outcomes.