CoolCrate

CoolCrate is a food management app that makes it easy to collaborate with others and keep track of inventory, expiration dates, and more.

Client

Matcha

Role

UX/UI Designer

Duration

10 weeks

Problem

For my IN4MATX 132 course project, I joined a team of fellow student designers to design the UX and UI of an app that would address a common problem.

A common problem that exists is that people tend to forget to eat the food in their fridge and pantry. They buy it, store it, forget it, and eventually throw it out days after their expiration dates. This is especially true when they overbuy due to forgetfulness. Overall, this leads to an incline in food waste and we aim to reduce it.

solution

Our student formed group, Matcha, designed CoolCrate, a food manager app that helps individuals and organizations that have pantries to minimize food waste by managing and tracking the food in their fridge using timely notifications on expiration dates, enabling customizable labels for groups, and suggesting recipes for soon-to-be expired products. The goal of the project was to design the UX and UI of the app.

Comparative Analysis

To begin our journey, I helped conduct a comparative analysis of a few pre-existing food management apps. I dove into some apps, like Fridgely, and found that they shared similar important features: warnings for expiring food, barcode scanning, and shopping lists.

We integrated the features they lacked to Coolcrate:

grouping/labeling foods based on ownership
predictive tracking of and suggestions based on one's consumption.

A table of selected food management apps and their features. The rows represent the apps and the columns are the mainstream features for apps in their category. For every feature an app has, a star is placed.

User Research

Survey and Feedback

In order to gain insight on users' motivations, wants, and challenges, as well as feedback on food management apps that they may have used, we sent out a survey, via Google form.

Key Findings

Through this process, I found that many users wanted:

Reminders for soon-to-be expired food
Ability to give housemates ownership through labeling
Suggested recipes based on current inventory
Shopping lists

Based on the feedback, CoolCrate's functionality was revised to include these features.

The google form survey for the user research. It includes questions about the responder and their level of concern for food waste.

User Personas

Primary

After sending out the survey, personas were created to represent the feedback. In this process, I created primary persona, Bianca, to convey the users' need for an app that can keep track of inventory digitally and equally for all members of a shared fridge/pantry. This persona stresses the collaborative functionality of CoolCrate, which allows each member of a shared fridge to know what food belongs to them.

Sketches

Each of us created our own sketches for the app and came together to share ideas and concepts we liked from different designers with accessibility and experience in mind. During the sketching process, I considered the original functionality of the app and implemented it with the findings from the user research.

My sketches for CoolCrate's pages:

Login
- Users should be able to login to the app through a login page that allows them to sign up when they don't have an account, enforce app to remember user, and change password when it's forgotten.
Pantry inventory
- I set soon-to-be expired foods as priority by placing it at the top of the page and the list of all items at the mid-lower section.
User profile
- I believed it would be informative for the profile page to have diagrams that display percentages of the amount of food saved/wasted.
Shopping list
- Users should have control on creating multiple different kinds of shopping lists.
Recipes
- Based on the items in their pantry, recipes should be suggested to the user with options of seeing the online ratings and filtering the results by type of meal (e.g. brunch)

Lo-Fi Wireframes

The next step was to transform the sketches into low fidelity wireframes. Each took responsibility for designing one main page and other additional pages that would accompany it.

My main responsibility was to design the wireframes regarding recipes. In this process, I envisioned the main recipe page to have features like sorting and filtering, searching, and saving recipes to collections. Through these features, the user will have a variety of options that will enable searching for recipes easier; thus, they're able to reduce food waste in their fridges/pantries.

Page for user's current inventory. On the page, each user in a shared pantry has their own list of items. At the top, there is a search bar, and delete and filter button for deleting and/or filtering items.

Page for scanning products' barcodes. Gray rectangle box is intended for using the camera, and below it is the "Add Manually" button.

Shopping list page with filters at the top, current shopping list with check boxes at the midsection, and suggested items to add based on expiration date and recent purchases at the bottom.

Recipes page with filters and a separate filters button at the top, dropdown for sorting and 4 rectangles to portray recipes at the mid-bottom section. Each grayed rectangle includes cooking time, save to collections button, recipe name, and online rating.

Mockups

Finally, after deciding on the color scheme and logo that would fit best for our app, mid to high fidelity mockups were designed and iterated to get our final prototypes.

I refined the recipe pages and their functionality by having important details pop in color. During the iterations, I added a mockup to display what each recipe would look like when clicked on. On that, it would show further details about the recipe, such as the ingredients and cooking instructions. To ensure ease of use and reduce unnecessary scrolling, I added a toggle button for switching between the ingredients and instructions page.

Pantry

LogIn

Scan

List

Recipes

Overview

Reflection

I learned a lot about the process of UI/UX design as this was my first project working with a team to design the UI and functionality of a product. I was involved in the user research, sketching and designing of wireframes and mockups, and the prototyping of an app; therefore, I developed an appreciation for the necessary processes leading to a product solution. During this project, I had one of my first exposures to using Figma and I plan to continue learning its tools for future projects that may require more complex designs. Overall, I hope to gain more experience working in design projects and apply what I learned to improve my skills.

FOLN

Bee on time