Tabitha Tsai

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.

the design process: empathize, define, ideate, prototype, and test
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.

a long waiting queue at Einstein Bagels in rush hour
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 to categorize and prioritize data collected from observations and interviews
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.

an empathy map to put our feet on users' shoes
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: one student who has lunchtime from 12 to 1 pm. one professor who wants to get food immediately
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:

  1. Waiting-time estimation
  2. Pre-order, prepay and pick up
  3. Interactive menu
  4. 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.

the storyboard of a kiosk desgin, which locates at every school building
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 presented the elements of the mobile application design
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.

screenshots of the low-fidelity prototype
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:

  1. Order food and pick it up
  2. Order food and request friends to deliver
  3. Check out new restaurants and their menus
an evaluation of a map screen from wireframe, to low-fidelity and high-fidelity prorotypes
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!

an example of high fidelity prototype
Practice UI with light and dark modes

© yi-shan tabitha tsai