top of page

Designing GivingFoods: an app to help people and organizations put an end to food waste.
My Role: UX Designer (research included)

Context & The Problem

I'm part of a team who serves meals to Oklahoma City's homeless community on the weekends. Some of the food we serve is donated by surrounding restaurants. Our leader communicates with participating restaurants via phone calls; she then gathers donations on her own in addition to prepping a hot meal. Knowing the amount of time this consumed, I imagined a digital solution for helping her connect with donors and other volunteers in order to collect donations more efficiently. 

 

1. Discovery 
I first conducted competitive analysis of other apps in the space to better understand and define:

* how other companies facilitate food donations

* potential users of an app in the space

* what should be included in MVP
* where there may be gaps in the existing apps

Personas

I then conducted interviews with people who participate or want to participate in providing meals to the underserved in some fashion. I was able to recruit participants easily through my immediate community. (Please see other studies in my portfolio for more on my research process.) From my research I developed two main personas, the donors and the volunteers. Once I identified main personas, I created a journey map for the volunteer persona.

Group 364 (1).png
Group 336.png
Group 335.png
Group 345 (2).png

2. Define

From my discovery work, I was able to identify themes in pain points, which helped me define what features should be shipped as part of the MVP. I decided the primary actions of the app would be:

  • Account set up / Settings 

  • Create a donation pick up request (for restaurant donors)

  • See volunteer opportunities (for volunteer drivers)

  • Review previous donations and upcoming donations

  • Chat

I also decided that for the initial MVP, I would design for only volunteer drivers as opposed to all kinds of volunteers. 

User Flows
Next I conducted a card sort to gain insights into how users might expect functions to be organized. From the results of the  card sort, I created user flows. Since I had decided the app would serve two different user types (restaurant donors and volunteers) I created user flows for each user type. 

Givingfoods 1.png

3. Ideation / Wireframing
I then went to work on my low fi wireframes. Pictured is the registration flow for a donating restaurant.

Frame 844 (1).png

4. Validate
I then created a low-fi prototype and conducted usability testing, which I discuss briefly here. Please see my other case studies for more in depth detail about my research process. I initially placed the registration steps all on one screen (shown in A). During usability testing, I found testers seemed to report a lot going on on the screen. Additionally, the wondered what else would be asked of them in the registration process. As a result, I 1. spread the registration steps out into multiple screens and 2. added a progress bar to help the user to know how much more would be required in registration (shown in B.)

A.

Frame 845.png

B.

Group 363.png

5. UI / Style Guide

I then went to work on a Style Guide. I wanted the app to feel organic and clean, but also wanted to use bright colors. 

Group 345.png

6. Hi Fi designs

Lastly, I created hi fi designs. Below I show 3 flows I designed. 

Volunteer Registration flow

Group 365.png

Donor - Create a Donation Pick up Request flow

Group 368.png

Volunteer - Claim a Pick up flow

Group 369.png

Final Thoughts

If this app were to launch, I believe it would be useful for my team to coordinate who would pick up with donations. However, I would want to consider a way to allow the donors and volunteer drivers to organize into groups, so that donation pick up posts and claims would be visible to only those in a closed group. That would enable to the app to scale to a larger user base. 

bottom of page