Redesigning error messages for M&S self-service checkouts

Team

I worked as one of two UX designers on this project, collaborating closely with a product manager and an engineer throughout research, design, and handoff.

The problem

Roughly 20% of all M&S self-service checkout transactions required a colleague to step in and assist. The brief was clear: the error messages customers encountered were confusing, inconsistent, and often failed to tell them what to do next. With over 40 error states across the SCOTs till system, there was no unified logic governing when each message type should appear, what language it should use, or how urgent it should feel.

Research & discovery

Understanding the full scope

My first step was to audit every existing error state and map them by where they occurred in the customer journey. This gave the team a shared picture of the problem before any design decisions were made.

I also reviewed prior in-store research from CLX identifying hardware and interface pain points — small fonts, confusing amber light states, tagged items causing transaction stalls — and conducted a heuristic review against Nielsen Norman error message guidelines.

The heuristic review revealed two consistent failures across the existing 40+ states. First, visibility of system status — several error screens gave customers no indication of what had gone wrong or whether the till was still processing, leaving them to wait with no feedback loop. Second, match between system and the real world — error copy frequently used internal system language ("error code 4061", "void tenders cash") that had no meaning to a customer standing at a checkout. These two findings became the foundation for the copy rules applied across all redesigned states: every message had to name the problem in plain language, and every message had to tell the customer what to do next.

Research methods

How I gathered insight

Desk research — Nielsen Norman

Used NN/g error principles as a framework to evaluate existing copy: explicit, human-readable, polite, precise, and constructive.

Heuristic review

Evaluated SCOTs UI against usability heuristics — particularly visibility of system status and real-world language match.

In-store observations (CLX)

Reviewed existing store observation reports capturing real customer behaviour and confusion points at self-checkout.

User testing — Zoom & in-store intercepts

Tested prototypes with real customers end-to-end. Participants showed a noticeably higher understanding of redesigned messages vs. existing designs.

Design thinking

Building a system, not just screens

Rather than redesigning individual error states in isolation, I focused on defining the logic that would govern all of them — a taxonomy where each error type had clear behavioural rules, so future messages could be placed into the right pattern by default.

• →Full screen / critical: Chosen for payment failures and system errors because these states block the entire transaction. Taking over the full UI with a yellow background signals urgency to both the customer and any nearby colleague, and prevents the user from interacting with a till that cannot currently process their action.
• →Pop-up alert: Used for interrupts that require a decision but don't stop the whole transaction — such as age verification or item substitution. A grey mask overlay communicates that the current flow is paused without abandoning it, keeping the customer's basket and context intact.
• →Interrupter: Reserved for states requiring physical action — like re-scanning an item or placing goods in the bagging area. These require no on-screen CTA and auto-escalate after one minute of inactivity, because any further digital prompt would be redundant if the customer has already stepped away.

Each error state was documented with explicit trigger rules — the exact condition under which it appears — to remove ambiguity during engineering handoff.

Outcomes

The redesigned error system was delivered live into M&S stores nationally. By establishing explicit trigger rules for each of the three message types — and replacing ambiguous system codes with plain, action-oriented language — the design removed the primary reason customers were unable to self-serve: not knowing what the error meant or what to do next.

Skills & tools