Case study · Grainger KeepStock

Storage Unit Builder

A visual tool for KeepStock reps to build a customer's storage units and slot products into them, replacing spreadsheets.

Project roleLead Product Designer
ScopeEnd-to-end product design, from research to developer handoff
PlatformKS WorkStation · internal web app
The Storage Unit Builder: a product table on the left and the pigeon hole unit drawn as shelves and bins on the right. A fender washer is being dragged onto empty bin 10-4.
0 → 1 a new tool: before it, sites were set up and changed in spreadsheets
End to end research, flows, UI, and developer handoff
2 jobs setting up new customer sites and managing changes after launch

Context

A physical problem managed in rows and columns

KeepStock reps set up storage at customer sites, from pigeon holes and lockers to vending machines and carousels, and keep those sites current as products change.

There was no tool for it. Every unit, shelf, bin, and product assignment lived in a spreadsheet. I designed the Storage Unit Builder end to end: an internal KS WorkStation tool where a rep builds the unit visually and slots products into it.

Before & after

From a spreadsheet to the unit itself

A storage unit is a physical object: shelves, bins, and the products sitting in them. In a spreadsheet it becomes a long list of positions, so nobody could see the unit they were building.

Before, spreadsheet: the unit as a list of rows with unit, bin, item number, abbreviated description, and quantity After, Storage Unit Builder: the unit drawn as shelves 9 to 12 with labeled bins; empty bins on shelves 9 and 10 are dashed
01

You couldn't see the unit

A list of positions hid the shape of the shelves, so reps had to picture the unit in their heads.

What I designedThe unit is drawn the way it's built, with the same shelf and bin labels as the real one.
02

Gaps were easy to miss

Empty or unassigned bins looked like any other row until someone went looking.

What I designedEmpty bins are dashed, and the header keeps a running count of filled bins.
03

Rows and bins drifted apart

Editing a product meant finding the right row and trusting the bin number next to it.

What I designedThe table and the unit stay in sync: select a row and its bin lights up, and the other way around.

The flow

Five steps from an empty site to a published unit

The same flow handles a brand-new site and a change to an existing one. A rep can stop at any step, save a draft, and pick it back up.

  1. 01

    Pick a unit type

    Each customer site mixes unit types. Choosing one up front sets the right structure, labels, and defaults for everything that follows.

    New storage unit dialog: name the unit and choose pigeon hole, locker, vending, or carousel. Step 1 of 5.
  2. 02

    Configure shelves and bins

    Reps set the shelf and bin counts to match the real unit, and the preview redraws as they type. Labels follow the physical numbering, so 12-4 on screen is 12-4 on the shelf.

    Shelves and bins per shelf steppers beside a live preview of an empty 12 by 9 grid. Step 2 of 5.
  3. 03

    Find products and slot them

    A product panel sits beside the unit. Reps search the customer's catalog, then drag a product onto a bin. The bin shows a drop target before they let go.

    Product search for washer with four results; a fender washer is being dragged onto bin 10-4. Step 3 of 5.
  4. 04

    Edit a bin

    Selecting a bin, in the unit or the table, opens its details beside the unit. Reps set the dispense quantity, confirm the customer's part number, or swap the product without leaving the layout.

    Bin 12-4 details panel with dispense quantity, unit, and customer part number, beside the unit grid.
  5. 05

    Review changes and publish

    Before anything goes live, the rep sees exactly what changed since the last publish: products added, moved, or removed, and quantity updates. That's what makes the same flow work for ongoing changes, not just new sites.

    Review and publish: 108 bins, 102 filled, 6 empty, 5 changes, with a list of added, moved, updated, and removed bins. Step 5 of 5.

Outcome

Spreadsheets out, one shared picture in

35% less timeThe Builder was part of the 3-year KeepStock modernization that cut task completion time by 35% across inventory management experiences.
Replaced spreadsheetsSite setup and changes moved out of spreadsheets and into one internal tool.
One picture of the unitReps, and anyone they hand a site to, see the same unit the customer has on the floor.
Setup and change in one flowThe same five steps cover a new site and every update after it, with a clear record of what changed.

Next case study

AZ Checkout Experience

View case study