Item Management
Senior Product Designer • React Web
Watch a video walkthrough of this project here! (7 mins)
PROBLEM
Backbone* users didn’t have a quick way to modify large groups of items or take actions on large groups of items.
They would either 1) request help from our backend team, misusing important engineering resources, or 2) they would edit/take action on items one by one, making a quick task take several hours.
*Backbone is Foxtrot's internal web tool that includes functionality to create and manage inventory
SOLUTION
✨Item management✨, a bulk action tool that gives users the functionality to modify item data in bulk, as well as take actions on groups of items.
-
Reduced CSV upload requests to our backend team by 60%, freeing up engineering resources
-
Sped up tedious work for Backbone users by an average of 2 hours per task
Success modal after bulk action is complete
Robust filtering
PROJECT BACKGROUND
The idea of a tool to bulk adjust items was born from a hackathon project done by a senior backend engineer on my team.
He had experienced various teams at Foxtrot asking for his help to modify data for large groups of items, so he developed the backend framework needed to allow users to complete those modifications on their own.
MY ROLE
Since the concept of Item Management was proven successful with an MVP during the hackathon, my role in this project was to further design and polish the UX and UI of the tool.
I conducted research with Backbone users to understand their use cases for needing to modify big groups of items, as well as how they would like to search and filter Foxtrot's 7,000+ items to get to the group of items they need.
DESIGN PROCESS
Describe your image
Describe your image
Describe your image
Describe your image
MVP created by engineer during Hackathon
Research insights and recommendations
Research synthesis
THE PRODUCT
There are 3 key elements that make up the UX of Item Management: 1) search + filter, 2) the bulk action flows, and 3) the data table
SEARCH + FILTER
Getting to the items you need
Flexibility in how a user searches Foxtrot's catalogue of items
Multiple filter options to help users hone in on the items they need to modify or take action on
ACTION MODALS
Taking bulk actions
'Table topper' showing users the selected item count as well as available actions
Action flows that guide the user through the necessary selections, clearly confirming their choices before modifying a large group of items
Confirmations that the items were successfully updated, or conversely, notifying the user if there was an error with an item
DATA TABLE
Reviewing relevant item data
Before taking actions or modifying data, users can review existing item data. Research with users informed what fields to show here
RESULTS
Item Management is used daily by many teams at the Foxtrot Hub - merchandising, supply chain, marketing, operations, and more.
After releasing, I conducted additional research on the functionality to understand how users were using it and what could be improved.
BROWSE MORE OF MY WORK
