A Capstone Project
FOOD TRACKER APP
CASE STUDY
A lightweight food saving app allows busy working professionals to manage their food inventory.
Overview
Food waste is a well-known issue that involves everyone to some degree. This issue was selected for the Springboard UX Design capstone project to demonstrate meaningful approach to solving this issue.
Objective
The objective was to create a lightweight, flexible tool to help already busy users manage their food effortlessly. While there are many apps
and sites in the market providing solutions from cooking recipes to
inventory control, there appear to be very few addressing this issue.
The biggest challenge is to develop an effective, easy to use tool that
does not burden potential users.
MY ROLE
UX|UI Design
Research Synthesis
Prototyping
Usability Testing
Approach & Deliverables
Mentor:
Noemi Selisker (Springboard)
As a capstone project for the Springboard UX course, the task was to
provide a user-centered design solution to reduce food waste.
The project’s minimal viable product (MVP) is a Hi-Fidelity prototype
with two rounds of usability tests.
Iteration
Detail Fixing
The Process
1. Research
2. Analysis
6. Iteration
3. Ideation
4. Design
5. Feedback
Secondary Research
Primary Research
Competitive Research
Empathy Mapping
Personas
Problem Statement
User Stories
Sitemap
User Flow
Stakeholder Presentation
Guerilla Usability Testing
Usability Tests
The Process
Sketching
Wireframing
Low-fidelity Prototype
Hi-Fidelity Prototype
1. Research
How much food do we waste?
Secondary Research
“Up to 40 percent of the food in the United States is never eaten. But at the same time, one in eight Americans struggles to put enough food on the table.”
In the United States
40% of food
50% of all produce
60 million tons
$160 billion
Wasted yearly
$1600 - $2200
value of food per household that is thrown away each year in the USA.
Who waste most food?
> 40%
Households are the most significant contributor to the food waste problem in the US.
What is Available Now?
Competitive Usability Test
There are many websites and apps available regarding food waste. The majority of them focus on connecting food-related businesses to donation centers, while a small number of apps are focused on consumers, and they are generally applicable to three areas:
- Food Sharing
- Inventory Management
- Cooking and Planning
Heuristic Analysis of Competitors
The research for this project is focused on households - the most significant contributor to the food waste problem in the US. An understanding of the current product landscape, including strengths and weaknesses, was gained by reviewing and analyzing existing apps and sites related to this issue.
Five in-person interviews were conducted. Each lasted 30-45mins and
consisted of 15-20 questions revolving around the areas below:
22 Responses
5 selected
Primary Research
What Causes Food Waste in Households?
Interviews
Interviewee Qualification
Selecting the Right Interviewees - Screener Survey
Someone in charge of cooking and shopping for a family of 3 or more
Result
- What are the leading causes of food waste in a house?
- Is the amount of food waste proportional to the size of the family?
- Do people cook more and waste more?
- How much do people aware of food waste?
2. Analysis
Synthesis Findings
Affinity Map
“A lot of times, there is stuff we forgot was in there.”
“Sometimes stuff just gets jammed in, and we forgot about it.”
“I feel awful, and feel wasteful, disappointed by my waste.”
The five persons interviewed have different professional and cultural backgrounds. An affinity map was created to cluster and bundle similar insights and facts to identify their pain points.
Interview Highlights
1
They tend to overbuy food.
2
They feel limited resources challenge cooking.
3
The more planning, the more changes occur to the plan, creating waste.
4
The more ambitious they are about cooking, the more they waste.
5
They skip cooking because they are busy or feeling tired.
With the data from the affinity map, an empathy map was created in
order to visually articulate known information for particular users,
create a shared understanding of user needs, as well as, aid in
decision making in the future.
Empathy Mapping
Who are the Users
Personas
Based on the synthesis of the observations and analysis of the five interviews, four personas were created to help align strategies and identify goals that should be included to provide a good user experience.
Shared Traits:
Busy working professionals
Running household
Food waste conscious
Digital product experienced
How Might We?
Problem Statement
How might we help people to buy the right amount of food based on how much they plan to cook?
How might we encourage people to cook more often and waste less?
How might we help people to save the food they intend to cook but didn’t due to planning change?
How might we facilitate the usage of extra food by creative cooking or consumption?
How might we encourage people to cook when they are tired or in a rush?
How can we help busy people manage their fridge or pantry?
3. Ideation
Brainstorming Solutions
Solution Ideas
During the brainstorming stage, several ideas surfaced that relate to areas such as cooking, inventory, and reminders.
Remind me and show me where my food is
In the next stage, user stories were assembled to identify key functional
needs of users, as well as to identify possible solutions.
User Stories
Highlights:
Use Photos
Send Reminders
Share with Family
Site Map
A site map was created to visually demonstrate the various screens and relationships, as well as, list out the key screen’s display hierarchy within the app.
User flows, visually representing the four red routes that a user
might take through the app to achieve a goal, were used to
illustrate the minimum viable product (MVP) for this project.
Red Routes:
​
1 User On-boarding
2 Save Food
3 Retrieve Food Note
4 Sharing Food Note
4. Design
Design
“ I came home from the store, and found out I already have tomatoes in my fridge.”
“I didn’t even know it was in the fridge, feel bad that I had to throw it out.”
Sketch
User flows, visually representing the four red routes that a user
might take through the app to achieve a goal, were used to
illustrate the minimum viable product (MVP) for this project.
To simplify the screen design, a linear approach was deployed
allowing tasks to be completed in key steps, rather than creating
one-page that hosts most of the functions.
Iteration
To simplify the screen design, a linear approach was deployed
allowing tasks to be completed in key steps, rather than creating
one-page that hosts most of the functions.
Mood Board & Style Guide
The wireframes for the app consists of all four red routes. The apps basic UI was arranged, allowing for key elements, including call-to-action buttons.
Lo-Fi Wireframing
A wire flow, with all four red routes, was created to visual demonstrate
how users will interact with various components in the app.
Wire Flow
Red Routes
Red Routes
Save Food
Take a Photo
Make a Label
(optional)
Mark Location
(optional)
Create Food Note
Retrieve & Share Food Note
Reminder
Food List
Food Note
Share
5. Feedback
Testing & Iteration
Guerilla Testing
Five guerrilla testings were conducted after completion of the sketch.
Each participant was presented with the same tasks: completing the four
red routes. The goal is to discover any major blocks in the user flow.
Findings:
​
Setting up the fridge and pantry profiles as part of red routes was too long for some participants. They seemed to forget their original task after finishing this configuration.
All five of the participants ignored the calendar sign; instead, they proceeded directly to the “+” “-“ green button or “next” when arriving on the reminder screen. The prototype designed the route to go through the monthly calendar, which caused participant confusion as the sketch could not fully function on a live basis.
​
​
Solutions:
​
In the next stage of prototyping, a new flow with options to skip setting up a storage space will be included, as this is not a requirement for using the app.
To improve the testing experience, especially for those who are not from the UX field, more hotspots will be added in key screens to better mimic a live functionality of the app.
Usability Testing
Two rounds of moderated usability tests were conducted after
completion of the high-fidelity prototype with a total of 9 participants.
Each of them was given the same four red routes tasks. The aim of the
testing was to discover potential friction or design flaw.
Stakeholder Presentation
A fifteen-minute presentation of the project was conducted after two rounds of usability testing. In this presentation, the project development history from Research to Prototyping to Usability Testing, including how the UX process shaped the end product, was demonstrated.
6. Iteration
Sketch
Iteration
The Latest Prototype
Hi-Fi Prototyping
Lo-Fi Wireframes for the Latest Iteration
Several versions of the app’s UI were created with the aim of improving user experience. Some of them offer users a linear process, and some are flatter. Each iteration was an improvement to the previous version.
The biggest challenge in the UI design was in creating a minimalist approach, while at the same time delivering all the app’s essential functions.
All of the iterations started from sketches with pen and paper, then move to Lo-Fi wireframes for a better understanding of the layout. Subsequently, they were used to develop an interactive prototype.
