Food Alert

2018 – 2019

  • Interaction design
  • Web design
  • Web development

Together with an amazing team of developers, I designed a tool to help event hosts share food with food-insecure students at the University of Washington.

Image with device mockup and a food notification,
Image with device mockup and a food notification,
Image with device mockup and a food notification,

What's the problem?

A surplus of high-quality food is often left over after catered or hosted events at the UW. No one wants to throw it away, but getting the food to those who need it most is logistically challenging.

We created a tool to help reduce food insecurity among students and others at all three UW campuses—and reduce food waste at the same time.

A graphic of design process undertook to create the food sharing tool.
A graphic of design process undertook to create the food sharing tool.
A graphic of design process undertook to create the food sharing tool.

Workflows for task understanding

Learning from research done prior to my joining the team, my project manager and I mapped out specific tasks that our two user groups would need to accomplish in the following workflows. Starting with workflows was formative for the project because it required me to focus and drill down into the key tasks that users needed to accomplish in using the site.

To ensure safety of food being shared, we made sure that our workflows included compliance with University and State food sharing policies.

Two user groups


Event hosts who want to share surplus food.


Subscribers who receive notifications when surplus food is available.

User flow diagram for event hosts.
This workflow diagrams the process of hosts using our service to send notifications when their events have surplus food.
User flow diagram for subscribers.
These workflows depict subscribers signing up for notifications and then receiving notifications.

Sketching interfaces

The workflows provided a thorough depiction of the tasks and procedures that our users would need to complete. I then sketched various ways to embody the workflows in interfaces that users would interact with.

Event hosts have to meet certain criteria in order to share their food with the public. At the UW, it means either having the food prepared by campus caterers, having a University issued food permit, or serving non-perishable or commercially pre-packaged food. One of the things I struggled with was thinking through how best to screen for these criteria with the interface.

Pictures of three sketches that I did to iterate different interfaces
A variety of sketches I did to explore different ways to design the interface and consider the transitions between pages.


I shared my sketches with the project manager for feedback and then created wireframes to iterate on layout and prioritization of space for specific content. I decided to include the actual content in the wireframes as opposed to filler text to achieve a higher fidelity appropriate for usability testing.

Image of the wireframes.
Using Figma, I created these wireframes and linked them together.

Iterating patterns

There were a number of views in our interface that I wasn’t sure how to design, or even what design would be the most effective. So I iterated over a handful of design components and got feedback from the team and other designers in our group.

Images of various design components for presenting helper text.
Exploring different ways to display helper text on items that users might be confused about.

Usability testing

After creating the prototypes, we wanted to test them to see how effective and understandable they were. I printed the designs on card-stock, created different scenarios and tasks, and tested them with seven users.

Key findings

Ambiguous form labels. Participants expressed confusion over content required from hosts on the main form page. Specifically, the food quantity and event end time were unclear to participants and needed further clarification, which the interface did not provide.

Unfamiliarity with Food Service Permits. A few participants did not know what a Food Service Permit was or when it was required. Since the interface did not provide explanation, they did not know whether or how to proceed.

Interface isn’t inordinately taxing to use. Participants reported at the end of the study that the process was straightforward and did not take more time than they expected or wanted to complete. With the exception of ambitious form labels and unfamiliar terms, the ability of the interface to support user workflows seemed to be positive.

Images of usability tests.
I printed the prototypes on card-stock and had users test the design with specific scenarios.

High fidelity designs

I implemented changes to address the findings from the usability study and then completed high-fidelity prototypes in Figma to prepare for development work. I started by creating a basic style guide which defined the typography, colors, spacing, and controls that would be used throughout the interface.

After completing the style guide, I designed the page views for the interfaces that hosts and subscribers would use. I made sure to be exhaustive in creating page views for a variety of states the system could be in (e.g., form validation messages, error states, interactive controls which change interface components).

Image of high fidelity prototypes for the host interface.
High fidelity prototypes for the host interface.
Image of high fidelity prototypes for the subscriber interface.
High fidelity prototypes for the subscriber interface.

Front-end development

Working with two developers, I helped to build out the front-end of the website with Vue.js. You can check out our GitHub repository here.

Picture of the website's code
Front-end development with Vue components!

Mobile view

Knowing that most event hosts would be accessing the service through their smartphones, we designed to be mobile first from the start.

Desktop view

We ensured that our site was compatible with current major browsers including Firefox, Chrome, Safari, and Edge.


  • Office of the Vice President for Student Life
  • Craig Stimmel
  • Aditya Kumar, Keith Roberts, Erin Rochfort, Sarthak Singh
  • Lauren Manes
  • Timothy Sun