Letting shoppers scan and pay with their own phone, without queueing at the till
The problem: Shoppers had to choose between carrying a store scanner and standing in a queue. Both were real barriers, especially for parents and people with accessibility needs.
What I did: Led the design from research to launch, working with the PM and engineering team. I tested in office workshops and in a live store before launch, and ran an A/B test with real shoppers after launch.
Key decisions: Made sign-up optional after 3 testers abandoned at registration. Added visual, haptic and audio scan feedback after finding that the app was too silent: shoppers couldn't tell whether a scan had worked.
Result: In an A/B test after launch, checkout completion rose by 40% with scan feedback. Usability testing before launch also showed about 30% better checkout task performance, and sign-up abandonments dropped from 3 to 0. The app has launched; adoption is still early.
Part of the Focalpay platform: this app connects to the Cashier POS for cash payments and to the Back-office for products and prices.
In Swedish grocery stores like ICA and Coop, self-scanning means carrying a store scanner around, or standing in the queue at the till. For a parent with a stroller, or someone shopping with a sensory-sensitive child, neither works well.
Focalpay's app turns the shopper's own phone into the scanner. Shoppers scan as they go, then pay by scanning a QR code on the store wall. If they want to pay with cash, one tap sends their cart to the cashier.
For retailers, it removes the cost of buying, charging and replacing scanners, and it's part of one platform with the cashier POS and the back-office. That gave us three constraints:
I led the design from competitor research and interviews to final screens and usability testing, working closely with the PM and engineering. The PM joined some of the testing sessions.
Explaining the flow before the first scan
Before the first scan, a short, skippable carousel explains the store flow in four plain steps: scan, pay, get the receipt, and exit.
Step 1 · Add product to cart
Step 2 · Scan checkout QR
Step 3 · Pay and get receipt
Step 4 · Done — start shopping
Understanding the problem
I started with competitors, checked the problem with shoppers before designing anything, and tested in two very different settings.
How self-checkout works at ICA, Coop, Willys, Lidl and Hemköp, and where it fails shoppers.
5 had used store scanners and asked why they needed an extra device when their phone could already scan. 3 said queues cost them too much time.
Parents with young children and people with accessibility needs, to find problems a typical persona would miss.
Two in an office workshop and one in a real store, with real products, noise and time pressure. The store session found problems the workshops didn't.
Who we designed for
The research pointed to one group that existing solutions were failing: parents shopping with young children, especially when a child has extra needs.
Persona quote, synthesised from interviews.
What wasn't working
Checkout was designed around the store's systems, not the people using them.
One hand and full attention, which a parent pushing a stroller simply doesn't have.
For shoppers with sensory-sensitive children, chronic pain or little time, a queue can be a reason to shop elsewhere.
A damaged barcode left shoppers stuck. Only the real store session showed this.
Most parents have two hands. The old checkout needed three.
The first version asked shoppers to create an account before checking out. In testing, three participants gave up right there. They just wanted a faster way to pay.
I moved sign-up to the end and made it optional. Shoppers now check out as guests with their card and get the receipt by email, while those who want purchase history and saved cards can still sign up. In the next round, nobody gave up, and one participant chose to sign up.
After launch, too many shoppers didn't complete checkout. My first guess was the scanner: maybe it wasn't optimised enough, so I asked the dev team to improve it. But the drop-off didn't go away.
Testing showed the real problem: the app was too silent. Shoppers scanned a product, then stopped and stared at the screen, unsure if it had worked. Some scanned twice. With noise, trolleys and children around, a visual sign alone was easy to miss.
So I added three kinds of feedback after each scan:
This follows the WCAG guidance that a change shouldn't rely on only one sense.
To prove it, we ran an A/B test with 10 real shoppers: 5 used V1, the silent version, and 5 used V2, with visual, haptic and sound feedback. Checkout completion was 40% higher with V2.
Designed for one free hand
I designed every screen around one idea: the phone in the shopper's hand should be the only device they need, even while they push a stroller, check a list and watch two children.
When the app opens, the camera is already on and the cart is visible. Each scan goes straight into the cart, and the total and shortcuts are always one tap away. The whole home screen is for scanning.
A bag without scanning, a Baked goods category for items without barcodes, and manual barcode entry, added after testing showed that damaged barcodes left shoppers stuck.
Shoppers tap "Go to payment" and scan the large QR code on the store wall, from up to 10 metres away, tested in a real store.
Checkout from the cereal aisle, if you like.
Apple Pay, Swish, card and cash. Cash users tap once to send their cart to the nearest cashier, without scanning everything again.
After paying, the receipt screen shows a QR code for the exit gate. The receipt is also saved in the purchase history.
Home · scanner + cart
Add bag flow
Baked goods category
Manual barcode entry
Payment summary
Digital receipt
Try the flow yourself
You can click through the prototype to scan, add products to the cart and check out like a shopper would. No Figma account is needed. It loads when you tap it, to keep the page fast.
From the entrance to the exit gate
Sara's whole trip, from opening the app in the car park to scanning the exit QR code. The low points showed where design changes mattered most.
| Stage | Action | Emotion | Pain point | Design response |
|---|---|---|---|---|
App open |
Opens app, camera activates immediately | Confident | None. No forced sign-up, and the camera starts straight away | Camera opens first, so there's nothing to get through |
Scanning products |
Scans barcodes while shopping, one hand on stroller | Engaged | Not sure if the scan worked | Visual, haptic and sound feedback on every scan |
Unreadable barcode |
Tries to scan damaged barcode, camera fails | Frustrated | The first version had no way forward, so the shopper got stuck | Manual barcode entry, added after usability testing found the problem |
Baked goods |
Taps “Baked goods” for items without scannable codes | Relieved | Baked goods often don't have a barcode | Own category, one tap from the home screen |
Cart review |
Reviews cart, adjusts quantities, checks total | In control | Wants to check everything before paying | Cart always visible on the home screen |
QR checkout |
Taps “Go to payment”, scans store wall QR from distance | Delighted | Expected a queue, and was surprised the QR code worked from 10 m away | Large QR code that can be scanned from a distance |
Payment |
Pays via Apple Pay, card scan, Swish, or cash transfer | Satisfied | Needs to enter card details now, since there was no sign-up at the start | Card scan with the camera or manual entry, and several ways to pay |
Exit gate |
Scans exit QR from receipt screen at store gate | Confident | Wants to be sure the payment went through | Clear exit QR code on the receipt screen; the gate opens |
The +40% comes from an A/B test after launch. The other results come from usability testing before launch, across several rounds, and show the direction of improvement.
A/B test after launch with 10 real shoppers: 5 on the silent V1, 5 on V2 with visual, haptic and sound feedback.
In-store session (5 participants) compared with the earlier round: completion time, errors and successful checkouts. Reflects the changes made between rounds, including optional sign-up.
Previous flow, with mandatory sign-up: 3 testers abandoned. New flow, with sign-up optional: all participants completed checkout, and one chose to sign up at the end.
Tested in a real store
Cart transfers to the cashier POS, with no re-scanning
“I used to dread grocery shopping with the kids. Now I just open the app, scan as I go, and I’m done before I even reach the exit.”
— Usability test participant, in-store session
0 · Splash
1 · Empty cart
2 · Scanner + cart
3 · Manual barcode
4 · Baked goods
5 · Add bag
6 · Cart
7 · Scan QR to checkout
8 · Payment summary
9 · Add card
10 · Card on file
11 · Payment complete
12 · Purchase detail
13 · Digital receipt
14 · Purchases
The app has launched, and a small number of shoppers use it so far. As it grows, I'd track guest checkout versus sign-ups, checkout completion, how often manual barcode entry is used, and cash handovers to the cashier.
Damaged barcodes only showed up with real products, noise and time pressure.
Vibration and sound are what made shoppers feel sure a scan had worked.
Making it optional kept accounts for those who want them, without blocking everyone else.
Looking back
My first guess was the scanner, and the dev team optimised it before we had any data. Next time, I'd test first and fix second: the real problem, a silent app, only showed up once we tested.