Mobile ordering for a woodworking hardware distributor's 100,000+ product catalog.
Bring an established desktop storefront to mobile with most of its functionality intact, without losing the details trade buyers rely on: item numbers, pricing units, quantity tiers, and branch stock.
A live iOS and Android app that carries the store's ordering workflow onto a phone, with scanning, contracted pricing, branch stock and account history all a few taps apart.
I was the designer on the mobile app, working from the existing storefront through to the built product and staying with it after release.
What I was responsible for
Ordering
Cabinetmakers, contractors, and furniture shops that usually arrive with a part number or a previous order. Their priorities are quantity pricing, branch stock, and delivery.
Browsing
Hobbyists and small shops that browse by category, compare brands and finishes, and rely less on trade shorthand.
The website already did everything the app needed to do, so I treated it as the spec rather than a layout to shrink.
Working through the store as a customer showed what a phone could not drop. Buyers identify products by item and manufacturer number, because the catalog is full of names that differ by a word or two.
Prices change with the unit and the quantity tier. Stock only means something at a named branch, and contracted pricing changes the price itself once you sign in.
None of that is an observation about the old site. Each one is a constraint: separate a number from the thing qualifying it and the screen gets easier to read and worse to buy from.
Key decisions
Everyone opens the app on the same screen, but not everyone arrives with the same thing behind them.
An existing account brings shopping lists, past orders and agreed pricing. A first visit brings a catalog thousands of products deep and no way into it.
So home resolves differently. Signed in, account tools sit above the category grid in compact rows. Signed out, categories lead and one prompt names what an account adds. Blocking the catalog behind a sign in wall would have been easier to build and worse to use.
Two things earned a native treatment rather than a port. Buyers usually have the product or its packaging in hand, so barcode scanning sits inside the search bar as a way of searching. Mobile only discounts got their own tab, because a reason to open the app should not be something you scroll past.
Neither came from the website, since neither problem exists on a desktop. The buying workflow had to survive the move. The page structure did not.
Key decisions
Desktop can show identifiers, pricing, configuration and stock side by side. On a phone they compete for one column, so I ordered them around the sequence a buyer actually moves through.
Configuration keeps both routes the website offers. Someone holding a part number selects it directly, and everyone else builds the item from options, with an explicit “OR select options” divider between the two.
Combinations that do not exist stay on screen struck through. A chip that vanishes looks like a bug, while a disabled one tells you the finish is not made in that size.
Add to Cart is pinned, so the thing the page is for never scrolls away. Specifications, documents and related items sit behind Show More. Nothing the website offered was dropped, it just stopped arriving all at once.
Key decisions
The app shipped on iOS and Android, and the design work carried on from there.
I went through the built product on physical devices rather than signing off from Figma. A pricing block that looks balanced in an artboard can read as a wall of numbers on a handset held at arm's length.
The product page needed the most work, which was no surprise. It carries more of the product logic than anything else in the app.
Pricing rows were tightened, option controls resized and respaced, and the stock block reworked so the branch and the count read as one thing rather than two competing ones. Other dense screens took smaller adjustments of the same kind.
None of it came from cutting content. The detail a buyer occasionally needs stayed behind Show More, one tap away rather than in the way.
The hardest decision was what to carry over from the desktop product page. Every field on it serves someone, so I kept what most buyers need to identify, price, configure and source an item, and moved the rest behind Show More. That preserved the catalog's precision without asking the first screen to do all the work at once.
All brand names, trademarks and product imagery shown here remain the property of their respective owners and clients. This work was produced during my time at Villvay Systems and is shown for portfolio purposes only.