Context

I wanted to enhance the Famous Footwear app by building a barcode scanner that encourages shoppers to learn more about products, find similar products, and purchase products not available in their preferred store.

Evaluate

The company had a 300% improvement on user conversion when using the barcode scanner.

After just 3 months, we saw 113% return on investment.

$358K Total Revenue as of June 2018.

Define

I visited a Famous Footwear store looking to answer:

• Where are barcodes located in the store?

• How might the customer user a barcode app?

• What does a customer expect from a retail app barcode scanner?

I also performed a competitive audit looking at different brands’ barcode scanners testing their functionality and UI.

The problem

In the end, I distilled my research into one problem to focus on:
How might we create an accessible and purposeful barcode scanner in the app?

Design Process

I created user flows for both the iOS and Android app experiences and proposed specific features to be implemented into the scanner. From there, I brought the sketches in Sketch to create pixel perfect comps for the developers.

Feature 1: Simple Scanning Experience

• Scanning experience is intuitive and quick.

• Clear scanning feedback - user immediately knows where to focus the viewport while scanning, and receives the appropriate haptic feedback

• Available flash - the flash can be toggled on when the user is in dimly lit locations

Feature 2: Quick product information

• Feedback after a scan is quick and focused

• Clear hierarchy - order of components is easy and quick to read

• Quick Access - currently pulling up the PDP takes a long time. With the product preview, it’s fast and allows the user to choose whether they want to proceed to more information.

Feature 3: Easy access to the barcode scanner

• Search becomes more dominant in the header allowing the user two ways to search for items.

• New barcode icon to match existing icon style.

• Removed Forward button as this was no longer needed and removing it brought more focus to the header.