CONCEPT STUDY

CRISPER

A kitchen companion app and corresponding responsive website that allows users to keep track of the food they have, find recipes based on food in their kitchen, create menus to plan ahead for making meals and create an easy-to-use shopping list. By streamlining the process from knowing what you have to planning for the week, we can reduce food waste and save money.

VIEW THE PROTOTYPE

PDF OF CASE STUDY

THE PROBLEM

Food waste accounts for half of what goes into our landfills and without the air it needs, it cannot decompose. It contributes to 11% of greenhouse gasses and removes the energy and water from the ecosystem. 45% of food waste comes from individuals who buy food that they end up tossing.

CLIENT

Entrepreneur needing visuals for a business plan in order to acquire funding.

DURATION

August-December 2021

ROLE

UX designer responsible for all aspects of the application and responsive website design from conception to delivery.

SCOPE

User research
Wireframing
Low and hi-fidelity prototyping
Accounting for accessibility
Iterating on designs

THE GOAL

Create a personal kitchen assistant that helps keep track of the food we have in our kitchens, when it will expire and suggest recipes and menus using food we already have before it goes bad.

EMPATHY

RESEARCH

Initial research was conducted regarding the impact of food waste on the environment and the role that individuals play, as well as what kinds of resources are available to people to help them curb their food waste. This included a competitive audit and user interviews. Most participants were aware of the amount of food they throw away and felt they were unsuccessful in trying to reduce it on their own. They were very positive about taking advantage of resources to help them eat the food they purchase partly because of the environmental impact, but largely to stop wasting money.

INTERVIEW PARTICIPANTS

Six subjects were interviewed ranging in age from 24 to 42. They include 3 females and 3 males, one of which is color blind.

PAIN POINTS

SAVING MONEY

All of the interview subjects felt strongly that throwing away food that wasn’t eaten equated to throwing away money and are motivated by the fact that they could save money if they would only just eat the food they had bought.

FOOD WASTE

All of the interview subjects also felt guilt about throwing away food and the impact on the environment.

TIME LOSS

The subjects also felt that sitting down to make a menu and grocery list takes a significant amount of time and they end up either not doing it and buying food at random, or being frustrated by how long they spend.

PERSONAS

EVANGELINE

“We have to make the world a better place. There’s no one else to do it for us.”

Evangaline is a young millennial who cares about the environment and needs to stop throwing away food to reduce food waste and protect the environment.

AGE

FAMILY

Single

PRONOUNS

She/Her

OCCUPATION

Computer Programmer

EDUCATION

BA in Computer Science

HOMETOWN

San Diego

GOALS

Eat the food she buys
Reduce food waste

FRUSTRATIONS

She ends up throwing away food every week which is bad for the environment
She also hates how much she spends on food that ends up in the trash

Evangaline is a recent graduate from UC and has taken a tech job in San Diego. She lives on her own in an apartment near the beach and has to uber to the grocery store, so she tries to buy food for the entire week. She always ends up throwing away food, which she hates because it is bad for the environment and bad for her bank account.

THOMAS

“Open your eyes and look around,

your life is waiting to be lived.”

Thomas is a fire fighter with a wife and three kids. His wife is a nurse and works odd hours, just like him. When he has the kids for dinner, he tries to make a healthy dinner for them, the problem is that he never knows what will be in the fridge or pantry and he hates searching for recipes that both he and his kids will eat. He needs a way to inventory the pantry/fridge and easily scan recipes that he can cook quickly.

CHARLOTTE

“What are we doing here if we aren’t
continually learning new things?”

Charlotte is a project manager in tech who doesn’t have a lot of time to spend creating menus or shopping lists or going to the store for ingredients. She usually makes the grocery list on her lunch break, but can’t remember if they already have the ingredients and ends up buying more and throwing out perfectly good food. She is also bored with the same recipes she makes each week, but doesn’t have hours to spend scrolling Pinterest.

ABAYOMI

“It is in the quiet that we
truly find ourselves.”

Abayomi is an introverted architect who stops by the grocery store and picks up ingredients haphazardly which means he doesn’t have the right ingredients for a recipe and ends up throwing away ingredients. When he does manage to make a meal, there is too much food for just himself. Then, he has trouble coming up with recipes when his partner stops by so they end up picking up fast food or grabbing frozen dinners from the freezer.

WIREFRAMES

Inventory

To tackle the problem of keeping an updated inventory, we have it set up to be able to sort and filter your list and easily update each item through an overlay. We also have options to add items via barcode, voice search and text search

Search by barcode, voice search or text search.

Easily sort and filter your list by category, alphabetical, expiration date, or location.

Quickly update each item with qty, amount left, expiration, location and info. Also learn how to properly store food for extended shelf life.

recipes

The best way to eliminate food waste is to eat the food we buy. Recipes are shown with your inventory in mind to encourage you to eat the food you already have, reducing food waste and saving money.

Search for specific recipes, show only favorites, or filter by a large number of options.

Swipe through recipes to view, swipe up to save to your menu or swipe down to delete this recipe from your feed.

Shows how many of the items needed for the recipe are in your kitchen already.

grocery list

The grocery lists are designed to make creating the list and shopping easier and more enjoyable

Separate edit/shopping mode reduces accidental deletion.

Create multiple lists and toggle between them.

Easily share your list with others.

Items are categorized to reduce time scanning your list.

As items are checked off the list, they are added to your pantry

Estimated cost when creating your list and shopping.

USABILITY STUDIES

TYPE

moderated

LOCATION

United States, remote

Participants

six (3 male, 3 female)

Length

20-30 min

ROUND 1 INSIGHTS

.labels

Users were confused by some menu labels and terminology throughout the prototype. Labels were changed to better reflect their content

Onboarding

Users were unaware that swiping would provide a better experience and make the recipe section easier to use. First-time use screens were created to help users understand how to use the app.

ROUND 2 INSIGHTS

filters

Scrolling action for the filter options frustrated users. Updated to utilize dropdowns so all options are shown on the screen at once.

progress bar

With the recipe broken into separate steps, users felt lost in the recipe screens; so, a progress bar was added to help users understand where they are in the process.

Find recipe from item

When updating items that are soon to be expired, users expressed interest in ebing able to see recipes that specifically use that item. A button was added to see these recipes.

THE SOLUTION

HOME SCREEN

Users are immediately shown the ingredients that are likely running low or expiring soon. Seeing them first keeps users engaged in updating their pantry. They are also given recipe recommendations that would use the ingredients that are going bad in the next few days.

PANTRY

The pantry section of the website is customizable to keep track of the food you have at home. By know what you have in the pantry and when it will expire, you are more likely to eat what you have before you have to throw it away, reducing food waste and saving money.

INVENTORY

Filter by category, location, expiration date and alphabetical order. Then the items are laid out in a grid format to allow for fast scanning. ofyour inventory. In order to edit a product, simply tap the item and make edits in the overlay.

INDIVIDUAL ITEM

Edit each item individually. By using icons instead of realistic images, the visual can be generic and used for multiple types of one item. You can change qty, amount remaining, expiration, location in your home, favorite brand and any notes. You can go straight to new recipes, add to your grocery list and learn how to store the item so that it can last longer.

SEARCH MODES

By allowing individuals to search by voice, it allows them to reduce the number of taps so it benefits those with physical difficulties but also saves time and makes it easier for anyone trying to inventory their kitchen.

FINDING RECIPES

Finding recipes needed to be an experience. With dating apps in mind, we set up CRISPER to be like finding your match. Swiping through each recipe means the imagery needs to be mouth-watering and visceral, but it also allows the individual to scan quickly and find the perfect recipe.

ONBOARDING

User research revealed that people were unsure that they could swipe up and down, so onboarding screens solved the problem.

SCAN RECIPES

Recipes have large, strong visual images with a descriptive name. How long it takes, calories and how many of the items are already in your pantry.

FILTER

Extensive filter options allows users to narrow down the recipes and ensure that users are scanning only recipes that are viable options.

FAVORITES

The favorites section allows users quick access to their most-used recipes to quickly add them to their menu.

FOLLOWING RECIPES

The recipes themselves need to be easy to scan and follow while simultaneously sautéing onions or chopping carrots.

OVERVIEW

The overview page includes a description and additional details about the recipe. You can also favorite and add to your menu and change the number of servings.

INGREDIENTS

The ingredient list uses icons to let users see at a glance what is included, and it also shows ingredients that the user does not have in their pantry or is running low on.

STEPS

The steps are broken down to minimize scrolling. Each step includes an option for an image, and at the bottom is a progress bar so users can see at a glance where they are.

FINISH

When a user finishes a recipe, they are prompted to favorite, update their inventory and remove the ingredients they just used, and add leftovers to their menu.

LIST

Creating a seamless kitchen experience is crucial to reducing food waste, so the grocery list is integrated into the app and make the creation as well as the shopping as easy as possible. Large key words with an option for notes about color or brand allow for quick scanning and specific details. Categorizing the items by location in the store minimizes scrolling and backtracking.

GET SHOPPING

Easily remove items by tapping the circle, share with your shopping partner, easily undo if you tap something by mistake, and know about how much you’ll be spending at a glance.

EDIT MODE

A separate edit mode makes the shopping portion easier and minimizes mistakes. In edit mode you can easily add items, see items you often add to the list, delete and change quantities.

RESPONSIVE WEBSITE

The responsive website is designed as a companion to the app. Rather than trying to recreate the app experience on a website, we’ve utilized the strength of each to give a unique but cohesive experience. The website is designed to give users more inforamtion about food waste as a serious environmental crisis and give users additional ways to help curb the amount of food that ends up in landfills.

The website’s other strength is on a desktop where users can see multiple parts of the user journey on one screen. They can search for recipes, manage their menu and update their grocery list at the same time, which is great for persona Charlotte who creates menus away from home and shops on her way home from work.

ACCESSIBILITY

Accessibility should always be integral to the designing of an application. For this application in particular, I focused particularly on single hand and limited finger mobility. Users often needed to use a knuckle or a single finger because their hands were dirty from working with food.

contrast

Using a very high contrast ratio for all text allows the app to be easier to read, making glancing at recipes while trying to cook much easier.

gestures and voice

Using voice to search for items and recipes, creating large targets for buttons and implementing swipe takes anyone with limited hand mobility or difficulty with motor skills into consideration but also makes the app easier for anyone while cooking.

dietary restrictions

A large number of filters and sorting of the recipes allows people who follow very different dietary guidelines to narrow their search and find recipes that fit their lifestyle.

NEXT STEPS

NUTRITIONAL INFORMATION

Based on feedback from participants, they would also like to see dietary and nutritional information integrated into the app and website.

INTEGRATE WITH OTHER APPS

The most difficult part of the concept is maintaining the inventory. If we could integrate data from the user’s grocery store and pull shopping information directly into the app, it would save users time.

ARTIFICIAL INTELLIGENCE

Utilizing artificial intelligence to understand the user and pull recipes and suggested shopping lists based on their previous usage would improve the experience and help them minimize food waste.