Designing the Würth Baer Supply Company App
Mobile ordering for a woodworking hardware distributor's 100,000+ product catalog.
- Type
- Client project at Villvay Systems
- Role
- Senior UI/UX Designer
- Platform
- iOS and Android
- Tools
- Figma
The challenge
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.
The outcome
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.
Who it is for (Personas, if you will..)
Ordering
Trade buyers
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
Woodworkers buying for themselves
Hobbyists and small shops that browse by category, compare brands and finishes, and rely less on trade shorthand.
How it came together
- 01Discover
Auditing the store the app had to carry
The website already did everything: the full catalog, contracted pricing, shopping lists, order history and branch availability. It was effectively the specification, so I worked through it as a customer and noted which parts a phone had to keep intact and which only worked because a desktop has room to spare.
Three findings shaped everything after it. Buyers search by item or manufacturer number rather than by name, because the catalog carries products with long, similar names. Prices change by unit and by quantity tier. Availability only means something once it is tied to a branch and a stock count.
What this told me
- • Treat the existing site as the specification, not as a layout to copy.
- • Identify products by number wherever they appear, because the names repeat.
- • Never show a price without its unit, or stock without its branch.
- 02Define
Deciding what home leads with
Everyone opens the app on the same screen, but not everyone arrives for the same thing. Someone with an account already has history and agreed prices to work from. A first time visitor has a catalog thousands of products deep and no way into it yet. Home resolves differently depending on which of those is true.
Signed in, the account has plenty to offer straight away, so shopping lists, recent orders and purchased items sit above the category grid, with contracted pricing carried through the catalog and support reachable from the same screen. Compact rows keep all of it in view without pushing browsing out of reach. Signed out there is no history to show, so categories take the top of the page and one prompt names what an account adds: your pricing, past purchases and order status.
Signed in: account tools lead the page, with search and scanning always available. Signed out: the catalog leads, and one prompt says what signing in unlocks. What this told me
- • Let each state lead with what it can actually offer.
- • Keep account tools compact so they do not crowd out browsing.
- • Ask for sign-in by naming what it unlocks, not by blocking the catalog.
- 03Ideate
Rebuilding the page structure for one screen
On the website a product sits on one wide page with everything visible at once. A phone cannot do that, so rather than shrink the layout I sorted the same information by the decision it supports. Search identifies an item, list cards let you compare, the product page resolves the purchase, and Add to Cart stays pinned because it is what the rest leads to.
Two things earned a native treatment rather than a direct port. Buyers usually have the product or its packaging in hand, so barcode scanning sits inside search instead of behind a menu. Mobile only discounts got their own tab, because a reason to open the app should not be buried on the home screen.
What this told me
- • Sort information by decision instead of shrinking the desktop layout.
- • Treat scanning as a core search method, not an extra.
- 04Design
Sequencing a dense product page
The desktop product page shows identifiers, pricing, configuration and availability side by side. On a phone they have to be sequenced, so I ordered them the way the decision is actually made: confirm the item and its numbers, review unit and quantity tier pricing, configure the variant, check named branch availability and backorders, then add to cart.
Configuration keeps both routes the website offers. Buyers who know the part number can select it directly, and everyone else can build the item from options, with an explicit “OR select options” divider between the two. Struck through combinations explain what is unavailable without hiding valid ones.
Item identity, pricing, configuration, and branch availability in decision order. Visual categories make unfamiliar hardware faster to recognize. What this told me
- • Support both part led and option led selection.
- • Disable invalid combinations instead of hiding them.
- • Progressively disclose secondary details.
- 05Validate
Refining it on real devices
After launch on iOS and Android I reviewed the app on real hardware rather than trusting Figma alone. The product page needed the most iteration, because pricing, options, stock and purchasing actions all compete for the same narrow column.
I tightened the pricing rows, the option controls and the stock block until the page stayed precise without feeling crowded. Secondary detail stayed reachable behind Show More rather than being cut, so nothing the website offered went missing.
What this told me
- • Revisit the most complex screen after launch.
More from the project
Looking back
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.