BEST BUY - STORE INVENTORY APP
Modernize the outdated Supply Chain application on Android handheld scanners.
Problem & Goals
Update Best Buy’s Supply Chain application, one feature at a time, onto a new modern platform. The initial focus was on Best Buy stores that used binning, and the tasks performed using handheld mobile scanners (TC-52).
Solution
I developed design principles, interaction patterns, components, and micro interactions for the new application. Then, we simplified each scanning task based on these patterns.
Responsibilities
As the sole designer on this project, I was responsible for all aspects of it. I conducted research at Best Buy stores by observing employees and asking questions. I collaborated extensively with project managers. I developed all wireframes and prototypes for reviews and made timely adjustments for final deliverables. I maintained high standards for Engineering and Product, which they adopted. I provided education to Product and Engineering teams on design thinking and encouraged reevaluation of existing practices. My involvement lasted 4 months before the project was deprioritized by Design Resources. Consequently, there is no data available on the outcomes of my contributions.
Background Knowledge
These mobile scanners are equipped with a side button that activates an infrared beam to scan barcodes or QR codes and are integral to Best Buy's Supply Chain operations. The specific model utilized by Best Buy is the Zebra TC-52.
Android Handheld Scanners
An organization system of shelves and sections to keep track of the inventory. Each bin has a number and a barcode. This is placed on or above the bin so it can be scanned.
Binning
Problem 1
Inconsistent UX for the New Application
I took over the project when only a few tasks had been built on the new platform. I noticed numerous design inconsistencies and undefined patterns, which was not an ideal starting point.
5 Different Ways to Indicate You Can Scan
The most important interaction of a scanning device is of course the scanning action. Taking over the design for this project, I didn’t know what pattern to use since there where so many different ones. Also, the Handkey button was in a prominent position for an action that is rarely used.
Inconsistent Ways to Access the Same Actions
Some of the most common behaviors weren’t even accessed the same way in each task. For example, sometimes a swipe would reveal Remove and Can’t Find actions. Other times a swipe would reveal Find in Store and ESL (Electronic Shelf Labels)
Remove and Can’t Find Item
Find in Store and ESL
Numbers Are in Different Locations
The placement of numbers lacked consistency. There was no vertical alignment to facilitate easy visual scanning. Additionally, the Total numbers appeared either on the right or left and in varying font sizes.
Solution 1
Develop Consistent UX Patterns.
Then convince the team these changes are necessary.
I addressed the design inconsistencies in the recent release to both the Product and Engineering teams, providing a business rationale for modifying the newly implemented patterns. Despite being new to the team, I earned their trust and received consensus that all subsequent tasks would adhere to my revised patterns. Additionally, we agreed to update previously released behaviors to conform to the new patterns during future iterations.
Common Components and Building Block
I developed patterns and components for all interactions. For the product card, I built upon the existing component by expanding it to encompass all future scenarios, ensuring a more cohesive, consistent, and scalable experience.
Scanning Tasks
TASK #1
Put Items Away into Bins
Scenario: You just received a shipment of new inventory and need to put them away in bins.
Steps:
Fill a cart with product and go throughout the warehouse to stock items on shelves and in bins.
Find a bin with room.
Scan the bin number.
Then scan the item(s) you will place in the bin.
Move on to next free bin.
Legacy Experience
Simplified navigation by reducing clicks.
Established a consistent bin pattern.
Added an "Undo the Last" scan option to correct mistakes without restarting.
Solution
Steps for the Figma Prototype
Select “Put Product Away”
Select “Inbound”
Scan a Bin Barcode on the shelf - where the product will go (click anywhere to simulate a bin scan)
Scan Item (click anywhere to simulate an item scan)
Scan another Item (click item to simulate a new item scan)
Scan the same item again (click on the screen)
You are done with that Bin - Now just scan a new Bin (click on the screen)
Scan Item to put into that Bin (click to get an error message of wrong invalid SKU number)
Click Okay
TASK #2
Pull Products from a List
Scenario: An agent created a list of products to pull/get for a customer.
Policy is not to first pull items from the salesfloor because then someone just needs to restock them.
Steps:
They need to start in the warehouse and pull items from bins
If the items they are looking for are not found there then they are taken to other areas that are set aside for customers’ orders that were cancelled
If there are still products needed, then are directed to the salesfloor to pull the items. There is find in store map and a way to light up the electronic signage (ESL) to help them find it.
Legacy Experience
Established a systematic approach for scanning bins and choosing store areas.
Advanced the agent to the subsequent step automatically to increase efficiency.
Implemented micro-interactions to clarify completion and progression to the next step.
Solution
Steps for the Figma Prototype
Select the “Tony Peterson” card (The agent who created the list)
Scan the first bin in the list- (click on the first bin to simulate a scan) Note: Bin order is based on navigating the store quickly.
Scan the 3 units you see in the list that are in this bin (click anywhere to simulate an item scan) (Note: If you click on the Cannon image it will simulate a swipe to more actions)
Scan the next bin in the list (click on the bin to simulate bin scan)
Scan item in the bin (click on the item to simulate scan)
You now need to go out of the warehouse to the salesfloor to the area for Customer orders that have been cancelled. No Bin labels here.
Click on “Customer Order - Cancelled” (click on the button)
Scan the Item (click on the item to simulate scan)
Click on “Salesfloor” which is now active. (If you don’t need to go there it would be removed from the list by the system)
Scan the Item (click on the item to simulate scan)
The list is completed, and you are automatically taken back to the main list
TASK #3
Item and Bin Lookup
Item Lookup
Scenario: An agent is on the salesfloor, and a customer wants a product that not stock on the shelf.
Bin Lookup
Scenario: An agent is in the warehouse and see a bin they need to act on.
Issues:
Currently, each task Item or Bin are in different menus and sub menus to navigate through.
You need to choose your task to tell the scanner specifically what you are scanning and why.
Then you need to navigate back out and drill back in and do it again.
Time consuming and a lot of cognitive load.
Legacy Menu System
By combining scanning and item and a bin into one scan field on the Home Page, all the agent needs to do now is scan what they need to. Then choose what they want to do to it. No more menus to dill in and out of.
Solution
Steps for Figma Prototypes
Item Lookup (Scan Item)
Scan the item to get information about it (click “simulate an Item Scan)
Click Button “Pull Item from Bin” to find out what bin it is in
Scan a bin (click the screen) and then scan the item to pull it from the bin (click the screen). In the past you would have to navigated through a bunch of menus to pull the item.
Bin Lookup (Scan Bin)
Scan a bin (Click “Simulate Scan Bin)
Select what action you want to perform
Follow your own adventure (clicking on the page simulates a scan)
Note: An outstanding issue was a quick way to get back to the Home Page or access the menu. Next on the priority list was a full IA study with navigation models to address this issue. See below for a menu idea.
Future Navigation Idea
Pain Point:
I’m on the salesfloor doing an assigned task. A customer asks me a question so that I need to navigate away from my current task. Then after a period of time, I need to remember where I left off and find it again.
A way to save their spot and quickly navigate back to it from the menu.
Solution: Save My Spot
Steps for the Figma Prototype
Click “Save My Spot” button (It records the place it is saving)
Select “Item and Bin Lookup” (to lookup up information for the customer)
Scan the Item (click the screen)
Click the Menu Icon (to open up the menu)
Click “Return to My Spot” button (you are taken back to the place you left off)
TASK #4
Resolve Bin Issues
Scenario: As an agent/manager I’m presented with a list of issues with inventory that I need to resolve by the end of the day.
Legacy Lists
Currently there are 3 separate list of bins (locations) that they need to audit for a certain reason. So, agents are assigned to a list and need solve all issues in that list.
Suspended SKUs - Items flagged as “Can’t Find”
Locations to Audit - Bin audit due
Location Audit Variance - Bins that the inventory count doesn’t match
Bin QTY greater than Store’s inventory (net new for us to add - currently only done with Excell and email)
Solution
Researching and analyzing the tasks, we came up with ways to be consistent and ensure greater accuracy and time savings for the first release. I also needed to create a net new experience for issues for when the Bin count is greater than the store inventory count. This scenario was done only with Excel and email before.
Steps for the Figma Prototype:
Select “Resolve Bin Issues” (Red dot indicates there are issues you need to solve)
Each menu item is clickable (recommend going in order)
Follow your own adventure (Note clinking the screen simulates a scan)
You will need to use that back arrow to back out of the list and go to the next list
Future Solutions
Outstanding Problem:
The agent or a different agent might visit the same bin more than once to resolve different issues. How can we save time and eliminate this scenario?
From the beginning of this assignment, I was always trying to eliminate the need to go to the same bin more than once. I came up with multiple solutions with different levels of complexity. We wanted to release slowly so these ideas will be explored after the initial release.
When an agent is in a bin solving a certain issue.
They complete that issue.
Then present a message that there is another issue and to solve for it.
Idea 1: Alert Messaging
My grand idea was to combine all lists of issues into one master list of bins.
The agent doesn’t need to know why they are scanning that bin, and they really don’t care.
It’s all the same interaction regardless of the issue.
So why have 4 different lists to manage and possibly go to the same bin multiple times?
Business and Product loved this idea, but further discovery sessions were needed to determine the list's size and whether a store could complete it in one day. They assigned sprints to Data and Engineering to address these questions.
Idea 2: One List
The Design Process
Research / Discovery
Gained empathy for the user by observing agents completing tasks at Best Buy Stores
I watched videos on tasks that were not available at my local store.
Researched a mapped out each task and identify opportunities collaborating with team.
Entered bugs on the latest ENG release and familiarize myself with the Figma Specs
Identified inconsistent patterns and missing functionality specs
Research other TC-52 applications at Best Buy
Design Iterations
Created multiple rounds of wireframes and prototypes for each task
Reviewed with team and stakeholders throughout and iterated designs based on feedback
Reviewed designs with Engineering to incorporate their feedback
Reviewed new patterns with the Best Buy Design System team
User Tests
Sent prototypes to agents for feedback or prototypes brought into stores for feedback
Application was only for test stores at this time, so all releases were just a big test for feedback
Final Solution
Final comps, prototypes, and specs handed off to ENG in Figma and User Stories
Designed components for all scenarios and error states
Entered bugs and collaborated with ENG over issues and resolution
Held team to high standard to get the patterns coded correctly
