Frame 2.png

QuickFoods App

Duration

Tools

My Role

Nov 2020 - Jan 2021

Figma, MS Excel

UI Design & UX Research + Strategy

Project Timeline

01

Overview

Identifying the Problem
and the Challenge
Defining the Goal
Project Timeline

02

Research

Survey
User Personas
Understanding the Donation Process

03

Ideate

User Flow
Wireframe
Design Assets

04

Final Designs

Prototype
Final Screens
Learnings
Next Steps

 

Overview

The Problem

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. 

The Challenge

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 Goal

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. 

 

Research

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. 

70%

Donors are unsure about what food to donate

80%

Recipients claim that food drives do not provide enough nutritious food items

80%

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 

01

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.

02

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. 

03

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. 

04

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. 

Two Main User Types

This app caters to two main user types: Donors and Recipients. 

Shopping_Isometric.png

User #1: Donor

Lunch Break_Isometric.png

User #2: Recipient

Creating User Personas

MacBook Pro - 1 (1).png
MacBook Pro - 2 (5).png

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.

Mobile Phone_Isometric.png
Shopping_Isometric.png
Online store _Isometric.png

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

Notifications_Isometric.png
Shopping cart_Isometric.png
Online shopping _Isometric.png

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

Ideate

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

Scene (12).png

Creating Wireframes

After developing a user flow, I created wireframes using ProtoPie. This gave me more structure and guidance to proceed with my app design. 

Instagram post - 2 (4).png

Design System

I put together a design system that uses bright and inviting colors and simple iconography to reflect the brand identity of QuickFoods.

Instagram post - 1 (7).png
 

Final Designs

Designing an Interactive Prototype

Click on the full screen icon on the top right-hand corner to view the prototype. 

 
Black (23).png

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.

Black (18).png

Enter address

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.

Black (19).png

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.

Black (20).png

Enter address

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.

Black (21).png

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

Key Takeaways 

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.

Next Steps

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.

View my other projects:

Group 131 (7).png

Fantasy x Fisher

Group 131 (8).png
Group 131 (6).png