ufuk.ie

ReillyEngineering

A CNC machine dealer selling €100,000 decisions. The site starts from the part a buyer needs to make and stays with the machine for its whole working life.

Sector
CNC machine distributor, Swords
Role
Research, design and build
Built with
Figma, HTML, CSS, JavaScript
Visit the live site

Choosing a machine

By machine, or by part

A toolmaker who has to produce a hip stem doesn’t know which machine he needs; he knows the part. I added a switch that turns the machine strip into a strip of parts, each linked to the machines that make it, so he reaches the right machine without learning the catalogue.

Buyers and owners on one page

A buyer weighing a €300,000 machine and an engineer who already runs one need different things from the same page. I put both behind one switch, specs and options for one, service, spares and upgrades for the other, so the dealer keeps selling to the customer long after the sale.

A phone number, not a form

Engineers won’t upload a confidential drawing to a dealer they’ve never met. So I ended every part family with a phone number instead of a form: the conversation moves to the showroom, where the sale is actually made.

After the sale

Twenty years after the sale

A dealer earns most from a machine after it’s sold: used machines, spares, service and software. Competitors bury these in a footer menu. I gave them a full row on the homepage, so a buyer sees twenty years of support before he signs.

Spares for your machine only

An owner ordering a spare part is afraid of getting the wrong one. I let him pick his machine first, so the list shows only parts that fit, with stock and delivery time on every line. Fewer wrong orders for the dealer, and fewer calls to check.

Why trust them

Since 1998

A €100,000 machine is bought from a person, not a logo. I led the page with the founder’s face and the year he started, because a buyer wants to know someone will still answer the phone in ten years.

Precision you can put in a patient

Every machine dealer writes “high precision”. I showed it instead: a dental implant assembling at real tolerances. Medical work is the strongest proof of accuracy a dealer has, and here the buyer sees it rather than reads it.

Call us, bring the part

For this buyer the next step is a conversation in the showroom with the part on the table. I set the phone number as large as a headline, so that step is impossible to miss.

Type and colour

Type
Aa
IBM Plex Sans Condensed · headlines
Precision you can put in a patient.
Aa
IBM Plex Mono · figures and specs
5 axes · 650 × 520 × 475 mm · ±2 µm
Colour
Steel
Graphite
RE blue
Machine grey

On the phone

Home
A machine
Parts

Behind it

How a machine dealer’s site was turned around: from a catalogue of machines to a guide that starts from the work.

The problem

A CNC distributor sells six machines that each cost as much as a house, to engineers who will run them for twenty years. Their sites read like brochures from the manufacturer: a photo, a spec table, a contact form.

The real sale is long and technical, and most of the money comes after it: service, spare parts, upgrades and trade-ins. The site had to help a buyer narrow down the machine, and then keep being useful to the people already running one.

What others do, what I did

Machines grouped by brand, which means nothing to a buyer who knows the part, not the model.

I added a switch that turns the machine strip into a strip of parts, each linked to the machines that make it.

“Aerospace, Medical, Automotive” pages that repeat the same machines with new photos.

I made sectors into tags on machines and parts, and gave the medical work one scene that shows the precision instead of claiming it.

Demo forms that ask for drawings up front.

I ended the pages on a phone number and a line about signing an NDA, because toolmakers do not send drawings to a dealer they have never met.

The site stops at the sale.

I gave every machine page a second view for owners, with service plans, spare parts and upgrades, where most of a dealer’s money is made.

What I left out

  • A sector menu. Sectors appear as tags on machines and parts, and the medical work has its own scene.
  • Any upload or quote form. The demo section is a phone number, an address and a line about signing an NDA.
  • Underlines, small eyebrow labels and step numbers. They added noise to pages that are already dense with figures.

How it is built

Plain HTML, CSS and JavaScript on GitHub Pages: six machine pages, six part families, used machines, service, about and contact, all generated from one data file so a spec only lives in one place.

  • Machine strip. The centre machine is a dead zone; the sides start a slow drift that speeds up near the edge, and it settles on the nearest machine when the pointer comes back.
  • Implant scene. An SVG drawing pinned for the length of the section. The thread band is a masked copy of the implant body shifted by the thread pitch, so it looks like it turns.
  • Same data, two views. The switch on each machine page swaps between two sets of the same record without reloading or moving the page.

Every screen above is a recording of the live site, not a mock-up.

Visit the live site
Next projectBawn GrowersMushroom grower, Co. Monaghan
Visit the live site