Case Study Building a product lookup feature

Building a product lookup feature that sees 7+ million queries a week enabling associates to find item info, stock faster and help customers — ultimately bridging the gap between fractured data systems.

Product lookup tool for finding item information

My Role

For this project, I functioned as the sole designer while collaborating with 5 engineers, 1 product owner, and 1 business operator. For the first half of the project, I also filled in the shoes of a researcher to test usability and validation for the first iterations. In the second half, I partnered with a researcher to build an even more powerful experience.


Making product lookups more human-friendly

How customers search for products on Walmart.com and how associates search for products on their work apps are drastically different — both in terms of the data shown and ease of use. This meant there was a mismatch between what associates see and what customer see. This feature gave Walmart the opportunity to bridge the old and outdated legacy system associates used with a streamlined process that better matched the experience customers have when searching for items.


The problem

Walmart has two different data sets for inventory — what stores use internally and what’s used for customers on the customer-facing website and app. Walmart is currently updating is systems be one and the same, so this problem doesn’t exist anymore — but time is of the essence, and we needed to find a way to merge the two.

No way to search for products by name in the existing work apps

These two different data sets meant associates had no way to search for product unless they physically had a barcode in their hand or by some miracle, knew what the UPC was. So when customers asked where something was or if an item was in stock, associates had no way to look this information up with their existing work apps.

As a work around, associates started using the customer-facing app to search for products. The problem with that though is the walmart.com app doesn’t have all the information that’s available on the internal system — things like barcodes, sales floor and backroom stock amount, UPCs, replenishment dates and more. This results in lost sales and an overall poor perception from both the associate and customer.

Example of associate product lookup tool versus the customer product lookup tool

Associate’s tool for looking up product information vs how customers lookup product information

In work apps, associates can only search for products by scanning a barcode or by inputting a UPC number. Customers on the other hand, can search for items by using generic terms like desk or milk.

Time-consuming price checks

The other big problem with this system dealt with price checks. If a customer is purchasing an item with a damaged barcode or no barcode, associates had to walkie someone and ask how much something is along with what the UPC number is. This feature gave us the opportunity to eliminate these price checks, leading to faster checkout times and happier customers.


Challenges

The biggest challenges with this project resolved around finding a happy medium — we needed to give associates a way to better help customers but also not completely recreate the existing product info pages. This meant creating a new lookup feature that could work in unison with the work apps associates already had (until the transition to one data set happens).

We also ran into some tech constraints around scanning and had to figure out a solution to make universal scanning with this feature more user-friendly.


Solution

Around the same time this project started taking off, I had also been working on an experimental digital voice assistant that could help associates find metric and scheduling information faster. Product and business decided to give this digital assistant full support, and it was determined this would be the starting point for our new product lookup tool.

Overtime, what this assistant can do continues to grow, but it’s main use comes in the form of associates asking where an item is or scanning an item to return detailed information.

Starting small to find what’s really needed

The current work app used to lookup product information has an extreme amount of details that have been added in over the years. This was a great opportunity to experiment and see what associates really need when it comes to looking up product information. We started small with just a few key pieces of information — price, location, modular position and whether it was in stock or out of stock. This allowed us to get feedback on what they really needed and slowly increment to more details.

Evolution

Version 1

Version 1 (left) and Version 2 (right)

Version 3

Version 3 (left) and Version4 (right)

Overtime, in conjunction with research and feedback, it’s evolved to include more details to help both the customer and the associate with the addition of store maps, inventory levels, friendly product names and drilldowns to more information when needed. It also saw some big UI updates from the original version to the current version to better align with Walmart’s design language system as well as follow the same template as item cards in the rest of the work apps.

A new way to find products and help customers

Scan an item

Scan an item to quickly locate key info for stocking and helping customers

Search for an item by name

Lookup products to help customers and find prices when barcodes are damaged

View item details

View item details to gather more in-depth information and complete work tasks

Check nearby stores inventory level

Check nearby stores to help customers when items are out of stock


Working with tech to solve scanning constraints

While this feature’s scanning ability is mainly used for scanning product barcodes, you can also scan other types of labels needed to do your job. One of these labels is what’s known as an Aisle Shelf Location Label — they’re useful to help associates find out how a section of an aisle should be laid out. On the surface, they look physically different, but it’s actually formatted the same way a barcode is behind the scenes.

Comparison of an item barcode versus an aisle shelf location label

Item barcode (left) vs an aisle shelf location label (right)

This caused an issue when scanning — how did we know if the user was scanning an item or an aisle shelf location label? Sometimes an aisle shelf location label contains the same numbers as a product's barcode UPC. We had a few different options on the table for dealing with this, but none of them were up to the level of a consumer-grade experience:

  • We could force the user to specify what they’re scanning beforehand
  • We could let them tell us what they scanned before we returned any results
  • We could run the API for product lookup and aisle shelf location lookup at the same time and only ask for clarification if two conflicting results returned

The last option was off the table — it was too costly on Walmart’s network to run the aisle shelf location lookup every time there was a scan. This route also meant the load time for the end-user would be significantly longer.

What about the first two options? While we could get away with asking the user for input, it meant extra steps and an overall poorer experience, especially since they’ll be using this to do their job multiple times a day. It was time to brainstorm and figure out another option. We looked at some analytics and research and found an overwhelming majority of scans are for product information.

With this in mind, we set out to come up with a new flow that was a happy compromise between design and engineering, but more importantly the associates. Ultimately, we came up with a solution that only calls the item lookup API initially. If no item was found, then and only then, is the call to the aisle shelf location API made. If an edge case does occur when an associate was scanning an aisle shelf location label and an item was returned, we give the associate the option to rescan as an aisle location label.

New flow for scanning

Map outlining the logic to handle different types of scanned barcode labels

This new flow allowed for ease of use with no input required by the end-user for most use cases. It also allowed us to retain a much faster results screen — Under 1 second of load time from scan to results.

Example of scanning different barcode labels

Impact

Along with being one of the core work apps most used features, this product lookup feature sees over 7+ million queries a week — helping associates find product information with ease. It’s completely transformed associate workflow so stocking associates rarely have use other item lookup tools to do their job and cashiers can instantly help customers with price checks.

Additionally, it’s also helped bridge the gap between Walmart’s two data sets. In September of 2021, drilling down to get more item details in this product lookup tool will take users to the old (but now updated) item info tool to get any additional information needed when necessary, leading to a seamless experience between two different products.