Check out the interactive prototype!


How we approached and launched a new solution to maximize the return of everyday grocery budget for food-insecure families
January 2020 - Current
Google Forms, Figma, React Native

Forage is a smart-grocery list application that helps families find the cheapest option for their everyday essentials. As the Design Lead, I implemented IDEO’s Design Thinking Process to find solutions to the problems that we aim to tackle.

In addition, I led the front-end engineering team, worked on marketing materials, and developed the landing page.

Gather Inspiration

From our initial user research, we found that our government spends $63B in food stamp programs for 40 million Americans. However, millions of Americans spend all of their food stamp allowances in less than two weeks because no Food Stamp programs cover the entire needs of these food-insecure families.

The average food stamp recipient needs $3.02 per meal to cover their daily food intake

We ran a pilot test with 25 families to understand their perspectives. In addition, we created quick mockups and conducted usability testing with 5 Food Stamp recipients. From the pilot and user testing, we found that because the cost to put food on their table bleeds into their monthly budget, a lot of these families spend on average, one hour per week to optimize their grocery budget as much as possible.

Further research revealed that families enrolled in Food Stamp programs are a small subgroup of families who are food-insecure, we brainstormed on other user personas that can benefit from our solution. For our initial release, we decided to focus people who are food-insecure, specifically on Students, Parents, and SNAP recipients.

Generate Ideas

We outlined each of the user needs with "How Might We" questions (HMW). The goal of HMWs are to present the problems that the user personas face in a question format. After discussing their financial situations, grocery shopping behaviors, and their most dire needs from insights gathered from user research, we decided to focus on the following HMWs for Version 1:

  1. HMW save our users time spent on grocery planning?
  2. HMW guarantee the best price on a certain item?
  3. HMW streamline the grocery shopping experience?

Make Ideas Tangible

Solution Ideation

After defining the use cases and the HMWs, we decided to build a mobile application for the three reasons:

  1. Individuals have smartphones on them at all times
  2. Mobile online shopping has been increasing in trend
  3. Constant access to the internet results in more accurate real-time pricing data

We started with planning out the interactions and capabilities through a flow diagram to understand the requirements to achieve the improvements above at a more granular level.

Forage's initial V1 interaction flow diagram

After creating the flow, we focused on implementing the main interactions and interfaces that will achieve the improvements that the HMWs are aimed to tackle.

Saving Time Spent on Grocery Planning

We found out that our users are spending more than 1 hour per week to read through various circulars and plan out their grocery shopping for the week. Thus, Forage became a smart-grocery list planner application, serving as a central price database for all the grocery stores around the user.

Forage is a mobile application that allows the user to plan their groceries for stores around them

Guaranteeing the Best Price on a Certain Item

The challenge for this problem was that we needed to guarantee the best price for their entire grocery cart. This meant that not only were individual item prices important but also the entire cart prices as well. In V1 of Forage, we decided to focus on this experience.

To guarantee the best price on their cart, we had to:

  1. Compare different brands of a certain item by their unit price
  2. Find and compare alternatives of the items of the user's current cart at other stores around the user

If a user selects an item and our app finds a cheaper alternative, we notify them through a modal. The user can decide to either switch to the suggested alternative or keep their suggestion.

Forage suggests cheapest alternate item found when found

In the cart, the user is notified if their entire cart is cheaper at another store. They can also see the difference of their total cart prices between the different stores around them.

Forage notifies the user if they can get their items cheaper at a different store, as well as help users compare their options

Streamlining the Grocery Shopping Process

As online grocery shopping became more prominent, we wanted to find a way to allow users to plan their grocery shopping on Forage but process their payment through the grocery store of their choice. We saw Loyalty Card integrations as a potential solution: once the user is done planning their grocery cart, their cart on Forage can shift over to their personal loyalty cards of the specific grocery store. This would also help with guaranteeing the best prices as they will be able to access “members-only” pricings. This initiative is the main focus of Forage V1.1.

Designs will be released as the features go into development.

Additional Features At Work

As we move forward to becoming the must-have grocery planning application, we are ensuring that every single interaction the user has with the application is clear, succinct, and pleasant. Some additional features currently at works are: 

  1. Report incorrect transformation
  2. Show incomplete transformation
  3. Email newsletters, notifications, and marketing materials

Designs will be released as the features go into development.

Building Out the System

UI Kit

As we expand out in features, I decided that having a central UI Kit will both help design iterations and development. The UI Kit below have also been implemented as a styles folder (Color Scheme as ./styles/colors.js, Typography as ./styles/fontType.js, and Shadows as ./styles/shadows.js).

Forage V1 UI Kit


My current efforts in design systems is creating and defining components to allow faster design iterations and development as React Native is a component-based framework.

This is currently in the works and will be shared when completed.

Tell The Story

In conclusion, we started out with understanding the behaviors and perspective of the group that is food-insecure. We specifically interviewed and conducted user tests with SNAP recipients and uncovered that people who are food-insecure are spending hours planning their grocery shopping. We formulated their needs into questions that we answered through Forage: a smart grocery-planning application that guarantees the best value for their everyday essentials.

As we launch and start getting more users, we plan on reviewing various metrics, user feedback, and additional user interviews to improve the livelihood of all American families. Our vision is to solve America’s food insecurity and we’re just getting started.