UI/UX Tool: Personas and Storyboarding

https://www.roarsinc.com/

To understand how groups of users interact with a product, UI/UX designers utilise two effective but relatively inexpensive tools — personas and storyboarding. In my research, I have found that while the internet doesn’t lack great resources on the topic, few wrote about the process of applying these tools to address a design problem. In this article, I’ll first give a short overview of what persona and storyboarding are about, and then share how used them to further my understanding of the CVS self-checkout machine user experience.

Personas

At its core, personas are archetypical users whose goals and characteristics represent the mental models of a larger group of user, which include their main characteristics, ambitions, and frustrations. In order to construct a user persona, a designer or UI researcher has to conduct an ethnographic study of particular user groups(participation observation, interviews) and synthesise quantitative and qualitative research data. A well-constructed user persona also provide a degree of personal details and contextual information about her environment.

Storyboarding

A storyboard is simply a visual representation of a story. Comic strips can be understood as storyboards(4–6 frames that narrate a series of specific moments). In the context of UI/UX, a designer can use storyboard to communicate a particular user journey, which is proven to be 22 times more effective than plain writing. The concise and visual nature of Storyboarding helps a researcher think more critically about how the user interacts with an interface, and enables more effective communication with stakeholders.

Process Overview

Given that my focus was on collecting enough data to meaningfully construct personas and a storyboard, my user experience research process is fairly straightforward and simple:

1. Background Research
2. User Observation and Interviews
3. Constructing Mental Models
4. Constructing Personas
5. Storyboarding!

Step 1: Background Research

My friend, Laila, and I decided to choose the self-checkout machine at the CVS located on Brown University’s campus because we believed that the customer groups who interact with the machines would be fairly diverse in terms of age, gender, profession etc.

The CVS self-checkout machine is designed to streamline customer payment flow and minimise labour costs associated with running the front-end of a retail store. The main components of the CVS machine with which the customer interacts and their functions are as follows:

A sketch of the CVS self-checkout machine

1. Grocery platform: The customer places her unscanned grocery items on this platform;
2. Scanner platform: The customer takes one item at a time and scans it on this platform that is equipped with barcode reader;
3. Display screen: The screen displays visual instructions to the customer and allows the user to customise some checkout features like bagging and payment options;
4. Credit card reader: The customer inserts/swipes her card into the card reader to complete payment;
5. Bagging/weighing platform: After scanning an item, the customer has to place it on this platform for bagging and also for self-checkout to detect the item weight as anti-theft measures;

After sufficient background research, we promptly started our investigation! ]

Step 2: User Observation and Interview

For three days in a week, we spent about one hour each of the day observing and interviewing CVS customers. In total, We were able to observe 10 customers who used the self-checkouts and interviewed 8 users.

Here are some of our observations:

1. 5/10 customers paused after scanning all of their items before clicking the “Finish & Pay” button on the display screen, indicating that they forgot the final step before payment;
2. 3/10 customers forgot to place their scanned items on the bagging/weighing platform, preventing them from scanning their next item and causing delay;
3. 3/8 customers expressed annoyance at having to select payment methods at self-checkout, citing that it should automatically detect that they are using credit/debit cards;
4. In their walkthroughs of their processes, 7/8 customers claimed they just “follow” the instructions given by self-checkout, but felt that self-checkout audio had a “condescending tone”;
5. 7/8 customers said their main motivation to use self-checkout was to “check-out quickly”, with 1⁄8 saying it was to avoid “having to talk to people”;
6. 2/8 customers said there was a recently introduced coupon offer screen which one has to click to get rid of; in people’s walkthroughs, no one mentioned this as a step.

We found that our sample was fairly representative: most were young students buying daily necessities, which is representative of the College Hill demographic. Among them were newly arrived Freshmen and seasoned Juniors, who had more experience using CVS’ self-checkout. We also interviewed older customers who ranged in skill-level when it came to operating the self-checkout.

Step 3: Constructing Mental Models

https://fs.blog/mental-models/

After conducting the user observation and interviews, we synthesised the data points into two mental models:

Mental Model 1
We construct this mental model according to the users who are often rushed for time and tend to avoid human interactions when shopping in the CVS store. These users tend to make errors in the self-checkout process (ie. putting scanned item back to the grocery platform instead of the bagging platform or clicking on the wrong buttons on the screen). As a result, the check-out process takes longer than expected, or the process breaks down and they need a human employee to assist them, experiencing a lot of frustration.

Mental Model 2
Some users are open to using self-checkout, but remain in the paradigm of traditionally checking out with a human cashier. This mental model influences the user to use the self-checkout when the cashier line is long, so as to save time. They tend to forget certain steps in the self-checkout process (forgetting to scan/insert credit card/bag items, because in the past the cashier does all of these steps for them), and as a result have a longer transaction time.

Step 4: Constructing Personas!

Based on our two user mental models, we constructed the following personas using a four-quadrant empathy map, which focuses on what the user thinks, feels, says and does. The archetypal characters represent part of the spectrum of users we observed:

Persona 1: Introverted Izzy

Persona 1: Introverted Izzy

Introverted Izzy is a junior at Brown University who is currently taking 5 intensive courses and is stressed out over consulting recruitment. She can sometimes come across as a know-it-all, a tad arrogant even, but that’s because she really doesn’t like being told what to do. For her, the self-checkout is all about speed, and not having to interact with a cashier. Introverted Izzy represents the users who have busy schedules and tend to be overconfident about how to use the self-checkout. They just want to get out of CVS ASAP, and avoid human interaction.

Persona 2: Confused Chad?

Persona 2: Confused Chad(Not you, Pete Davidson!)

Confused Chad is a freshman who’s easing into varsity life with a laidback academic schedule and socialises a lot. He only uses the self-checkout when the cashier line is long because he’s unfamiliar with using it. As a result, he sometimes struggle to scan his items correctly or forgets to bag his items. Confused Chad represents the users by highlighting the unfamiliarity and nervousness that some users experience with self-checkout.

Step 5: Storyboarding!

This user journey highlights the goal that our persona, Confused Chad, wants to accomplish with the self-check out machine: skipping the long cashier line to checkout quickly. However, his user experience is far from his expectations because he still has a the mental model of having a cashier checkout for him and he is unfamiliar with doing the scanning and payment himself. As a result, he misses the instructions on the screen that tells him where to put his scanned items and to indicate that he is done. In the end, the process is longer than waiting at the cashier line, so he didn’t achieve his goal.

A simple storyboard!

Conclusion

To summarise my project findings, the user experience of the CVs self-checkout machine is plainly unpleasant for many of the users I managed to interview, and I hope to capture that through my personas and storyboard. Design solutions might include but are not limited to clearer audio and visual instructions for the on-boarding process, simplifying the layout and components of the machine, or simply removing the self-checkout system entirely. Here’s where the cliched adage whispers: just because we can, it doesn’t mean that we should. After all, self-checkouts may just be another one in the long list of shitty automation.

The design problem potentially arises from the fact that self-checkout machines are fundamentally not designed for consumers, as Brian Merchant points out in his article on why self-check is and has always been the worst. Supermarket retail services have traditionally always been human-oriented. Whether we are struggling with a bar code, with finding the right aisle or want some simple recommendations at a supermarket, nothing really beats having a (hopefully)friendly and patient retail worker nearby.

So is automation really necessary? And at what cost?

I hope this article illustrates how you can use personas and storyboarding as simple design tools to advance your own projects, or just for the fun of it, better understand a particular user experience(just don’t go peeking at how someone uses an ATM machine!) :)