Typical problems on distributor websites I looked at while researching.

1. The catalogue is a PDF.A 14 MB download, last updated years ago. Nobody can search it and nobody trusts it.
2. No search that understands part numbers.Customers know the part number, but the site makes them browse categories.
3. A footer from 2009.Old dates, a fixed 960 px layout and a visitor counter say the company may no longer be active.
4. No mobile layout.On a phone the whole page shrinks until the text cannot be read.

1. Search firstThe first thing on the page is a search box that accepts a part number. Everything else is secondary.
2. Show stockA buyer on a deadline needs to know if it is in stock now, so availability is on every line.
3. A quote list, not a formAdd items as you browse, then send one request. It replaces phone tag with something a person can answer in minutes.
4. Engineering-catalogue lookLine drawings, mono part numbers and hairline rules. It looks like a catalogue, because that is what the company sells from.

Three stages: the old site, the same content with a better structure, then the finished design.

www.haldensupply.ca/index.htmBefore

01

BeforeAfter

www.haldensupply.ca/index.htmBefore

01

BeforeAfter

Home on a phone

Search and catalogue on a phone

• Ink#0F1720
• Paper#F3F1EC
• Engineering blue#0B3FA8
• Hi-vis yellow, used sparingly#FFCF2E

A 1,180 px container with hairline rules instead of boxes. The product list is a single table that turns into stacked cards on a phone.

Live search and filters

Typing narrows the list as you go, matching part numbers, names and sizes. Category tiles and chips filter the same list.

A quote list that works

Add to quote, review it in a drawer and send it. The demo does not send anything, but every control behaves as it would.

On a phone
A short header with Quote and menu, the search box first, categories in two columns and the catalogue as stacked cards.

This is a fictional company, so there are no business results. These are facts about the demo.