Counting is still manual
Manual processes made counting slow. Anything we built had to be faster than the routine people already had.
01 — Problem
Big-company inventory on a mid-market budget
With Vendor Managed Inventory (VMI), a distributor counts and restocks products at its customers' sites so they never run out. It works, but dedicated scan guns and custom software put it out of reach for most mid-sized distributors.
Goal
Make VMI affordable for mid-market distributors by cutting the cost of hardware and the cost of building it.
My approach was to reuse what our customers already had. Any phone with a camera could replace a scan gun, and the storefront's existing UI and checkout could replace new builds. Nearly every design decision below comes back to that idea.
02 — Research
What our customers told us
I interviewed members of our Customer Advisory Board (CAB), the manufacturers and distributors who run their B2B storefronts on our platform. They named four must-haves: barcode scanning, easy order submission, real-time inventory data, and order approval.
No real-time view
Without live inventory data, administrators couldn't see what was running low until it was already a problem.
Two jobs, two people
One person counts and requests restocks, and another reviews and approves them. That split defined our two roles: a mobile counter and a desktop administrator.
03 — Personas
Two roles, two very different days
Administrator role
Laura Porter
Laura runs the VMI program from her desk. She manages warehouses, catalogs products, oversees users, and approves restock orders. She needs to spot problems before they turn into stockouts.
User management
- Manages user accounts
- Assigns roles and permissions
Order approval
- Reviews restock orders submitted from the field
- Approves them, or adjusts them first
User role
Larry Cabello
Larry works on the warehouse floor. He counts products, keeps an eye on stock, and starts restock orders. He needs to get through a count quickly without making mistakes.
Inventory counting
- Counts inventory on a regular schedule
- Scans barcodes with a dedicated scan gun today
Restock requests
- Requests a restock when stock drops below its minimum
- Flags urgent items
04 — Wireframes
Phones for counting, desktop for control
Used by the user role (Larry)
Mobile app
The phone's camera does the job of a scan gun, so customers don't need to buy dedicated hardware. Larry scans, enters a count, and moves on to the next item.
Barcode scanning
- Scanner one tap from the home screen
- A scan brings up product details and a count field
- Confirm or cancel each scan to catch mistakes
Counting
- Numeric keypad for fast entry
- Optional note on each item
- Quick switching between products
Used by the administrator (Laura)
Desktop admin UI
The admin side is built from storefront UI that customers already know. That kept it familiar for them and cheap for us to build. Laura opens it and sees right away what needs her attention.
Dashboard
- Items below their minimum, called out first
- Fast-moving and slow-moving items
- Recent notes from people counting in the field
Product management
- Edit product details and minimum/maximum stock levels
- Count and order history for each product
05 — User testing
What testing told us
I ran usability sessions with CAB members on the core flow: scan a product, count it, submit a restock order. The basic structure held up. Two problems came out of it.
"Am I entering a count or an order?"
Users couldn't tell whether the number they typed was what was on the shelf or how many to reorder. They also weren't sure how much would actually be ordered after a count. This was the most important problem to fix.
The scanner was a hit, but too eager
People liked replacing the scan gun with their phone. But because the camera was always on, it picked up barcodes they didn't mean to scan.
The core workflow held up
Counting items and submitting restock orders matched how users expected VMI to work. We could refine the design without restructuring it.
06 — Refinements
Mobile: fixing what testing found
Fixes finding 02
Scan only when you mean to
- A Scan Mode toggle works like pulling a scan gun's trigger: the camera only reads barcodes while it's on.
- The toggle sits at the bottom of the screen, within easy reach of a thumb.
- Turning it off stops scanning, so nothing gets picked up by accident.
Supports finding 01
Count with context
- A scan opens a sheet with the product, its last count, and its last order side by side.
- The field is labeled "Count QTY," so it's clear you're entering what's on the shelf.
- I reviewed the product data shown with CAB members to make sure it was what they needed.
Fixes finding 01
The app does the reorder math
- Users enter only what's on the shelf. The app works out how much to reorder to bring each item back up to its maximum.
- Checkout reuses the storefront's existing cart UI and APIs, so there was almost nothing new to build.
Desktop: built from the storefront
A dashboard that feels like home
- Built from storefront components, so administrators start out on familiar ground.
- Reusing existing components and workflows cut development time.
Admins can restock on a customer's behalf
- Administrators can update a count and generate an emergency order from the web, without waiting on someone in the field.
- Restocking keeps going even when a field user can't get into the app.
07 — Takeaways
What it changed, and what it taught me
VMI reached beta
- The phone-plus-storefront approach took VMI to beta without new hardware and with a mostly reused codebase.
- CAB members helped shape it from the first interview to the final round of testing, so it was built around how they actually work.
- It gives mid-market distributors a big-company workflow, plus a new paid service they can offer their own customers.
Customer Advisory Boards are worth listening to
- It's like having user testers on speed dial.
- Their feedback gave the design a clear direction. It also built trusting relationships with customers, which helps with retention.
Next project — 04
B2B eCommerce App →