Hyewon Son
uwcover copy 2.png

Meal Matchup

uwcover header.png

Meal Matchup


As a team of 5 designers and 3 developers, we designed and built a solution to solve food waste problem. Meal Matchup is an open-source web application that facilitates the donation of leftover food from University of Washington dining hals to local non-profits. This project is backed by UW's award winning $17,000 from Campus Sustainability Fund and will be implemented in UW dining halls in Fall 2018. 


Sept 2017- May 2018


Research, interviews, surveys, competitive analysis, UX/UI design 


Figma, InVision

problem statement

Every year, 33 million tons of "good" food is wasted in the US.

Food waste is a growing problem globally, with an increasing number of people struggling with food insecurity. University of Washington prides itself on its commitment to sustainability. While a few facilities on campus partner with organizations to reduce food waste, many others can't connect with agencies in need. 

Design Question

How might we build a tangible solution to reduce food waste while feeding people who are food insecure?


Understanding the problem space

At the outset of the project we didn’t have a clear understanding of the problem space. We conducted interviews and contextual inquiries to learn about past and existing food recovery efforts, constrains, pain points, and receptivity to using a website as a tool in aiding food recovery work. We talked to 3 dining hall managers and 5 on-campus student groups as well as phone interviews with more than 50 local food shelters.

Screen Shot 2018-11-04 at 6.47.32 PM.png
Screen Shot 2018-11-04 at 6.56.54 PM.png

Issues found from research

Screen Shot 2018-11-04 at 7.10.19 PM.png

Scattered information

There is no centralized place where all the stakeholders can see the information. Information is stored in a mixture of paper and digital form, making it hard to track or look up desired info. 

Screen Shot 2018-11-04 at 7.17.03 PM.png
Screen Shot 2018-11-04 at 7.20.33 PM.png

Inefficient communication

Dining halls currently rely on phone call and email to contact non-profits and check their availability. This process is burdensome and inefficient as they have manually to go through contact list.

Screen Shot 2018-11-04 at 7.23.06 PM.png

Lack of resources

Both dining halls and non-profits have limited capacity in terms of transportation vehicles and employees. They need additional help to support delivery and distribution.


Due to lack of resources, non-profits sometimes have to cancel the scheduled pick-ups at the last minute. Dining halls want to minimize missed donations. 

Our approach

Originally, the web platform intended to provide one-to-one connection between UW dining hall and local food banks. However, being a non-profit organization, food shelters are always in short of labor and transportation resources, making them hard to travel to UW to pick up food. To solve this, we broadened our scope and added an extra entity: the student deliverers. The ideal solution will ultimately connect all stakeholders (dining hall managers, food shelter workers, and student deliverers) and redirect food away from compost to local shelters in need.

projectgoal copy 2.png

Design goals

We identified four design goals that an ideal solution should achieve. Having these goals was helpful in prioritizing the features as well.

design goal.png

The solution

What does Meal Matchup provide?

calendarview copy.png

Key stakeholders


After addressing the needs of key stakeholders, we went into brainstorming features that help each stakeholder to complete necessary task. Then we mapped the primary flow of pick-up request system.

Stakeholder task analysis

Stakeholder task analysis

Pick-up request flow

Pick-up request flow

Low fidelity prototyping

Initial wireframes

The goal of our wireframes was to determine the content on the pages, rather than focusing on visual design. We designed 50+ screens for three stakeholders while maintaining consistency.

We consolidated IA for three stakeholders based on their primary goals. Calendar, directory and food log are universal for all stakeholders.

Having 5 designers on the team, we decided to use Figma that enables collaborative design in real-time. 

Collaborative design on Figma

Collaborative design on Figma


3 rounds of usability testing

Usability testing with food shelter manager

With the low fidelity prototypes, we conducted in-person usability tests with 21 participants including shelter managers, dining hall managers and student groups using a participatory design approach to engage them in the design and development of specific website features and the interaction flow of the site. We received feedbacks on user flow, visibility of key information and ease-of-use. These interviews took place in three rounds with findings implemented into the design after every round.

Design iteration





“The more obvious you can make it the better…we are usually distracted by 7 different things.” - Dining hall manager

Calendar was the most critical feature in the product as it displays information about upcoming deliveries. The calendar originally had a static side bar with information about the day that would update depending on the day which was clicked. This turned out to be confusing to the participants who failed to notice that the side bar populated with new information. Therefore, we iterated on the calendar and decided to pop-up the information on the selected date, which received positive feedbacks.

Visual design

Design guidelines

To ensure consistency across 50+ screens, we developed style guideline to build scalable and flexible system. The solution aims be distraction-free and simple- the style of this design places emphasis on crucial information such as upcoming pickup dates, information of logistics, and call-to-actions.

Screen Shot 2018-02-18 at 3.16.54 PM.png

Pilot testing

In May 2018, we piloted Meal Matchup with UW dining halls Local Point, The 8 and District Market and shelters Union Gospel Mission and Compass Housing Alliance and student org Green Greeks. There were a few unexpected hurdles, such as how to adapt when a partner organization experiences staff turnover. We are working toward to make the service live for any institution to adopt for their specific food recovery efforts.



Tackling a big problem. It was an enlightening experience to design a solution for such a complex problem like food waste.  We started this project with a certain image in mind and that has completely shifted. In user experience design, this is common; you have a problem, you do some research, you create a solution, test it, iterate, and then fix it based on what you find. 

Balancing different stakeholder's needs and interests. Having 3 stakeholders on the platform, it was often difficult to reflect everyone's needs in the platform. Sometimes it costed trade-offs and prioritization to make sure the solution meets the bigger goal.

Communicating information effectively. We had to present massive information in one-screen without being overwhelming to the users. We experimented with different layouts, usage of colors and UI elements to maximize legibility and discoverability of key information.