Nov 2020 - Jan 2021
Figma, MS Excel
UI Design & UX Research + Strategy
Identifying the Problem
and the Challenge
Defining the Goal
Understanding the Donation Process
The COVID-19 pandemic has highlighted the issue of food insecurity with many unemployed, unhoused, and low-income families struggling to meet their everyday needs. Most food insecure people rely on food drives for their meals. However, food drives are not the most convenient for many people because of the long lines and the inadequate supply of healthy, nutritious food items.
Food drives, although necessary, often fail to meet the needs of food-insecure people. From traveling long distances to visit food banks due to their scarcity, waiting in lines for hours to not receiving meals that meet dietary restrictions, people in need of food have to face great hurdles to meet their everyday basic needs. On the flip side, donating food can be a frustrating process as many find it difficult to travel to a food drive to donate or are not aware of which items they should donate, and thus end up not donating at all.
The key goals of this design are to make it more easy and accessible for food-insecure people to access fresh, healthy foods, and to streamline the process of donating food for those looking to give back to their communities.
Conducting Quantitative Survey
To better understand my user base I conducted a survey of 20 participants between the ages of 25 to 34. Out of the 20 participants, 10 were potential food donors and the other 10 were people who experienced food insecurity and were in need of receiving donations.
Donors are unsure about what food to donate
Recipients claim that food drives do not provide enough nutritious food items
Recipients have left the line at a food drive because it was too long
Developing Key Insights
From the data gathered through the survey, I developed 4 key insights to improve the donation process for both donors and recipients
Eliminate wait time. Since the majority of recipients have indicated that long lines at the food drive pose problems in obtaining food donations, eliminating wait time by streamlining the donation process will be a key feature to implement.
Inform users about food items and their nutritional value. Donors indicated that they do not have enough knowledge on what items to donate and recipients want to ensure they receive nutritious foods. Therefore, informing users what these items are through the app itself will ease the process.
Make necessary food items available. To ensure that recipients receive the exact items that they require, there should be a system put in place that allows these users to seek out such items based on availability.
Allow users to keep track of activity. In order to help donors stay motivated and on top of their donation goals, there should be features that allow them to set goals and keep track of their progress.
Understanding the Donation Process
Prior to diving further into the design process, it was important for me to first determine the logistics of the donation and pick-up process. As illustrated below, local supermarkets would act as a substitute for food drives and would be integrated into the process of QuickFoods. Due to the abundance and general accessibility of supermarkets, this would ease the food donations for both donors and recipients.
Donor creates a donation cart and finds a local supermarket
Donor travels to the local supermarket to purchase food items
Donor checks out items and leaves them to a specific section of the store for pickup
Recipient creates shopping list and finds local supermarket based on food availability
Recipient travels to local supermarket to pick up items
Recipient picks up items left earlier by the donor
After conducting research, developing key insights from the findings, and determining the donation process I began the process of developing wireframes, user flows, and prototypes.
Developing User Flow
Developing a user flow using Figma allowed me to better understand how to implement my solutions within the app
After developing a user flow, I created wireframes using ProtoPie. This gave me more structure and guidance to proceed with my app design.
I put together a design system that uses bright and inviting colors and simple iconography to reflect the brand identity of QuickFoods.
Designing an Interactive Prototype
Click on the full screen icon on the top right-hand corner to view the prototype.
Eliminate Wait Time
In order to eliminate wait time I designed a map and checkout feature. The app allows users to enter their address or location to find nearby stores. This eliminates travel time and eliminates waiting in long lines as supermarkets are much more abundant than food drives. The QR code feature is an easy way for users to checkout or pick up food.
Find stores nearby
Eliminate wait time due to abundance of supermarkets
QR code feature to checkout items
Inform Users about Food Items and their Nutritional Value
Through the “Learn More” section, users are able to browse food by category and be informed on the nutrition and health benefits of different food items. They also have the option of adding the items directly to their cart or list.
Browse food by categories
Learn about food nutrition
Add to list
Make Necessary Food Items Available
This feature, specific only for Recipients allows food-insecure people to find food items they are looking for instead of relying on what is available at their closest food drive. They can enter their address to find nearby stores for available food and then seek out items based on their availability. This is empowering for food-insecure people as it broadens their options and gives them control over the food that they consume.
Find nearby stores for available food
Seek out items based on availability
Allow Users to Track Activity
Lastly, the dashboard allows users to keep track of their donations and pickups and the amount of money spent. Donors are able to stay on top of their donation goals. Donors are also able to set goals directly through the app based on their budget to keep track of their costs.
Keep track of donations and amount of money spent
Stay on top of donation goals
Set goals based on budget to keep track of costs
This project allowed me to look at the design from the perspective of multiple user types, leading me to come up with more sophisticated solutions that benefit both. The biggest takeaway from this design process was learning how to create a product that is suitable for a large and diverse user base of varying socioeconomic backgrounds and needs.
More research, analysis, and usability testing will lead to additional problem statements and subsequent insights and solutions. Some next steps include conducting more user testing to find more pain points as well as potentially designing a website through which the supermarkets can sign up, keep inventory, etc.