Hyewon Son
uwcover copy 2.png

Meal Matchup

uwcover header.png

Meal Matchup

Overview

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. 

Timeline

Sept 2017- May 2018

Role

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

Tools

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?


Research

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
image.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.

Accountability

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.png
request.png
student_mobile.png
calendarview copy.png
 

Key stakeholders

needs.png

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


evaluation

3 rounds of usability testing

Usability testing with food shelter manager
me.jpg

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

Before

Before

After

After

“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.

5Q8A6872.jpg
IMG_4787.jpg
IMG_4784.jpg

Reflection

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.