BEST BUY - STORE INVENTORY APP
Modernize the outdated Supply Chain application.
Problem & Goals
Update Best Buy’s Supply Chain software, one feature at a time, onto a new platform. Initially, the focus was on stores that used binning and the tasks performed using handheld mobile scanners (TC-52).
Solution
I developed a design philosophy, interaction patterns, components, and micro interactions for the new application. Then, I 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.
Handheld Android Scanners (TC-52)
If you don’t know there are Andriod Handheld scanners that with a button press on the side oif hte devide sends an infred beam to scan a barcode or QR code. For Best Buy they relie on these devcies sicneht are mboiel and not teathered to a computuer. The model Best Buy uses is the Zebra TC-52 which is outdated.
Design Philosophy
Since we are creating a brand new app I had the opportunity to create all new design patterns and micro-interactions.
Background
I took over for this project after the frist couple tasks were designed and coded. I noticed there were a lot of inconsistencies like multiple different patterns to scan. Incossostency on what a swipe behavior actiosn will be. So the first this I did was establihed these design and interaction patterns and communciated to product and engernering why I’m changing what was previously built for consistency and better user experience moving forward.
The Philosophy
Copy/Instructional Text
Copy on page for instructions are written assuming the employee has been trained a bit. The copy is there to remind them if they haven’t done the task for a while, or it is the employee’s first couple weeks on the job. Change the names of things when we can sicne there are
Consistent interactions
Swipign a product cardsame way to find in store and turn on ESL
same way to remove items from a list
Whenever a scan use the scan/handkey component
ESL and Find in store (buy employee request) ESL is on the right (easier to get to usd and used a lot)
Micro animations
Transitions and micro animations for clarity and for delight.
Page Push when navigating through menus (right to left- drilling it and left to right going back)
Bin are always displayed in black bar and when opened (scanned) the bar animates from the bin name in the list or the bottom of the screen and move up. Closing the bin wipes the bin and it’s content down
When completing a list or bin action tell the user and transition back to the main list to continue their next action or task.
Layout
Designed for ease of usability and speed of use. Easy to scan vs. beautiful clean design (overly simplified)
Consistent number count location
Numbers are on the right in a column to scan all in one area. Easy to see put not overwhelming since they are not always looking at the screen to validate their scan.
Way Finding
Main navigation sections- header is black (background a slight gray-should change to white
Other pages are white header and white background (Note, this pattern was developed before I took over for the project and stuck with it since they had some things built out already. I didn’t necessarily agree with it and was going to look into it and the navigation when I had more of chance to look at the IA as a whole for the future.)
Clickable items or cards have button shadow
I’m not that happy with the design here- wanted to explore more when we know the IA of the site
Item card or product card/component
Reusable component for all scenarios. Have the main component be the base and then stack additional components underneath for different scenarios
show fgma page flat with icon blinking. numbers or dots to respresetnt- show swipe. ESL and undo last scan