< Back Home

UX Design, Branding

SD Harvest

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

Project

Passion Project

Project Duration

4 weeks

My Role

UX/UI Designer

The Challenge

SD Harvest is a start-up that is very concerned about food waste. They want to join in the fight against hunger by creating an intuitive and easy-to-use application that will help streamline the food donation process for all food donors. As a start-up, they do not have a well-defined brand yet and would love to develop their brand identity.

The Goal

Create a mobile app that facilitates the food donation and rescue process and develop a brand for SD Harvest. Through research, discover opportunities for SD Harvest improve the community's donation experience.

This is a speculative project completed for educational purposes.

💡

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

Research & Synthesis

Market Research

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

User & Subject Matter Expert (SME) Interviews

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

Personas & Empathy Maps

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 & Ideate

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

Task & User Flows

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 & Branding

Branding

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.

Wireframe Sketches

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.

UI Design & UI Kit

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.

Prototyping & Testing

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.

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

I had a lot of fun with this project. It was my final capstone project for my UX program as well as my first end-to-end mobile application! 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
  • OR 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.
View Final Prototype