Helping people, help others


Food Runners

Role
User Research, Data Synthesis, Wireframing, Prototyping, Usability Testing
Team
Allie Taylor (UX Designer)
Aezha Casco (UX Designer)
Carlos Gonzales (UX Designer)
Food Runners is a San Francisco based non-profit organization whose mission is to alleviate hunger in San Francisco and help prevent food waste. Since 1987, they’ve been collecting excess food from businesses such as restaurants and then delivering it directly to neighborhood programs.

As part of a 2 week sprint, I led a team of 3 UX designers to redesign and simplify the Food Runner’s web experience with the objective of increasing awareness and involvement on an individual level.


View the prototype

cover image

THE PROBLEM

How can Food Runners cater to individuals?

While Food Runners has successfully created a “food rescue chain” by connecting local businesses to food programs, their reach is predominantly limited to the businesses and organizations involved. Food Runners is seeking to expand its mission to include improving people’s understanding and awareness of food waste, as well as empower individuals to get involved.

THE SOLUTION

Empowerment through awareness, education, and convenience

We re-designed the current Food Runners website to provide individuals with more meaningful information about food waste, Food Runners’ mission and programs, and easy ways to get involved. This would help establish trust and confidence in Food Runners, increase awareness, and ultimately empower individuals to get involved.

venn diagram

01Research and User Experience

USER INTERVIEWS & SURVEYS

Uncovering the barriers to involvement

Our team began research by surveying 20 participants and conducting 4 user interviews. This helped us identify the most common barriers that stop people from being involved in organizations.

Key Findings:
  • People don’t have enough time, money, and educational resources to contribute
  • People want to be more involved but are unsure where to start
  • People feel like they can’t make a difference
  • People want to validate that organizations are trustworthy and aligned with their values

Check out some of the interesting findings and statistics we gathered from our surveys and interviews below.

user statistics

USER ARCHETYPES

A deeper look into our users

Based on the patterns identified in our research, we created a main user archetype to embody the traits of our potential users.

user persona

The Outsider

Someone who is curious about preventing food waste, but is unsure where to start or how they can make an impact.

CURRENT SITE ANALYSIS

Digging to the root of our problem

We looked at the current Food Runners’ website to determine their existing areas of focus and what could be improved to address both business and user needs. We found that overall the website was more catered to businesses and organizations, instead of individuals.

So, it’s not surprising that we identified several issues that might discourage an individual from getting involved including:

  1. A lack of information and resources about the issues Food Runners is trying to tackle
  2. An inefficient food donation process
  3. Limited ways to volunteer
  4. A lack of evidence showing the impact that Food Runners has made and the impact you can have as an individual

USER JOURNEY MAPPING

Putting ourselves into the shoes of our users

In order to visualize the current Food Runners website experience from the user’s perspective, we created a series of user journey maps. We wanted these to journey maps to illustrate potential scenarios where a user might interact with the Food Runners’ website including; The process of donating food and the process of deciding whether to get involved.

Donating food experience journey map

Donating food experience

Involvement decision experience

Involvment decision experience

WIREFRAMING & USABILITY TESTING

Defining the website experience

After we defined the core functionalities that we needed to include in our solution, we created quick, low-fidelity, wireframes. Using these wireframes, we were able to conduct usability testing with 4 participants. This allowed us to gather some crucial feedback to help us decide what to include in the final experience before jumping into the next iteration of our design.

Overall users had an easy time using the website, we just needed to address a few small issues with the navigation labeling and placement of the page titles. We completed a few rounds of iterations based on testing and feedback to ensure the wireframes included everything we needed. Once the functionality of our design was finalized, we moved on to designing the UI.

Food runners wireframes

Design

Leading users to ways they can support the cause

In order to immediately catch the attention of our users, we designed a donate button as the main call to action, further highlighted by the orange color. By making the donate button easily visible, it would make it easier and more encouraging for users to contribute - bridging both the organization and user needs.



food runners

Easily accessible resources to empower and educate

In comparison to the current Food Runners’ website, we wanted to expand the focus beyond businesses and organizations to be more inclusive of individuals. In order to do so, it was important that we provided more meaningful and easily accessible information to users about the issues at hand.

One of the ways we accomplished this was by designing a “Take Action” page. Users could go could visit this page to inform themselves more about the food waste and hunger issues Food Runners is trying to tackle, as well as easy ways they can get involved to make an impact.

We also designed a blog where users could learn more about Food Runner events, stories, and other resources surrounding the issues of alleviating hunger and preventing food waste.

Take action and blog

Establishing trust and confidence

We wanted to ensure that the user would feel confident and have trust in Food Runners so we made sure to incorporate this aspect into several different features throughout the website including:

  1. Prominently displayed mission statement on the homepage
  2. “About Us” page to give users a deeper understanding of Food Runners
  3. “Our Impact” page showcasing facts and statistics about the impact Food Runners has made in the community
  4. Established list of business partners involved in the “food rescue” program
  5. “Our Stories” page featuring personal testimonials from people impacted by or involved with Food Runners

food runners

Our impact and stories

Bringing new volunteer opportunities to the table

As it stands, there are only two ways individuals can volunteer: become a “regular” food runner or an “on call” food runner. In order to motivate more individuals to contribute their time, we incorporated additional and more clearly defined opportunities to volunteer such as working as an event planner or photographer.

To further expand volunteer opportunities to everyone, we designed a section where users could inquire with their unique skills in case it wasn’t mentioned above.

volunteer page

Delivering a more streamlined food donation process

It was important that we made the food donation process more simple and efficient since our research revealed that many people lack the time to get involved. To address this barrier, we designed a section where users can search for specific food drop off locations near them instead of having to call Food Runners to get this information. These locations would then be clearly displayed as clickable location pins on a map next to the search results.

donate food page

Including Suggested Donation Amounts

We wanted to make the money donation process more simple for users that might not have a lot of time to get more involved, but still want to contribute. We redesigned the money donation page to include suggested amounts individuals could donate. Additionally, we made sure to provide a compelling and short reason why they should donate and the impact their donation would have.



donate money page

03Next Steps

Looking at the bigger picture

Moving forward with this project, I’d like to start looking at the bigger picture of how to get more individuals involved in Food Runners. This includes exploring different offline methods to raise awareness for Food Runners, and ultimately drive traffic to the Food Runners website. Possible ways this could be conducted include allowing customers to donate a meal when dining at a restaurant partner or providing more convenient food drop off locations for people who have excess food but have limited time.

04Conclusion

Learning through experiences

This project was a monumental learning experience for me in so many ways. I feel like overall our team accomplished an incredible amount of work considering our relatively short timeline of 2 weeks. I personally learned a lot about the process, collaboration, and working with non-profits. I also learned quite a bit about myself.

I’d like to highlight two things I think will have the most impact on my ongoing career and creative process:

Collaboration is key

While I do have experience working within interdisciplinary teams and leading creative direction through past jobs, this was my first time working with fellow UX designers, which brought on its own set of challenges. I had to learn to be more aware and open to constructive critique, as well as learn how to adapt to other designers’ habits and methods. I believe this project has allowed me to develop new collaboration skills that will be helpful for other projects in the future.

The importance of research

Compared to previous projects, this project was a lot more research heavy. I saw this as an opportunity to strengthen my research skills and get more involved in the process of learning about our users and their needs. Some of the methods and situations which I encountered for the first time were eye-opening and will be helpful to use moving forward in my design career.



View the prototype

Explore