UX Design, Branding

SD Harvest

Designing an end-to-end mobile app to aid in the fight against hunger

UX Design, Branding

SD Harvest

Designing an end-to-end mobile app to aid in the fight against hunger

background

Project Overview

SD Harvest is a side project that I decided to pursue after understanding the problem of food waste and hunger. I aimed to make donating food more accessible to everyone by creating a connection between non-profits and local grocery stores and facilitating the food donation and rescue process.

It is currently only in the prototype stages, but I hope to push it further through development if I get the opportunity.

Role

Lead UX/UI Designer

Team

Sole UX Designer

Duration

4 weeks

Making food donation and rescue more accessible

Every day, there is food that goes to waste. In the United States, food waste is estimated at between 30-40% of the food supply. (USDA) Grocery stores and restaurants always have food left over at the end of the day, and it tends to get thrown out. People also feel like donating food is not worth the effort for the perceived level of impact that it has on the problem of hunger as a whole.

The goal of this project was to create a mobile app that helps facilitate food donation and rescue for individuals and businesses.

💡

How might I create an app that makes food donation easy and convenient for individuals and businesses?

research

Gaining knowledge of current solutions

I conducted a competitor analysis of other non-profits with food rescue services to gain a better understanding of their strengths, weaknesses, and how they were solving the same problem. All the competitors analyzed had a similar mission: to fight against hunger and provide food for those in need. But, not all of them were doing the same thing.

Takeaways

After examining competitor solutions, sites, and brands, I discovered:

  • A food rescue app solution exists, but solely for aiding businesses donate surplus food
  • Most non-profits only let individuals donate food through organized food drives
  • Non-profit food rescue programs that did not utilize an app only allowed set up via email and phone

Listening to the people

To gain a better understanding of the user, I conducted 1:1 interviews. Due to time restraints, I interviewed 5 women between the ages of 28-50. from a variety of backgrounds. The sample was limited to friends, family, and classmates. The interviews were focused on gaining insight on the overall donation experience.

I also reached out to a food rescue program coordinator with my local food bank to get insight on how the organization partners with businesses, what type of information they provide, and how the overall donation process works. This is where I learned the most for building out the business side of the product.

Insights

  • Donating food was perceived as inconvenient, not impactful, and unclear to participants
  • Making an impact and feeling secure were important to the participants when donating
  • Pain points include lack of transparency, inconvenience, and not knowing how to help
  • Participants that donated food only did so because the opportunity was presented to them
  • Store managers are the main contact for food rescue programs, but they can only call or email to set up donations

Meet Elizabeth and Adam

I created two personas based off of my research: Elizabeth, the generous individual and Adam, the store manager. My research showed that individuals were discouraged from donating food due to lack of information and convenience. However, the research provided and my talk with the SME showed me that businesses might benefit from this application as well.

Since I couldn't speak with any store managers directly, I created a persona but did not create an empathy map or journey map due to lack of research and solid data. Instead, I pulled my reasonings from the SME interview that I conducted as well as the data provided in the project brief.

Pain Points & Opportunities

  • People feel like donating food takes too much effort for the level of impact it has
  • Having to dig through websites to find basic donation information is frustrating
  • Store managers have to contact a food rescue program multiple times in order to set up an appointment

The Generous Individual

The Store Manager

Empathy Map + Journey Map for Elizabeth

Define

Fleshing out the user journey

Now that the problems have been determined, I fleshed out the app features and roadmap. I came up with these main solutions to the problem points: 

  • Find a Donation Location feature: allows users to discover food donation locations in their area and provide resources and information about the donation process
  • Financial Donation feature: allows users to donate money to SD Harvest to support the organization and cause
  • Donation Pick-Up Appointment feature: allows business users to easily set food rescue pick-up appointments

I created three different flows for each feature. This helped me determine exactly how the feature would work. This was not a simple process and I went back to the flows multiple times throughout the design process to refine them. Here are the final iterations of the task and user flows.

Design

Creating a friendly brand

SD Harvest is a non-profit that is fighting against hunger. They wanted their brand to highlight their values which include support, community, and service. I began the design process by developing a mood board, looking at other non-profit brands, and sketching out logo ideas.

Sketching out the product screens

With the features and key screens defined, it was time to design the layout for everything. I sketched out a variety of ideas for each screen. For inspiration, I looked at mobile patterns for similar flows and played around with my own ideas. The reason I made wireframes solely on paper is because sketching allows me to get a lot of ideas out at once rather than focusing on the pixels. After sketching on paper, I went straight into the UI rather than digitizing my wireframes.

A system to guide the project further

With the brand defined, I applied these UI design choices to the wireframes to create mid-fidelity UI designs to later be prototyped and tested. I presented the screens and branding to my mentor and received feedback. This led me to make my design choices more accessible, like making sure my colors fell into an acceptable contrast ratio and ensuring all my components had established states. I also included a way for users to navigate to a location and record their donation within the application.

With all this in mind, I made a UI kit with all UI components and styles currently in use for development of future SD Harvest applications and websites.

Prototype & Testing

Listening to user feedback

Before the first round of usability testing, testing goals had to be determined. I crafted a usability test plan and created a 2 mid-fidelity Figma prototypes for remote testing. Since I had specific features and tasks to test out, I created a prototype per task so that it wouldn't be too complicated to navigate. I recruited 6 participants and gave them tasks over Zoom to complete with specific scenarios using the prototype. I observed each participant and asked follow-up questions along the way to gain more insight to their actions. Any questions or confusion about elements or buttons that weren't fleshed out in the prototype were noted.

Due to the limitations of this project, I wasn't able to test the business account flow. I was, however, able to get feedback from fellow designers on the flow. If I were to revisit this project, I would find participants that matched my Store Manager persona to test the business features.

Objectives

  • Test users' understanding of the app and its features
  • Test how easy and intuitive it is to find a drop-off location and make a food donation on the app
  • Test how easy and intuitive it is for users to make a financial donation to SD Harvest

Tasks

  1. Create an account on SD Harvest
  2. Find donation locations near you
  3. Navigate to the location and make a donation
  4. Donate money to SD Harvest

Results

Task Completion Rate

100%

Task Error-Free Rate

66%

Key Takeaways

  • Participants preferred to swipe through the onboarding rather than tap on a button
  • The "Items List" button was unclear; they weren't sure what it would reveal to them
  • Participants didn't expect the "Donation Check-In" button to send them to the QR code scanner
  • Majority of participants felt that manually filling out the donation form was too inconvenient

The information and feedback gathered from the usability tests allowed me to create an affinity map! I broke the map down by task so that it was easier to identify the problem areas and determine iterations moving forward. It helped expose common patterns and thoughts on certain parts of the application and flow.

Iterations and final prototype

With the feedback gathered from the usability tests, I made a list of changes needed to be made and prioritized them based off of importance. Then, the prototype was iterated and finalized.

Main Changes

  • Removed the manual fill-out donation form and created an autofill box that would suggest food options
  • Added a QR code icon to the "Donation Check-In" button to clarify where it leads
  • Included a preview card of nearby locations so that users know what the pins represent

Conclusion

What if I had more time?

I had a lot of fun with this project. I would love to bring this idea to life for my local community if possible because I feel that it could truly aid in the fight against hunger and push more people to give back.

Next Steps

If I was given more time to complete the project, these would be my next steps:

  • Conduct another round of usability testing with store managers to test out the business flow
  • Get the project developed, launch it, and gather analytics and feedback to make further iterations
  • Begin building a landing page for the application for marketing purposes

Lessons Learned

  • Speaking with a subject matter expert is extremely important when creating a product for an industry you aren't fully familiar with.
  • Creating an app that combines real world interactions with virtual ones is challenging.
  • Being able to discover a problem and design my own solution for it is empowering and fun.

Final Prototype

Explore the Figma prototype for yourself!

Final Prototype

Let's work together!

If you want to get in touch with me about a project,
collaboration, or just want to chat, send me a message. 💜