Structure
Catalogue architecture
We gave collections, categories and individual products distinct jobs, so the catalogue can grow without flattening into one long grid.
We made a dense flooring catalogue feel navigable.
For Flooring House, a flooring retailer in Melbourne, we connected four product families, hundreds of listings and quote context into one clear browsing system, from the first room image to an informed enquiry.
Collection entry / source assetIdentity within the build
Product archive
CategorySizeSort
Quote basketProduct + area + installation
A shopper rarely knows the exact product name at the start.
The useful first choice is broader: timber, hybrid, laminate or carpet. We built the information architecture around that reality, then introduced specifications when they became helpful.
The second challenge was continuity. A product page could not be a dead end. The selected floor, required area and installation preference needed to stay intact as the visitor moved towards an enquiry.
01Choose a material
02Narrow the range
03Inspect a product
04Add quote context
05Send an informed enquiry
Choose a floor once. Keep the details together.
This compact recreation joins the product catalogue to its quote basket. Change the material, adjust the area and see exactly what the enquiry carries forward.
Room-led entryTimber
Filters adapt to this collectionA dedicated category story, then the shared catalogue system.
Product detail patternBuild quote context
Interface stateSelected collectionTimber
Required areaKept with the product selection
24 m²
The specimen quote basket is empty.
A repeatable product system, not a stack of one-off pages.
Hundreds of possible product paths still need to feel like the same website. We made these rules reusable so a new collection does not require a new design.
Interface
Product discovery
Material imagery starts the journey. Sorting, size filters and concise cards take over once a visitor is ready to narrow the field.
Interaction
Quote context
Area, product and installation preference travel together. The enquiry arrives with useful context instead of a product name alone.
Engineering
Responsive behaviour
Desktop sidebars become focused mobile drawers. Basket and filter panels manage focus, close on Escape and return people to where they were.
We gave product images and completed rooms different jobs.
Collection images help people compare. Real installations show how those choices resolve in a room. The interface keeps both useful without forcing either into an oversized, soft-looking crop.
We let wide room details and taller completed-project shots work together instead of forcing every photograph into the same crop. The result stays crisp and editorial.
Catalogue image
Hybrid
Canadian Warm Oak
Grey Stone
Brush Box
MatterhornResponsive meant changing the interaction, not shrinking it.
Product grids need room to breathe. On smaller screens the persistent filter column becomes a focused drawer, while result counts and active choices remain visible.
- Filter state
- Selections stay legible when the drawer closes.
- Keyboard flow
- Focus moves into panels, stays contained, then returns to the trigger.
- Basket continuity
- The quote selection persists while a customer keeps browsing.
A retail website that can carry a real product decision.
The finished build connects browsing, product detail and enquiry without asking the customer to repeat themselves. It is also structured for the less visible work: category growth, local landing pages, accessible drawers and consistent product data.
- Material-led collection entry points
- Sortable, filterable product archives
- Area and installation-aware quote basket
- Reusable page and content patterns
Next stepStart a conversationSelling a large range online? Tell us how your customers choose.
Start a conversation