Skip to content
← Back to portfolio

Barcode UX: a redesign for real counter scanners

Project release3 min read
UX RedesignMobile FlowRetail UXAccessibility

The counter scan problem

The account page originally offered a QR code only. Field reports told another story: many stores run one-dimensional barcode scanners, so staff typed the card number by hand while the queue grew. A classic case of right screen, wrong context: the design looked complete in the office and failed at the counter, under real lighting, distance and scanner hardware.

Add the barcode, then let it grow

The redesign took two steps. First, put the one-dimensional barcode straight into the member card block next to the card number, so most scans just work. Second, handle the scans that do not: an expand control opens a full-screen version rotated ninety degrees, thick bars, high contrast, screen brightness pushed up, readable from farther away. The design note fits in one line: the real user of a redemption screen is the scanner gun. Make it comfortable for the gun first, and the human follows.

Account page redesign: the member card gains an inline barcode with an expand control, and a full-screen rotated barcode view, logos blurred
The account page redesign: a barcode joins the member card, and one tap opens the full-screen rotated version for scanners. Logos and card art are blurred.