Heidi Erwin
back to portfolio
Shiru Cafe: Personas
UX Research
WHEN:  October 2018
WHAT:  UX Research, UX Design

A user research project centered the mobile interfaces of Shiru Cafe in Providence, Rhode Island. UX research centered around personas, mental models, and UX principles of learnability, usability, and memorability.

Overview



When the cafe offering a wide array of free drinks to all Brown University students (to be fair, in exchange for data about students’ career interests) opened in the Spring of 2018, I was ecstatic. Free light roasts, free matcha, free hot cocoa? I’m 100% on board.

But getting the drinks requires using an interface on a mobile device, which can then be scanned. There are certainly design improvements that could be made to the interface, which served as the initial inspiration for this project.

To get a clearer sense of the user experience of the interface, I observed real users interacting with the Shiru Cafe interface, interviewed individuals about their experiences, constructed maps of users’ mental models, created personas based on these users, and illustrated a storyboard for a persona, to develop UX research and design skills.

Photo of Shiru Cafe


Interface Flow Annotated Sketch



First, I broke down the Shiru Cafe interface and the process of a user interacting with the interface in an annotated sketch (flow of site in blue, annotations in red):

Interface Flow Annotated Sketch




The (primarily mobile) Shiru Cafe site was designed to allow people to choose a drink and payment option. The user must either read or skip information about that day’s previous orders and cafe policies to reach the drink selection screen. The drink selection screen has ‘hot’ and ‘cold’ tabs, and a grid of clickable drink images. Once the desired drink is clicked and on screen, the user is able to select between ‘for here’ (drinks consumed in the cafe are free) and ‘to go’ options. Next, a QR code appears after a 3-second wait, to be scanned by a barista.

Observations



I then observed users interacting with the interface in the cafe:

Shiru Cafe is a bit loud, with people chatting with friends and music playing overhead, though most of the students there are working. Customers enter the cafe looking at phones, often logging into the site as they approach the front doors.

Once logged in, all the users we observed skip past the first informational page (Figure 1), immediately clicking to get to a screen of drink options with images (Figure 2). Some users scroll up and down the images, while others jump instantly to their preferred drink. After the drink is selected, the interface prompts users to wait 3 seconds (Figure 3) for a QR code (Figure 4), at which point people often turn up their phone brightness so it can be read by the register’s QR scanner. Once the code is up, they don’t touch the screen, and users seem a bit flustered if their QR code hasn’t yet loaded when it’s their turn to scan.

Shiru Cafe Mobile Wait Screen
Shiru Cafe Mobile Information Screen
Shiru Cafe Mobile Drink Selection Screen
Shiru Cafe Mobile QR Scan Screen

Interviews



Next, I pulled six people aside to interview them about their experience interacting with the interface. Some of the observations, along with interview responses of two interviewees (names changed to “Alice” and “Bob” for privacy) are below:

“What pain points have you experienced with the site?” Alice mentioned the 3-second loading period, and Bob said it was “fine.” For him, the site was good enough, but he brought up the annoyance of re-logging in each visit.

“What do you think of the buttons on the Drink Confirmation page?” (See Figure A) Both of them felt that the buttons and their symbols were clear, but Bob wished they were larger. No one we spoke to utilized the arrow buttons to navigate between drinks, instead preferring to go back to the grid of all the drinks and reselect there.

“How do you feel about the drink images?” Both responded that they did use the drink images, though Bob mentioned that he’d like to see more information: calories, sugar content, milk options available.

“After picking your drink, what other information do you tell the server at the counter?” Both said they give milk/sugar preferences, as the site doesn’t have this option.

“When do you order drinks ‘for here’ vs. ‘to go’?” Bob responded that he got drinks to go if the cafe was crowded, which was the case when we interviewed him. Alice said that she always ordered drinks ‘for here’ so she could eat her lunch with her drink, and get some work done.

“Which drinks do you order most often?” Bob quickly responded with “matcha latte or hazelnut latte,” and Alice responded similarly promptly with “matcha latte or caramel latte.” Both people seemed to have go-to drinks that they ordered consistently.

“What do you usually do at Shiru?” Bob responded that it was too noisy to do work, so he would usually drink his order and then leave, but if he saw a friend, he would always sit and chat with them. Alice usually tried to get work done in Shiru, often multitasking and eating lunch, too.

Personas & Mental Models



The next step in the project was creating two personas, Silas and Anna, and their mental models, to examine the user experience of the interface.

Anna's Mental Model
Silas' Mental Model




Anna’s Mental Model:

Anna expects the app to be efficient, with minimal screens and navigation as the cafe is full of students and lines can be long. She’s also familiar with LaundryView, a site that shows which campus laundry machines are free, and anticipates a similar feature that shows which tables at Shiru are open, because customers must pay to get drinks to go, which they’re forced to do if they can’t sit down.

When Anna arrives at Shiru and the seats are full, she feels irritated that she walked there for nothing, as she is unwilling to spend money at the cafe. She expected the app to be efficient, so her first couple visits she opened the site too late, and held up the line as her code loaded. As she began visiting more, though, she started to anticipate a series of several clicks to order a drink, and began loading the site before entering Shiru.





Silas' Mental Model:

Silas, an avid social media user, is accustomed to cafes like Starbucks, and expects an interface that will remember what he wants to order and show prices, with options to re-order the most recent order and view trending drinks. Also because of other app-ordering experiences (e.g. SnackPass), he wants all food and modifications to orders, to be accessible on the site, alongside a possible social option to see if friends have checked in (like Yelp and Snackpass).

The app doesn’t indicate when ingredients are gone, so Silas is flustered and must think on the spot when the barista says they can’t make the drink indicated by his QR code. He’s disappointed that he can’t view food items on the site (as one can with Starbucks or SnackPass), so he checks the pastry display upon arrival and often leaves Shiru caffeinated, but still hungry.

Reflections



This was a great opportunity for me to get some practice utilizing personas, a methodology common in the field of UX design and research. Were I to take this project further, I would conduct a couple more interviews with a more diverse and representative sample, and ultimately move on to prototyping a new interface and conducting user testing.

This project was also an affirmation of all of the insights on user experience that can only be gained by learning about the users of those interfaces and the contexts of these interactions.
"People ignore design that ignores people."
—Frank Chimero, Designer