Safeway Self-Checkout: Redesign

Step 1: brainstorm & SELECT SYSTEM TO REDESIGN

As a team, we brainstormed different interactive interfaces that frustrate us. We came up with a few options, including:

Treadmill touch screens
Following a recipe on your phone (NYT cooking app)
Cyclist apps
Safeway self-checkout screens

We eventually settled on the Safeway self-checkout design.

My teammate Sosi is a kitchen manager for her co-op house on campus, so she shops at Safeway every week - and HATES the self-checkout interface. It is unintuitive to use, unattractive, and overall poorly designed.

System to redesign: We are redesigning the user interface for the Safeway self-checkout scanners, most specifically the touch screen mechanism.

The user: Most people using self-check-out are Safeway shoppers, often in a rush, who want a quick and easy check out process. According to Gitnux shopping and retail statistics, “73% of consumers prefer self-checkout over staffed checkout lines. 85% of Gen Z consumers use self-checkout when available.” So, using this data, self-check-out users are the majority of shoppers at Safeway.

The context: Most people at the grocery store are ready to leave by the time they get to check out. From personal experience, we usually feel impatient and tired when we are using the self-check-out machine. The environment is also very noisy and overstimulating, and there are often a lot of people around. The self-check-out area is not very spacious, often cramming carts into each other. We want to create a more efficient and easy user experience at self-checkout machines.

Two tasks the system supports: We are focusing on the scanning process (how users scan items, the information displayed after each scan and the process of adding each item to the bagging area) and the quick lookup feature for finding produce without a scannable barcode (the quick lookup screen user interface, how the produce items are cataloged, and the display of information about the process for weigh and pay).

Why we chose this system and these tasks: The self-check-out area is often inherently understaffed because it is not meant to require the assistance of an employee, yet if you misinterpret the instructions, you may have to wait for help before you can continue scanning. Most people are already stressed and anxious to leave the grocery store by the time they get to self-check-out, so these small roadblocks are even more frustrating. We think that if information about how to use the system was more accessible and intuitive, a lot of this stress would be alleviated. Our specific areas of focus are the scanning system/feedback display and the quick lookup feature for produce. We are focusing on the feedback display because we think the information could be presented more clearly and the scanning process could be easier/more efficient. The quick lookup feature is unintuitive, so we want to find a better way of organizing it and make it more simple/easy to understand.

Step 2: research & ideate

We created a task diagram for each of the two tasks we chose to focus on (Scanning items and Quick lookup).

Then we asked two users to perform the tasks on the current Safeway self-checkout interface, asking them to describe their thought process out loud as they performed the tasks.

We annotated our task diagrams, noting the points of difficulty/confusion we observed for each user (see below).

Then we ideated and sketched 9 concept solutions to address the observed points of difficulty/confusion for each task —>

We also compiled the following list of smaller issues to come back to later - issues that are unrelated to process or navigation, but still problematic for usability:

System overall is stressful - what if you could scan as you shop using your iPhone?
Repetition of the word “number” in subject titles is confusing
Text of scanned items is small
General issues with placement of buttons to move forward/backward through process - unintuitive navigation.
Should have more use of info hierarchy, clear chronology
More different text colors/button colors for clarity
Centralize system into one touch screen
Design is ugly/no cohesive style or color scheme

CONCEPT B

This concept employs two strategies that will improve the user experience by creating a more efficient self-checkout process. We decided to combine the strategies of a phone scanning app to make the task of scanning happen throughout the shopping process rather than at the end, and new categories to sort produce for the quick lookup screen.

Task 1 (Scanning and Checking) Strategy: Phone scanner to improve efficiency (while shopping)

This strategy will be more complex to implement, but shopping would be much more efficient if users could scan barcodes with their phone cameras and add items to their ‘cart’ on an app while shopping - rather than scanning them all at once at the end. This could also help users make decisions about whether or not to buy certain items as they are shopping, because they could scan and see information about the price of each item as they collect them - which would probably result in more items being returned to the correct place in the store if users change their mind (creating less work for both shoppers and store employees).

Task 2 (Quick Lookup) Strategy: More effective order/new categories for quick lookup (not alphabetical)

The current Safeway ‘quick lookup’ interface organizes items alphabetically (e.g. all types of produce that start with an ‘a’ are grouped in one category at the top of the screen, etc.). We propose more intuitive categories, like fruits, vegetables, spices, etc.: to group items based on the type of produce they are. This would make the search process more intuitive, and better match the layout of the store/the shoppers experience. For example, someone scanning fruit will likely scan multiple types of fruit all at once, because they found all the fruit together on one side of the store and placed them together in their cart.

Step 4: user testing phase I

Concept A paper prototype

Results/User Feedback:

Step 3: prototyping phase I

We came up with two concept solutions, combining some of our brainstormed solutions for each task (above).

CONCEPT A

This concept employs two strategies that will subtly (but noticeably) increase user efficiency during self-checkout. We decided to combine the strategies of more cohesive barcodes for the task of scanning and checking and an automatic transfer to the ‘quick lookup’ screen for the task of produce quick lookup.

Task 1 (Scanning and Checking) Strategy: Cohesive barcode style & location to improve efficiency

When scanning groceries, especially for an inexperienced scanner/average person using self-checkout, the factor that seems to slow people down the most is finding the physical barcode on the product and getting it to scan. Some barcodes are small, or placed on a non-flat surface on the product, and can be difficult to find and to get the machine to scan. Our concept is a system for where barcodes should be placed and a more cohesive style of barcode that is large, well-marked so it can be more easily located, and easy to scan.

Task 2 (Quick Lookup) Strategy: If something is placed on scale, automatically move screen to “quick lookup” screen

The quick lookup screen/search bar is small and not well marked/difficult to find, which makes self-checkout more complicated and wastes time. We considered simply making the ‘quick lookup’ button larger and more attention-grabbing, but then decided on a better solution that skips that step altogether: automatic sensors that will transfer users to the ‘quick lookup’ page when an item is placed on the scale. This will save time and make the scanning screen more simple, so it is easier to comprehend all the information that is currently being presented. There should also be some informative message telling the user to place produce on the scale for quick lookup.

For each concept, we created flow diagrams for both tasks:

Step 5: prototyping phase II

Step 6: user testing phase II

First we wrote a script for our usability test —>

We read our script word-for-word during each user interview, so that each participant would have the same experience and wouldn’t be unintentionally biased.

Then we conducted user interviews on the following two users:

USER 1:

User 1 is a Kitchen Manager at Kairos (a co-op on the row), who grocery shops every weekend at Safeway. They usually are checking out with enough food to feed 40 people for a week, so the process is not quick or easy.

USER 2:

User 2 doesn’t have to use Safeway for their job, but still checks out in a rush & uses self-checkout – they are a college student who goes once in a while to buy snacks, usually at night, but does not shop on a very regular basis.

The current Safeway self-checkout design

Then we built an interactive paper prototype for each concept:

We asked four users to interact with each of our two paper prototypes, perform each task, and then fill out the following Heuristic Evaluation Sheet —>

Results/User feedback:

Our user evaluations showed that users appreciated the redesign of the Quick Lookup function, but also thought the reevaluation of the scanner/barcode process was helpful. We also heard that the most confusing parts of the process had to do with button interactions and the efficiency of the search function.

For the final prototype, we decided to move forward with Task 2 from Concept A (redesigning the barcode process) and Task 2 from Concept B (recategorizing the Quick Lookup section).

Design Changes

Increased user navigability – Priority: 4
We heard from users that it was not clear how to return to the home page, so we are adding a navigation bar on the left side of the screen to ease movement between pages and functions
Quick Lookup rebrand – Priority: 3
Our users did not know what Quick Lookup meant, and expressed that we should use a search function instead b. In addition to changing the name, we hope to add a searchbar so that users can either search by name or using the alphabetical function
Re-categorization – Priority: 4
Within the Quick Lookup feature, one of the most confusing aspects of the self-checkout system is that the inventory is organized alphabetically, but some items are not categorized under the word you would assume – for example, plantains are under the letter B for “Banana – Plantain.” For this reason, we are going to reorganize the system by category and then by initial letter, and the searchbar will serve as a backup plan if items are miscategorized, providing semantically or categorically similar options if no results appear b. This change comes from user feedback stating that the search will only work if items are categorized by name correctly
Icons and visual cues – Priority: 3
Our user suggested adding symbols to the buttons so that users (especially those who may not be as familiar with English) can easily navigate still
More button variety and clarity – Priority: 2
Our users requested we add a help button in case the scanner continues to not work, and a home button to make access to the home page easier. The addition of these two buttons would simplify the design and make navigability easier

Concept B paper prototype

Incorporating our user feedback and list of design changes, we built an interactive grayscale wireframe prototype in Figma.

User 1 testing our prototype

Step 7: prototyping phase III

For our final color prototype, we began by making a mood board to serve as a style guide for our design —>

Then we updated our interactive wireframes with the design changes from the usability testing (outlined in the table above), incorporating visual elements from our mood board to create a final prototype (below)

User 2 testing our prototype

final figma prototype:

Usability Testing Script

Thank you so much for taking the time to speak to us today. We understand that you are a customer at Safeway. For our final design project, our group is looking at the Safeway self-checkout machine and trying to find ways to make the self-checkout process more efficient. To be clear, we are interested in observing the usability of a prototype, not how fast you can check out or use the system, so feel free to interact with it at a natural pace the way you would at the store. We hope this session will take about 10 minutes.

To help us understand what is working in our prototype and what is not, it would be very helpful for us if you could narrate your actions as you complete them so that we can catch moments of confusion or hesitation that you may have. We can now get started:

What is your first impression of this prototype, before interacting with it? All right. Imagine you have had a long day, and need to check out as fast as possible to get home and finish some work. You are checking out with 10 potatoes and a carton of eggs. To pay for the potatoes, you will have to use the search feature since they do not have a barcode. Could you show us how you would complete that task intuitively? After that, could you scan the bread?

Thank you for participating in this exercise. We would love to hear your overall impressions of this prototype. You can be completely honest – we understand that it is not perfect, and as of now you could consider it as just a draft. What worked well for you? What didn’t? Were there anythings that you preferred or disliked compared to the Safeway self-checkout that you have used before? Did anything confuse you?

On a scale from 1-10, how easy was it to use? How intuitive was it to use? How efficient did it feel?

User 1 rated the new system an 8/10 compared to the original which they said was a 6/10. User 2 rated it a 7.5/10.

In terms of metrics, both participants said they preferred the rebrand to the old Safeway self-checkout, but they also both had critiques of the prototype, mostly related to usability and fidelity – they were especially confused by the buttons that did not work.

Overall, the user testing definitely revealed that we need to work on mocking up a more realistic prototype that would direct people to the correct pages when people play around with it. Their specific critiques/areas for improvement are outlined in the table below (left).

We also compiled a list of design changes to incorporate going forward, assigning each change a priority score:

Project brief:

IDEA:

Step 1: brainstorm & SELECT SYSTEM TO REDESIGN