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
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.
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.
Issues found from research
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.
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.
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.
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.
We identified four design goals that an ideal solution should achieve. Having these goals was helpful in prioritizing the features as well.
What does Meal Matchup provide?
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.
Low fidelity prototyping
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.
3 rounds of usability testing
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.
“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.
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.
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.