Re-imagining Price Check with Augmented Reality

Tim Sears
Tim Sears
Nov 1, 2018 · 4 min read

Walmart store shoppers love using our mobile app barcode scanner as a price checker. Our team sees the potential of this product as so much more, though. When a customer launches the scanner, they get a direct connection between the digital and the physical world that their screen and camera lens creates for them.

That’s the magic of augmented reality. Making the real world more valuable is an incredibly powerful communication medium because people instinctively just, “get it.” There’s very little learning curve.

Image for post
Image for post
AR Anchors keep track of what you’ve scanned in the real world.

Last spring, our team won an internal Walmart hackathon thanks to our compelling explorations using Apple’s ARKit to help customers save time and money. We were so excited about what we’d learned, we challenged ourselves to see if we could use this technology to improve upon our most frequent and relied-upon use case: scanning barcodes to look up products.

After several ideation sessions, we gravitated to an idea we believed could solve three customer problems we haven’t been able to successfully solve until now:


The Perception of Fast

We had a hypothesis that a significant amount of load time after scanning an item actually wasn’t from typical performance focus areas such as network latency and JSON deserialization.

When a user scanned a product, we took them out of the experience and pushed a new UIViewController onto the navigation stack. We considered that the animation time of this transition coupled with a subsequent network call to load related products could be a major bottleneck.

We tested this hypothesis with debug tracing and found that if we could eliminate this transition, we could reduce the time it took to enable a user to scan another item by an average of 50%.

But First, A Design Reboot

One disadvantage we needed to overcome was that the design needed a complete overhaul. The legacy experience was mired by excessive chrome. The reticle was a small rectangle of negative space serving a small window into reality.

We knew that if we wanted to create an experience that felt fast, we needed to make the content the focal point and strip away any other visual elements that created cognitive strain.

The result is an interface that extends to the edges of the display encouraging you to focus on what you’re scanning in the real world and less on digital ornamentation.

When you’re shopping at a leading low-price retailer with an immense product selection, it can be challenging to decide which product to buy from a category when the prices are very similar.

Imagine you’re on a quick shopping trip because you’re out of diapers and you need to make a split-second decision. You need to pick high quality diapers for your child in the car. Your personal well-being could depend on it! You could buy the diapers that are the least expensive, but how do you know they are of acceptable quality? If you spent just a little bit more money, could you get diapers that are of significant higher quality?

We designed the AR Scanner to anchor dots to what you’ve scanned in reality. As you pan your phone between products you’ve already scanned, the bottom product tile updates based on which anchor you’re pointing at.

The result is something that feels like an extension of an interaction you already do today. As you pan your phone around looking at a row of products, the product at the center of your gaze is updated below giving you a way to very quickly compare by price and product reviews.

You really have to see it to believe it. Hint: Watch the video above.

This approach also solved another user interaction problem that is common amongst AR interfaces: clutter. By using smaller dots as opposed to anchoring the entire content to the product itself, we don’t have to worry about content occlusion when multiple products are scanned in a very close space.

Baby Steps

We designed our AR Scanner as an opt-in alternative to how we’ve traditionally approached scanning. At Walmart Labs, we take plenty of risks, but we’re constantly measuring and evaluating data to ensure our risks are controlled and calculated.

In this case, we’re starting with iOS first. Since ARKit can only run on iPhone 6s and newer, and we needed to use some features in ARKit 1.5 which requires at least iOS 11.3, we’re naturally starting with a limited audience.

If you’d like to take the AR Scanner for a spin, download the latest version of the Walmart iOS app (version 18.20 and above) and open the scanner by tapping the barcode icon in the search bar. Once the scanner has loaded, tap on the AR icon in the navigation bar to start the AR Scanner. It’s the one on the far left that looks like a 3D box.

We have a big vision for the future of scanning with augmented reality, and we’re excited to be taking this first step towards many exciting things to come.

Walmart Global Tech Blog

We’re powering the next great retail disruption.

Tim Sears

Written by

Tim Sears

Senior Engineering Manager, Walmart Labs. Helping bring incredible mobile experiences to life. Hungry. Foolish.

Walmart Global Tech Blog

We’re powering the next great retail disruption. Learn more about us — https://www.linkedin.com/company/walmartglobaltech/

Tim Sears

Written by

Tim Sears

Senior Engineering Manager, Walmart Labs. Helping bring incredible mobile experiences to life. Hungry. Foolish.

Walmart Global Tech Blog

We’re powering the next great retail disruption. Learn more about us — https://www.linkedin.com/company/walmartglobaltech/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store