Grab Your Food

At one-hour lunchtime on campus, students could spend 30 minutes in waiting lines for food. A quote from one of our interviewees “It’s really frustrating that I only have 15 minutes to finish my meal, which is not warm since I spent too much time in a line.” Our team designed a mobile app, by which students are able to order food, pay online and pick up at their desired time. No line ever!

Time: 8/2017 - 10/2017 (10 weeks)

Team: Makenzie Heard, Gauri Patekar, Yishan Tsai

My role: I conducted user research by two observations and three interviews, designed user interface, and did the usability testing.

Design Process

This was a design mission in my Interaction Design Practice course. We were asked to find a real problem happening on campus and go through the design process.

Design process

1. Empathize

At the beginning of the design process, we asked ourselves who we are designing for, what are their pain points, and how to make their experience better?

Observation

I observed students buying food on campus at peak time (around 12pm). By sitting aside and counting time they spent with my stopwatch, it was really surprising that students spent over 30 minutes to get a coffee and a bagel.

An endless waiting line at rush hour

Interview

To better understand the experience of buying food on campus, I conducted three interviews to find their pain points. Since I wanted to interview with people who had experience of waiting in a long line, I asked people to join the interview right after they left a long waiting queue. Although it was hard to find interviewees who already spent time on a queue for a while, I was able to schedule with three participants to have interviews later.

2. Define

Using the data we collected from observations and 7 interviews, we found the affinity diagram and empathy map are the best ways to define the problem, to categorize and prioritize features, and to put ourselves into users’ shoes.

Affinity Diagram

We wrote down our interviewees' opinions and behaviors onto small cards. Then we categorized these cards into groups and figured out the relationships between the groups. For example, the group "lacking of food information" and the group "lacking of time" could be combined into a more general "resource scarcity" group.

An affinity diagram

Empathy Map

After we had a firm idea about what we learned from our interviewees, we used an empathy map to think, to say, to do, and to feel what they would think, say, do, and feel in order to build our personas.

Building an empathy map

Personas

From the result of the affinity diagram and empathy map, we collected user requirements and used them to build two personas (as seen two personas below), which were for communicating among the team and always keeping in mind who we were designing for.

Two personas

The Problem

The core problem was "students cannot get food at the time they want and spend too much time waiting in busy lines." This was a problem about the shortage of information and resources: not only are students not sure how long they should wait for food, restaurants are also not sure how much food they should prepare and at what times.

3. Ideate

Design Direction

We had three sessions of brainstorming and came up with 80 features, which can solve the problem in different ways. After categorizing and prioritizing ideas, we grouped them into four features we were after:

Waiting-time estimation

Pre-order, prepay and pick up

Interactive menu

Delivery service by friends

Storyboards

With two personas and scenarios, we drew storyboards for three potential solutions: a website, a mobile app, and a kiosk located at school buildings (seen the storyboard below). According to the perspectives of convenience and safety, we moved forward to a mobile application design, which was able to implement features and kept services personal and safe, especially for the online payment.

A storybaord of the kiosk design

4. Prototype

Wireframe

I created the wireframes (seen the wireframes below) and user flow, in order to make sure that we included key features and the information elements displayed properly.

The wireframe

Low-Fidelity Prototype

Instead of focusing on the pixel picking, our team used low-fidelity prototype in testing with participants. Thus, we would get feedback more about the user flow and functionalities rather than, for example, colors.

The low-fidelity prototype

5. Test

Cognitive Walkthrough and Think Aloud Exercise

Testing is an opportunity to learn about our assumptions, our solutions, and our users. We conducted two runs of testing: one was the cognitive walkthrough with wireframes (as seen the wireframe at the left screen below) among the team, and the other one was the think aloud exercise with the low-fidelity prototype (as seen the prototype in the middle of the following screens) with three users, who bought food on campus at least three times a week. To test key features, the tasks in the think aloud exercises were:

Order food and pick it up

Order food and request friends to deliver

Check out new restaurants and their menus

Prorotype evaluation: from wireframe, to low and high fidelity prototypes

Reflection

I believe designers have more challenges to put themselves aside in order to make user-centered design happened. Moreover, through the team work with people having different backgrounds, we shared ideas and learned from each them. For example, after knowing there were light mode and dark mode in UI design for using in different environmental situations, I used my own time to read articles, to use new digital tools and to practice. (as seen the map screen in light and dark modes below) It was fun and challenging designing according to users’ needs, and thanks for my team to grow with me!