Food Grab

Food Grab is a food locker takeout service aimed at reducing risk of COVID-19 transmission between local restaurant employees and customers.

OVERVIEW

The COVID-19 pandemic has posed new challenges to restaurants in University District, Seattle. Despite health safety measures, restaurant employees are still at greater risk of infection, so we designed a solution which protects employees without disrupting regular business operations.

This project was completed as a part of a user-centered design course at University of Washington in Winter 2022.

Team Members

Ashley Vu, Austin Yung, Daniel Lin

Duration

10 weeks

THE PROBLEM

COVID-19 has significantly impacted the dining industry in University District. Fulfilling take-out orders requires face-to-face contact with hundreds of customers each day, placing restauranteurs at greater risk of infection.

This makes running a restaurant during COVID-19 a dangerous job in which employees risk their health to sustain their businesses.

DESIGN QUESTION

How might we minimize the risk of infection to restaurant employees in University District so they can focus on growing their businesses?

RESEARCH

Interviews

First, our team conducted 3 semi-structured interviews with restaurant employees on University Way. The purpose of our interviews was to understand of our users' motivations, pain points, and processes.

Research Findings

01. Takeout orders present health hazards to restaurant employees

Due to shared surface contact and face-to-face interactions, restaurant employees are explosed to multiple potentially infected customers and delivery drivers each day.

02. Restaurants have experienced a decrease in orders due to COVID

Restaurants have suffered financially because of customer distrust and confusion around safety protocols (mask-wearing, vaccination cards, outdoor dining).

03. Restaurants spend lots of time and money to ensure the establishment is clean

Because of COVID-19, restaurants dedicate more resources to cleaning surfaces, enforcing safety guidelines, and purchasing equipment (hand sanitizer, masks, gloves).

User Personas

After we synthesized our research findings, we then crafted two user personas that we used to understand our target user groups better. Since we had two target user groups (customer and business employee) we built one user persona of each based on our user research. In our personas we included demographic information, the familiarity with technology, pain points, and desires of the user. This helped to inform our design throughout the design process as we outlined a solution that would address the user’s needs and desires.

User Journey Maps

We created a user journey map to help us understand the user’s journey more. It helped us to identify scenarios the user goes through and what possible interactions they might encounter. After creating the user journey maps we understand better what points of their experience can be improved based on categorizing the user’s emotions at key touchpoints. This helped us to more clearly define the design requirements in the next steps to come.

DESIGN

Design Requirements

Based on our research insights, we then outlined our design requirements to best cater our user’s needs and desires. Defining the requirements was helpful in visualizing our solution. We envisioned how each requirement would manifest in our solution either digitally or physically since our solution required both components. We came out with a comprehensive list of requirements we found to be most beneficial and feasible:

Eliminate in-person interactions between customers and employees
Provide a wide selection of restaurants on University Way
Offer convenient locker locations to both customers and restaurants
Summarize monthly orders so businesses can analyze business activity
Secure lockers through digital and physical security systems
Place takeout orders through the ap and notify customers when food is in their assigned locker
Accommodate people of various heights and disabilities using our lockers
Allow customers and employees to open their assigned lockers
For restaurants, provide confirmation that customer received food

Storyboards

Through storyboards, we each created several illustrations depicting our thoughts on how our users, both customer and employee, would interact with our solution. This exercise allowed us to better align our understandings of our design with each other. Our previous artifacts helped us reach a general understanding of how our solution would flow for the storyboards. For our preceding artifacts, we used our storyboards to refine our exact solution and to better understand user flows.

Information Architecture

We created an information architecture diagram to visualize the interaction flows of our solution for both user groups since we cater to both the customer and business employee. The information architecture is a diagram that displays the hierarchy and flow of “locations” a user may find themselves at. It helped us to see the complete functionality of the solution and the visual organization of the elements that would assist in the function. By creating the information architecture diagram, we were able to identify areas of confusion in the interaction flow and add and reconnect frames accordingly. After clearly seeing the organization of frames we needed to build after creating the diagram we were able to work on wire-framing and prototyping.

Paper Prototype

Paper prototypes are the initial wireframes made on paper, but in our case, on the whiteboard. Through paper prototyping, we wanted to be able to physically visualize the flow of our main interface interactions, allowing us to figure out what screens and information would be needed for our users. Our diagram for information architecture helped guide our flow for our paper prototypes, allowing us to efficiently create our mock screens with an intended flow. With our paper prototype, we used it as a guideline for our annotated wireframes and to test with users in order to better refine our design.

Quick Evaluation Findings

Now that we had a paper prototype, we conducted usability tests, asking 3 participants to imagine a scenario and complete 3 tasks using our app. As participants completed each task, we noted their process and asked various questions about their experience. Our observations and feedback were used to create a new iteration of our design: annotated wireframes.

01. User wants to see more specific business metrics on the business analytics page

Participants were wondering what it would look like when trying to see the details of each metric on our business analytics page. They were also looking to see more diverse metrics that would help track the success of the business.

02. Users would like enhanced visual clarity and feedback for purchasing items

Users wanted to see better labeling of our categories icons on the customer home page. We also learned we needed to create more intermediary interactions for navigational clarity, such as a list view for restaurants, as well as a cart feature.

03. Businesses want a quicker way to view order list

One user mentioned “restaurants are fast paced. They don’t have time to click on each order to view food details.” Our list view needed to contain additional order details to be quickly understood by businesses, and filters to find specific orders.

WIREFRAMES

Annotated Wireframes

After we conducted our usability tests on paper prototypes, we created new wireframes. Our annotated wireframes depict each interaction on each screen, giving us and any viewer an understanding of the functionality of the design. Creating the wireframes also gave us a low-fidelity representation of our screens, acting as the median of our paper prototype and our high-fidelity prototype. Through our quick evaluation findings, we were able to redesign our paper prototype with user feedback in mind. These annotated wireframes provided a deeper level of detail of interactions, acting as a blueprint for prototyping our high-fidelity mock-up.

Hi-Fidelity Mockups

Interactive Prototype

REFLECTION

We're so proud to have completed such a comprehensive project in just 10 weeks, from user research, to formulating design requirements, to high fidelity prototypes.

Our group's biggest strength was our teamwork. Each one of us approached this project with a diverse set of strengths — between the 3 of us, we shared different passions for user research, visual design, and prototyping. We learned to trust one another by relying each other's strengths, and employed frequent communication, respect, and planning to make this project come to life.

One of the biggest challenges of this project was lack of time. Because we devoted so much time to user research, we faced time constraints when producing our wireframes and prototypes. If we had more time, we would flesh out additional screens for our business analytics page, create tutorials for our locker system, and create a large-scale version of our locker prototype.

Nevertheless, we are immensely satisfied with Food Grab, and are so happy to share everything we've learned along the way!

Page updated

Google Sites

Report abuse