- Situation
- Approach
- Outcome
A credit card terminal at Whole Foods had jarring, confusing messaging that caused people to withdraw their cards too quickly.
Process
- I interviewed the cashier and learned that this was an ongoing issue
- I took a photo of the existing terminal
- I scratched out some notes about what was missing, and what an ideal experience might look like
- Then I opened Figma and got to work
I felt like there needed to be some indication of something happening and how long it might take…
A requirement of Nielsen’s first heuristic of interface design – Visibility of System Status
Exclamation points are my kryptonite. Sometimes they feel right, but I know they read like unnecessary yelling…
With limited space, it also seemed important to limit the messaging so the user isn’t overloaded and can focus on what’s most important.
Reduced messaging and a friendlier tone. But it’s still not quite there…
Final design
The most important thing is that the user doesn’t remove their card. This message isn’t as friendly, but it gets right to the point. And the status bar now tells you exactly what you’re waiting for. The graphic tells you it’s almost done – no need to tell them twice.
Outcome
Speculative users found the updated experience clearer, reducing the chances of premature card removal, and speeding up checkout times!