Project Case Study
Northline Systems Inc. Website
A catalogue-and-quote website for an Ontario supplier of T-slot aluminum extrusion and flexible chain conveyor systems. Visitors browse two product ranges, collect components into a request list, and send it with their drawings as a single quote request.
View Live Project →Overview
Northline Systems Inc. supplies two ranges of industrial components: T-slot aluminum extrusion systems (profiles, connectors, fasteners and accessories for machine building, guarding and workstations) and flexible chain conveyor systems, from individual components up to complete engineered conveyors.
Nothing in this business is bought from a cart. Extrusion is cut, machined and kitted to the job, and a conveyor is configured around the customer's layout. The site is built around that reality: catalogue first, quotation second.
Objectives
Present both product ranges side by side, each with its downloadable catalogue PDF
Make every component findable with its part number, specification and catalogue page
Let buyers collect parts as they browse and send them as one request
Accept drawings and CAD files alongside the request so engineers can quote accurately
Keep contact details and the quote form one click away from every page
Information Architecture
Home: hero, the two ranges side by side, "How ordering works" in three steps, closing call to action
T-Slot Extrusion / Flex Conveyor: range pages following the client's copy deck: introduction, product range, supply options, catalogue
Components: every component in a range, filterable by category, plus a detail page per component
About: company story and facility
Contact: the request list, the quote form, contact details and a map on one page
Every "Request a quote" button leads to the same form, so there is one path to conversion.
Key UX Decisions
1) A request list that behaves like a cart, without being one
Visitors add components with quantities as they browse. The list keeps a count in the header, lets them change or remove items, and is restored on the next visit. It is deliberately never called a cart, because nothing is priced and nothing checks out.
2) One request, with the drawing attached
When the visitor opens the quote form, the list is attached automatically. They add dimensions, a drawing or a CAD file, and the team confirms the configuration before quoting.
3) Catalogue PDFs up front
Each range shows its catalogue with page count and file size, downloadable directly, so engineers who prefer the PDF are not forced through the web catalogue.
4) A typographic industrial identity
The lockup is a heavy, extended NORTHLINE wordmark over a full-width red rule, with a square N mark for the favicon. The hero art pairs blueprint grid lines with product photography to signal engineering, not retail.
What This Means for the Business
Fast, dependable pages: Every page is prepared in advance and served from a global network close to each visitor, and a mistyped address shows a proper "page not found" instead of a broken page.
A request list that isn't lost: Parts a buyer adds stay saved on their own device until the request is sent, even if they leave and come back later.
Every request acknowledged automatically: Each quote request notifies the sales team and sends the customer a confirmation email at the same time.
Spam kept out of the inbox: Every submission is checked for bots before it reaches the team, so staff only deal with real inquiries.
Catalogue updates without code changes: Placeholder parts, photos and PDFs can be swapped for the real ones without changing the site's code.
What This Case Study Demonstrates
Designing a B2B flow that fits how industrial buyers actually order: browse, list, attach a drawing, get a quote
A cart-like experience built for a quote-only business
A catalogue data model that lets the client replace placeholder parts, photos and PDFs without touching code
Live: https://northlinesystemsinc.servith.workers.dev/
Role: Solo delivery (IA → brand → UI → request list → quote operations)
