In Store Grocery Scanning Feature

A mobile app feature allowing users to scan items as they shop for a quicker checkout process

Company Ahold Delhaize

Industry Grocery Retail

Process Workshop, 3 rounds of designs, Guerilla testing

Tools Sketch, InVision

Role Co-experience designer, team of 2

01 PROBLEM DEFINITION

The legacy application allowed users to scan as they shopped but had many bugs, an outdated interface, and was outside the main brand application. Checking out remained a major pain point in the grocery shopping user journey.

 

02 RESEARCH

Audit current app experiences

  • will the design of this feature fit the look and feel of other features?

Competitive research

  • what are other grocery chains doing?

  • what are their users liking and disliking about their version?

Guerrilla user testing in store

  • We set up in a local stop and shop and asked users about their experience using the current Scanit application

  • Some users allowed us to follow them as they shopped and we encouraged them to talk aloud as they shopped using the app

Affinity map of findings

  • As seen by the image to the right, we took all the bullets of feedback and wrote them on postits, then grouped them based on findings to apply to our redesign

ScanUp Affinity Map.png

Creating an experience that can be easily navigable with one hand was our key takeaway. Grocery shoppers will always be pushing a cart or holding a product so we went into the design process with Fitt’s Law in mind and focusing on large touch targets.

Woman with phone in grocery store

03 WORKSHOP

Cross-functional team workshop to get multiple perspectives.

Agenda:

  • Icebreakers - to get the participants familiar with each other

  • Crazy 8’s - fold paper to make 8 squares, quickly sketch out 8 ideas from a random prompt (to get creative juices flowing)

  • Empathy mapping/”A day in the life” - what are grocery shoppers thinking, feeling, doing, and saying during their grocery shopping trip

  • Wireframing - How would your group redesign scanit

ScanUp_Workshop.png

04 WIREFRAMING

We created high level flows and 2 separate concepts A & B to stakeholders before moving on to high fidelity

The first concept is how Scanit would work standalone

The second shows how a shopper could create a grocery list, order items ahead at the deli, and clip coupons while also using the scanit app

Single Entry

Single Entry

Integrated in main application

Integrated in main application

 

05 USER TESTING

Before moving to high fidelity mockups, we tested with stop & shop corporate employees to give us feedback on the feel of the integrated scanit experience.

Wireframe prototype

06 High Fidelity Mockups

Iteratively worked together on key flows until we came upon the final designs seen below

Empty states, error messaging, price check, single scan, and checkout flows
Screenshots of a shopping app showing an empty cart, connection error, low phone battery warning, barcode scanner prompt, and a generic error message.
Screenshots showing a mobile app scanning a food product barcode, displaying product details and prices in the shopping cart, with the last slide showing the cart total.
Screenshots of a mobile app scanning a barcode on a jar of mild salsa. The app displays the scanned item, compares prices, and shows an option to add the item to the shopping cart.
Screenshots of a mobile shopping app showing product scanning, cart summary, checkout process, barcode scan, and purchase confirmation.

 07 Takeaways

  • Ahold Delhaize’s stores were going through a rebrand so this project never went live

  • Throughout the process i got to dive deeper into specific areas of UX

    • “Soft asks” vs native permissions (e.g. custom modal prefacing why a user should allow location services vs native alert appearing with generic text)

    • Error message handling in an immersive experience

    • Integrating with a 3rd party API that is key to the experience

  • Sparked change in the org around UX team structure as we were the first to demonstrate success with an integrated team model vs agency (separate UX team)

    • More collaboration and check-ins with developers and product manager meant faster quicker development time with a higher quality feature