UI/UX Case Study — Foodbinge.
Foodbinge is an app that allows users to store ingredients they already own, find recipes that use those ingredients, and shop at grocery stores from the comfort of their home.
This is a junior year project worked on with a team of four members. It was my introduction to the world of UX/UI involving research, visual design, prototyping, and more.
Project Overview
Project Goals
Outside of creating a recipe, grocery, and food delivery hybrid app, our critical goals were separated in three categories. A search feature for recipes that a user wants to try. The ability to browse recipes after filtering dietary preferences, rating, and difficulty. After choosing a recipe, the user can order the necessary ingredients within the app.
Team Members
- Titionna Batista
- Sasha Smolker
- Anna Han
- Myself
My Contributions
Taking on the role as one of the UX/UI designers, I was involved in defining the brand, researching defined users and personas, creating flows and wireframes, producing low to mid fidelity mockups, all the way to independently creating the final UI design prototype.
Establishing User Experience
Defining Users
We broke down our users based on who they are, their goals, tasks in the app, and activity required to complete that goal. We created a table to demonstrate this:
Demonstrating user tasks
In order to map out user tasks, we created a persona-based scenario with three critical goals in mind.
- Search for recipes user wants to try.
- Browse recipes after filtering dietary preferences, rating, & difficulty.
- After choosing a recipe, user can order ingredients via app.
Building the Information Architecture
Task Analysis
— Think Aloud Protocol: https://youtu.be/H21lYBug4Fs
- Assessed product: Supercook
— Hierarchical Task Analysis
- Goal: User wants to find recipes
- Protocol: “Use this app to find recipes”
User Experience Design Evaluation
The FoodBinge group has learned so much by dissecting the Supercook app via Think Aloud Protocol and Hierarchical Task Analysis. We have a greater understanding of the perspective of our users and wish to develop an even better product. Thanks to our user feedback with the Think Aloud Protocol, we can understand that functionality and keeping a simple interface leads to user satisfaction . If a user cannot find a specific feature, then it creates frustration that can cause disinterest in the app. To make FoodBinge a better experience for our users, we want an app that is practical and straightforward in accomplishing their goals.
Using our Task Analysis, we were able to identify errors within Superfood’s design that we will seek to avoid. Most of the errors arose due to a lack of flexibility in design, leaving the efficiency in use of the app to dwindle as the user lost sense of what to do. We want to make a more intuitive design that gives users the most malleable experience in finding and using the app’s features to the fullest.
One example of a feature we intend to improve is the pantry item removal system. The menu to remove ingredients was hidden behind a three-button menu that possessed no label identifying its purpose. We would like to make this clearer, sections more familiar add and delete buttons that allow the user to quickly add and remove items from their ingredients and grocery lists as needed. Using comparative methods like these we intend on making the app’s display be as intuitive as possible.
Search, Sort, and Retrieval Results:
The user can search for specific recipes by stating their name in a standard search, or use the categories provided to find something that fits within those parameters.
Categories fall under large groups like Food Types for specific ingredients involved, Meal Types to limit the search to specific foods appropriate for that time of day/ meal, and then individualized categories demonstrated in the list below, such as lunches for kids, date nights, etc.
Once inside the category, the user can either search through the shown recipes or filter through content even more with more categories available. They will then be able to select from a specifically curated list to find a recipe that suits them.
Designing the interface
Creating a design stystem
Low-Fidelity Sketches
We started with some sketches in order to map out the skeleton of the app before moving to low-fidelity wireframes. This allows us to get a better grasp of the design before focusing on just one part.
The sketches kept user experience in mind with focusing on the actions of the application (such as selecting a store, adding an item to cart, and checking out).
My team wanted to focus on the main feature of the app, which is browsing groceries and recipes. This drove our decision to go with an action-oriented home screen so that users are aware of what they’re able to do.
Mid-Fidelity Wireframes
Seeking uniformity, we went back and cleaned up the design, unifying it primarily through color and changing the main structure of the home page. This new design’s intention is to share popular things prior to showing all available grocery or recipe options, essentially offering a ‘quick-click’ style of access to certain goods.
We also adjusted the structure of the initial app style to have the chosen grocery store be picked directly after the Shopper logs in or enters their Zip Code/Allows Location Services. This makes the grocery side of the app ready to use whenever they require it.
End-User Feedback
— Think Aloud Protocol: https://youtu.be/HttuyTmicyg
— Task Analysis:
Goal: Shopper wants to find recipe:
- Shopper clicks on sign up button (0:07)
- Sign up options pop up from the bottom of screen (0:08)
- Clicks “Guest/skip” button (0:13)
- Pretends to enter in zip code (0:23)
- Clicks “next” button (0:25)
- Shopper states they are looking for a recipe (0:30)
- Clicks “Recipe” button (0:30)
- Shopper decides which recipe they want — Lasagna. (0:33)
- Shopper states they love the app (end)
Error counts = 0
Improved Iteration of Design
When asked after the think aloud if there was any critique on the design the Shopper stated that it was structured in a relatively straight-forward manner, making it easy to navigate and understand. We then chose to focus on design aspects that were more cosmetic, in which he pointed out the clear differences between some of the prototype’s page designs.
Seeking uniformity, we went back and cleaned up the design, unifying it primarily through color and changing the main structure of the home page. This new design’s intention is to share popular things prior to showing all available grocery or recipe options, essentially offering a ‘quick-click’ style of access to certain goods.
We also adjusted the structure of the initial app style to have the chosen grocery store be picked directly after the Shopper logs in or enters their Zip Code/Allows Location Services. This makes the grocery side of the app ready to use whenever they require it.
High-Fidelity Prototype
Due to time constraints and COVID-19, our professor accepted our project at just the mid-fidelity but I did not want to end it there. During my free time the following summer, I created the high-fidelity prototype of the app. While following the template my team had created, I made numerous changes that still kept the main user goals in mind.
Attribution:
* Icons — monkik
* UI Components Kit — Nucleus UI
* Illustrations — cuate
Reflection
This project was my introduction to the world of UX/UI and conceptualizing a product. Designing the interface as a designer that’s part of the team made that experience even better. We spent a lot of time bouncing ideas off each other and figuring out what would make for a smooth user experience. Our research into the app’s target audience and similar apps made us understand which features to focus on. We had to make decisions based on that instead of the subjectivity suggested by one team member. Working on Foodbinge taught me that a better experience for the user leads to better designing and conceptualization of a product.
If you want to view the full PDF file pertaining to this project, click here.
Thank you so much for reading!
