Haas Automation

The problem

Technical buyers needed to compare machining centres quickly without reading a spec sheet first.

What I did

• Website for a CNC machine tools distributor|Product carousel highlighting vertical machining centres|Feature blocks for Multi-Axis and Cutting-Edge machining lines|Bold red-and-black industrial branding carried through to mobile

The brief

Haas Automation supplies CNC machine tools: vertical machining centres, lathes and the tooling that goes with them. The buyer is a manufacturing engineer or a workshop owner, and the purchase is capital equipment measured in tens of thousands of pounds.

How capital equipment is bought

Slowly, and with a specification sheet open. Nobody buys a machining centre from a homepage. The site’s job is to get a specific machine in front of a specific engineer, prove it meets their requirement, and make the next step easy.

That means the specification is the product page. Travel distances, spindle speed, tool capacity, table size, power requirement. An engineer comparing two machines is comparing those numbers, and a page that leads with lifestyle photography and buries the specification below it is wasting the visit.

The catalogue

Machine ranges are hierarchical and the hierarchy is meaningful: a category, a series within it, then individual models that differ by a few specifications. Flattening that structure loses information the buyer uses to navigate.

The build keeps the hierarchy intact and lets a visitor enter at any level. Someone who knows the model goes straight there from search. Someone who knows only the size of part they need to machine starts from the category and filters down by capacity.

Specifications are structured data, not typed prose. That means a comparison view is possible, filters work on real values rather than on tags someone remembered to add, and the same specification renders identically on every page.

Photography and video

Machine tools are photographed badly more often than not: a beige machine in a beige workshop under fluorescent light. The site treats the machining process as the subject rather than the machine at rest, because a video of a spindle cutting is more persuasive than any specification table and it is what an engineer actually wants to see.

Video is loaded on interaction rather than on page load. A workshop’s internet connection is rarely good, and an autoplaying video on a product page is a page that never finishes loading.

Dealer and support routes

Capital equipment sales run through dealers, so the site’s conversion is not a purchase but a dealer enquiry. That route is present on every product page with the machine already identified, so the enquiry arrives with the context attached rather than as a blank message.

Performance

Product pages are dense with data and images, which makes them easy to build badly. Specifications render as semantic tables rather than as images of tables, images are sized and lazily loaded below the fold, and the comparison view is server-rendered so it works on any device.

What the client can manage

Machines, specifications, ranges, dealers and downloads. A new model inherits the specification structure of its series, so the fields are already there to fill in.

The stack

• WordPress Development

Visit the live site