Turning a browsing storefront into an ordering tool for repeat buyers.
Services
UX Strategy
Information Architecture
E-commerce Experience Design
Post-Launch Optimization
Team
Design
Dev
Copywriting
Sales
Role
Lead UX/UI Designer
Client
B2B Supply Company
Client name and product imagery withheld under NDA. Screens shown are redacted or recreated to illustrate structure.
Fifteen percent more orders completed
A B2B supply business had administrators abandoning orders mid-flow — not over price, but because they weren't sure they'd picked the right items. We rebuilt the storefront as a headless Shopify front end in three months, using existing data and assets. Sales are up 15% since launch. Every screen below started as a problem worth solving. Here's how each was resolved.
Four Paths,
One Add to Cart.
These users don't browse. An administrator restocking a location already knows what they need, so a category tree is friction dressed as discovery. Express Order is the fastest route with its own lane, merging with the others only at Add to Cart.
Everything featured, nothing prioritized.
The original homepage weighted product tiles, education, and brand promise equally. Together they left no obvious first move and the highest-volume products never surfaced. I rebuilt the entry point around the products buyers actually wanted - their best sellers.
Fourteen tiles,
no ranking.
Fourteen rectangles with fourteen identical Shop Now buttons. The real problem isn't the styling — it's that every product sits at an identical hierarchy, so users choose blind. The revised version leads with the hero product, surfaces the next four categories beneath it, and uses three folds to steer toward the items that actually sell.
Twelve fields before anything.
Registration asked for twelve fields before a customer had ordered anything, which is a form-filling to buy supplies. That is the most expensive possible moment to lose a customer. I made it progressive: collect what checkout requires, defer the rest to the account area.
Best sellers get shelf space.
Best sellers sit under the hero in a weighted grid — one large tile, four small — visible without scrolling. Express Flow gets its own band beside a three-step summary, because a shortcut nobody understands is a stray link. Events moved below the ordering path as an ancillary path.
A table, not a gallery.
Administrators already kept informal order sheets, so I built around the habit rather than replacing it: search by name, ID, or description, filters left, results as rows. Product name leads because that's what people search. Availability reads as labelled status, so an out-of-stock item offers a Notify Me which is one less trip back to check, one less phone call to place.
A tray that matches the tray.
Teams work from a physical tray with labelled positions. The old site made administrators translate that layout into SKUs in their heads, which is where wrong orders came from. So the interface replicates the tray: same grid, same labels, quantity entered in place. A dot marks every position already holding a quantity. Totals calculate as you go.
