project showcase

Food Hero

Overview

After speaking with a colleague, I learned about one on the most prominent pain points in her life- food waste. While she does not take food for granted, she often found herself buying too much and the extra going to waste. The app, Food Hero, hopes to combat food waste by engaging users to be more mindful when creating and shopping their grocery lists.

Focus

After the discovery of this pain point, more research was taken to confirm this was common among other users. Once confirmed, ideation of a simple user flow along with design execution and iterations took this concept to fruition.

01
Discovery & Research

USER INSIGHTS

At the beginning of my discovery and research, a survey was sent out to other students to see what their experience has been when they grocery shop. From the survey, individuals were followed up with a user interview. From the survey and the interviews, key trends were identified through affinity mapping:

  • "I like to keep organized by using a list"
  • "Sometimes I buy too much and the excess goes bad."
  • "I feel sad or guilty when food goes to waste."
  • "I have a general budget when shopping, but will sometimes go over."
See affinity map

COMPETITIVE ANALYSIS

For the initial research, I found that many users reported using a list of some sort while shopping. The most popular answers on which platforms users used to make lists were Samsung Notes, Apple Notes, and Google Keep.

An analysis of the popular list making platforms was conducted to see what features and elements were present on each. This would help ground Food Hero to features that would make it successful.

See full competitive and comparative analysis

USER PERSONA

From the user data, a persona was created to represent the target user. A persona is an archetypical user who represents the needs of the group as a whole. Throughout the process, this persona was there to keep me grounded in who I was designing for. From this persona, it was concluded that the design should incorporate list creation and accountability.

See full persona

DEFINING THE PROBLEM

To define the problems users face, we decided we needed to come up with some "How Might We" questions. "How might we" questions are designed to keep the focus on the right problems to solve as well as come up with creative solutions.

  • How might we prevent users from buying too many grocery items?
  • How might we reduce or eliminate a user's exposure to impulse buys?
  • How might we keep a user's grocery stock well balanced?

Once the "How might we" questions were established, a singular problem statement was created and applied to our persona:

"Sarah needs a way to stay on track at the grocery store and reduce her food waste because she wants to feel proud to support a sustainable pantry."

02
Sketching & Ideation

USER FLOWS

Before sketching, I wanted to know how a user may step through a task, or user flow. By first understanding the steps a user takes, the better I could understand how to optimize those experiences. In the flow below, one can see how a user creates a grocery list. New users would simply create a list and add info at the end of their trip. When an existing user comes back, the interface would find prior lists and prompt the user to reflect before creating a new one. The goal of this feature is to have users be more mindful of sustainability and budget as they plan out their next grocery trip.

See full user flow

SKETCHES

During the sketching phase, I came up with some ideas on how the UI could look. I wanted to design something simple- incorporating what was already familiar to users, while also adding a way to bring the accountability feature to life. Once I was satisfied with my sketches, they were digitized into Figma.

See digitized sketches
03
Narrowing & Structure

USER TESTING ROUND 1

Once the sketches were digitized, they were prototyped for user testing. User testing is a time when the product gets in front of real target users as they complete a specified task. As they interact with the app, observations of their behaviors, reactions, and feelings toward the prototype were noted. The number of errors was also recorded. For this usability test, users were tasked to create and use a shopping list.

Try the prototype

FINDINGS

From the user testing, these key findings were discovered:

  • Users felt that the process was easy to understand and intuitive.
  • Some users were confused on what "tossed" meant.
  • Some users were confused on some of the mechanics (Scanning, not seeing text after "typing").

Iterations

From the data, it was decided that these design changes needed to be made:

  • Change text to be easier to understand.
  • Show typing mechanic.
  • More explanation on why the receipt is being scanned. (Possibly in an onboarding process.)
  • Frames colorized based on further research in accessibility as well as keeping vibrancy.
04
Final Prototyping & Testing

Next Steps

This is a work still in progress.
Based on user feedback, these are the next steps moving forward:

  • Bringing the mid-fi prototype up to a high-fi version with iterations discussed.
  • A second round of user testing conducted on the high-fi prototype.
  • Using findings from the second round of user testing to make new iterations.
See progress
04
Final Prototyping & Testing

USER TESTING ROUND 2

In the second round of user testing, users were given the same task, to find an epidemiologist job on the app that is full-time and provides the accommodation of flexible scheduling. Again, observations on user behaviors, reactions, and feelings were noted. The number of errors was also compared from this prototype compared to the last.

Try the prototype

FINDINGS

From the user testing, these key findings were discovered:

  • Compared to the last prototype, more users saw and commented on the accommodations listed.
  • Users felt affirmed to see their accommodations listed clearly.
  • Users were overwhelmed by the filtering options.
  • Users want a way to ask for accommodations they don’t see listed.
  • Compared to the first prototype, user made less errors.

Iterations

From the data, it was decided that these design changes needed to be made:

  • The filter was visually overwhelming, so it was decided to update the colors to lighter, cleaner ones that were still accessible.
  • In the style guide, the colors were swapped from green to a light aqua- all while still meeting WCAG accessibility standards.
  • The filter was also designed into nested menus to aid in reducing visual overwhelm.
  • The client suggested a different icon set to represent LGBTQIA friendly and BIPOC-led businesses. New icons were produced.
  • A few elements were tweaked to be less overwhelming.
  • Frames colorized based on colors researched to be accessible.
Try final prototype

Next Steps

Based on user feedback and thinking of ways to improve, the client was given recommendations on some next steps:

  • Creating a feedback feature where job seekers can give feedback on what types of accommodations they need but don't see.
  • Revising accommodation icons to be as clear as possible.
  • Users were overwhelmed by the filtering options.
  • Using a combination of a card sorting task or research to determine which accommodations falls under which category.

Want to

work?

If you need powerful and user friendly products for your business, startup or yourself, I am available for work. You can email me directly at RebeccaLant@gmail.com

© All rights reserved – Rebecca Lant