Narrow the selection.
Search, category, finish and in-stock filters operate on the shared product records.
Architectural hardware trade portal / Interface design
The right finish.
The right finish.
The right quantity.
A trade ordering interface that brings product specifications, pack rules and project schedules into the purchasing workflow.
We built FIELDWORK around architectural hardware orders. Buyers can move from a product and its drawing to a project list, adjust quantities and inspect the order calculation.
Explore the work ↓- PROJECT TYPE
- Interface design & front-end development
- DOMAIN
- B2B commerce
- DESIGN FOCUS
- Product selection and project ordering
01 / THE CHALLENGEA product choice
A product choice
is only part of the order.
Finish, selling unit, pack size and supply status all matter before a buyer confirms a quantity.
We used shared product records across the catalogue, detail page, quick order and saved lists. That keeps prices and product information consistent as the buyer moves between screens.
The catalogue has six SKUs, with search, filters and sorting. The detailed product page adds specifications and a downloadable drawing; the order screen gives quantities and fulfilment preferences more room.
02 / THE STRUCTUREFind the hardware.
Find the hardware.
Build the project order.
Five screens separate account activity, product research and order preparation.
Inspect the specification.
Account price, quantity controls and an original drawing sit beside the product details.
Check the quantities.
Pack rules, stock warnings and calculated totals stay close to the line items.
Return to a project.
Three project schedules retain product selections, quantities and procurement notes.
03 / QUANTITY RULESA hinge pair
A hinge pair
needs an even quantity.
We applied multiples of two to hinges and pulls, and multiples of one to lever sets. The order interface rejects an odd hinge quantity rather than silently rounding it.
Supply is a separate concern. The 224 mm pull is marked as backordered, so a valid quantity can still have a stock warning. We kept these states distinct: one concerns the order format, the other concerns fulfilment.
04 / ORDER REVIEWShow the calculation
Show the calculation
before the handoff.
The default four-line project order totals AUD 4,316.00 before the example tax calculation. The interface adds AUD 431.60 and displays a product total of AUD 4,747.60.
We label delivery separately because it is unpriced. The displayed product total should not look like a final delivered quote. Project reference and fulfilment preference accompany the lines so the request has purchasing context.
05 / THE DELIVERYA catalogue connected
A catalogue connected
to the purchasing details.
Navy navigation, warm work surfaces and monospaced product codes give the portal a technical character without crowding the ordering tables.
One set of product records.
The catalogue, product, order and project lists reuse the same data.
Visible pack rules.
The quantity checks distinguish an invalid increment from a stock warning.
Inspect the totals.
Product subtotal, example tax and delivery exclusion appear separately.
DELIVERED SCOPE
Self-initiated portfolio project: five front-end screens with illustrative products, prices, stock and account records. FIELDWORK is an authored identity. No live inventory, account authentication, payment, tax service or order-processing connection is implemented.
06 / ON SCREENA closer look.
A closer look.
Page by page.
Start with the overview, then explore the details. These are screenshots of the original interface, with names, contact details and identifying information blurred for privacy.
4 views Select any view to explore
Does ordering reflect
how you sell?
We build trade interfaces around your product data, selling units and purchasing process.