Work

Experience

Resume

FAQ

Safeway

Co-led a human-centered redesign of Safeway’s self-checkout kiosk, using heuristic evaluations and user testing to simplify navigation, enhance discount clarity, and improve overall user satisfaction.

Headquarters

Clifornia,USA

Founded

1915

Industry

Retail

Revenue

$80.4 billion (2024)

Company size

325,000+

Challenge

Safeway self-checkout kiosks allow customers to scan, bag, and pay for their groceries without assistance from a cashier. While these kiosks aim to streamline the checkout process, users often face challenges such as scanning errors, unclear payment steps, and usability issues that lead to frustration and delays. The goal of this redesign was to enhance the self-checkout experience by addressing these pain points, improving efficiency, and making the interface more intuitive for users of all backgrounds. The following are the three main problems that we aimed to solve

Confusing and Redundant Search Experience

The search functionality requires users to remember exact product names—for example, searching “russet” does not yield results for “Potato Russet.” This rigid requirement can lead to frustration.
Additionally, having three different search options on the home screen creates visual clutter and makes it unclear which one to use, overwhelming users right from the start.

Lack of Clear Feedback on Discounts
To apply discounts, users must either scan barcode tags from the store aisles or manually add them through the app before checkout—this process is not intuitive.
Discounted items are hard to discover, and there's no clear indication if a discount has been successfully applied unless checked in the app.
On the final bill, discounted and voided items appear visually similar, making it confusing to confirm whether a discount was actually applied (see image for reference).
Inconsistent Visual Design and Branding
The checkout journey lacks a unified look and feel—each screen varies in layout, creating a disjointed and inconsistent experience. This lack of visual harmony makes the process feel fragmented and harder to follow.
Additionally, the interface does not reflect Safeway’s core brand elements, such as its signature red color. This weakens brand recognition at the kiosk and may leave users unsure if they’re still interacting with a Safeway system.

1. Smart Search and Visual Guidance
A subtle side animation helps users understand how to scan items, while the familiar search bar offers an alternative for those without barcodes.
To support users who may not remember exact produce names, the search results go a step further—offering related items and extra details to guide selection with ease.

2. Unclear Audio Prompt for Membership
New users found the audio message about adding a club card unclear and slightly confusing.
The kiosk currently says, “Add your membership detail by scanning your membership code or entering your phone number,” which lacks clarity and may not resonate with users unfamiliar with the process or terminology.

3. Clear and Easy Discount Visibility
Discounts are now more noticeable, as they’re displayed directly on the kiosk during checkout.
What sets them apart is the distinct visual styling used for savings, making them easy to differentiate from other offers—helping users feel confident about what they’re saving as they pay.

Usability testing data

Tasks

1. Adding membership detail

2. Adding 7 green bell pepper to cart

3. Adding a bread with offer to cart

4. Checking out and paying

What we observed

- Duration of each task

- Any comments/hesitations from the participants

- Their facial expressions

- Screen recorded their testing

When one of us was talking to the participant, the other two recorded any comments/actions made by the participant

Major comments

Participat 1

Pros:

1. “She preferred clipping the offer on the screen as she often forgets to clip the offer in the app”. Also mentioned that, this would be helpful to people to add discounts that they are not aware of.

2. “She mentioned that she could immediately notice where she should enter her membership details as it is in the right corner in the current Safeway kiosk”.

3. “She mentions that the animation of the countdown (this lane will be open on 3,2,1..)”

Participat 2

Pros:

1. Clipping the offer is very easily visible

2. The checkout process is more linear when it comes to clipping the offer

3. He can see the discounts on the screen throughout the process unlike the current system where sometimes the discounts are shown only at the last checkout screen.

4. He likes the transparency of the item discounts as he is unsure whether the discounts are added or not in the current flow. 9

5. The position and the nomenclature of adding the phone number is more clear as in the current kiosk flow, the item number and phone number are placed next to each other which is confusing

Participat 2

Pros:

1.The process is similar and familiar to the current safeway’s checkout process

Cons:

1. She was not sure if the membership details were added or not as she was not focusing on the screen.

2. She feels like the “Add Membership” button can be misleading for first time users as it sounds like you are creating a new membership. Also, she suggested that to change the button name to maybe “Enter”

General Comments: She did not have any opinions about the clip offer feature as she is used to clipping offers on the safeway mobile app

Solutions and Wireframes

Research Methods Applied

Heuristic Evaluation
We analysed the usability of Safeway’s self-checkout kiosk using Jakob Nielsen’s 10 usability heuristics. Each issue was rated on a severity scale from 0 to 4, helping us identify key pain points. The examples shared above highlight some of the major usability concerns uncovered during this assessment.

Cognitive Task Analysis
To understand the user journey, we asked participants to complete a simple task: “Add your club card details and purchase a red bell pepper.”
At each step, we observed:

Tools and materials required
User decision points
Available perceptual cues
Prior knowledge expected
Situational awareness demands

Read Full Report Here

User Persona's

User Journey Map

Success of Redesign

Usability testing with three user types showed about a 40% faster checkout time. Although the environment differed from actual Safeway checkout areas, users adapted quickly to the new UI, flow, and interactions, reducing confusion and errors.

“ With our new visual branding and language in place, the new Safeway brand clearly captures the essence of Safeways's current and target customer base, our employees, and our values. ”

Heather Lum I Methods & Tools Human System Engineering

Professor, Arizona State University

Conclusion

The Safeway Kiosk redesign successfully addressed the usability issues, resulting in a more intuitive and user-friendly experience. The improved UX/UI design led to increased user adoption, engagement, and satisfaction, demonstrating the value of a well-designed template for UX designers.