Self Checkout — Walmart
Designing Walmart’s self-checkout so shoppers of every age could finish without calling an attendant — shaped by six months of hands-on workshops, and still running in stores today.
ROLE:
Lead UX/UI Designer
CLIENT:
Walmart · Retail
TIMELINE:
2015–2017 · ~6 months from Ver. 1 to Ver. 2
TOOLS:
Axure RP (original) · later rebuilt in Figma with a component library and tokens
The challenge
Self-checkout has to work for everyone who walks into a Walmart, with no training and often no patience. A single kiosk handles very different products and situations, from produce sold by weight, age-restricted items and coupons.
Every time a shopper gets stuck, they call an attendant. That slows the lane, adds work for store staff, and undoes the point of self-checkout. My goal was a flow clear enough that shoppers could finish on their own, including older customers who were less comfortable with touchscreens.
Version 1: a foundation to react to
I designed the first version in Axure RP to establish the core checkout flow: scan, review, pay. It was deliberately lean. It covered the main path end to end and gave Walmart’s teams something concrete to test their real-world scenarios against.
Six months of workshops
Over about six months, I worked through detailed workshops with TCS systems, technical and business analysts and several Walmart team, such as store operations, product and IT.
Instead of reviewing screens in the abstract, we walked through specific use cases for different kinds of products and checked how the interface handled each one. Three themes kept coming up:
1. Readability. Older shoppers struggled with small text on the screen.
2. Touch accuracy. Tightly packed buttons and lists led to mis-taps and frustration.
3. Getting stuck. When shoppers didn’t know what to do next, they called an attendant instead of continuing.
Version 2: designed for the shopper who struggles most
Version 2 answered each workshop finding with a specific design change. I designed for older shoppers first, on the reasoning that a screen clear enough for them would be easier for everyone.
| What we learned | What I changed | Why it matters |
|---|---|---|
| Older shoppers struggled to read the screen | Increased font sizes across the flow | Readable at arm's length, without glasses or leaning in |
| Crowded buttons and lists caused mis-taps | Enlarged buttons and spread out lists with more spacing | Bigger, separated touch targets reduce errors |
| Uncertain shoppers called an attendant | Added contextual pop-ups that guide shoppers through tricky steps | Shoppers resolve issues themselves, so attendants are free and lanes keep moving |
Outcome: shipped, and still in stores
The design went live in Walmart stores and is still in use years later. Walmart operates close to 12,000 stores worldwide — source (google).
I rolled off after delivering the designs, as is typical for consulting work, so I don’t have Walmart’s internal post-launch metrics. What I can confirm is that the work made it through engineering, business and operational review at one of the world’s largest retailers, and it’s still in front of customers today.
Rebuilding the system in Figma
The original screens were built in Axure RP. I later rebuilt them in Figma as a structured component library with design tokens. That preserved the work and turned a set of screens into a reusable system of buttons, lists, pop-ups and type styles that encodes the accessibility decisions above.
Reflections
The biggest lesson: design for the shopper who struggles most, and the experience improves for everyone. If I did it again, I’d put Version 1 in front of real older shoppers in a store much earlier, instead of learning their pain points mainly through stakeholder workshops. That could have shortened the six months between versions. I’d also define success measures with the client up front, such as attendant calls per transaction, so the impact could be tracked after launch.