Airco

The brief

Airco supplies HVAC and compressed-air equipment from Gaborone. The brief was a technical, engineering-led website that explains its solutions and the industries they serve, without turning into a shop or a catalogue.

Every page needed the same two next steps, Request a quote or Book a site visit for energy efficiency, and every form had to land in the group's lead database.

What we decided

1. Show how it works, not just what it is

   Each solution page carries an interactive diagram of how the equipment works, so a visitor learns something before they ask for a quote.

2. Lead with solutions and industries

   Ten solution pages and nine industry pages let a visitor arrive by the problem they have or the sector they work in.

3. Make the site visit the low-risk first step

   The energy-efficiency site visit has its own page and booking form, as an easier first step than a full quote.

4. Say only what can be supported

   No brand or partner names, client names, certifications, statistics or prices. No 24/7 or uptime promises.

5. Give the group a shared look

   A navy header with mega menus, dark photo banners, a vertical product explorer and square buttons became the pattern that the Pumpro and EnergyPlus sites later followed.

What we built

Home (1)

Animated airflow banner, solution explorer, a scroll-driven follow-the-air journey through an air handling unit, industries, a fan-speed energy explainer, the working method and services.

Solutions (10)

Overview; fans; air handling units; residential ventilation; air distribution products; fire safety; air conditioning; air curtains; heaters; and compressed air.

Industries (9)

Overview plus industrial, commercial, infrastructure, residential, data centre, education, healthcare and hospitality.

Services (4)

Overview, energy-efficiency site visit, service plans and projects.

Company and forms (8)

About, contact, request a quote, book a site visit, privacy notice, photo credits, thank-you page and a 404 page.

Design system

The panel at the top of this page shows each project's colours and motif. It is a summary of the design system, not a screenshot. See the live site for the real pages.

Highlights

• Ten animated diagrams drawn in code: airflow, an air handling unit, fan speed with an airflow-against-power readout, heat-recovery crossflow, ceiling diffuser throw, a fire damper that closes when you press Simulate a fire alarm, a refrigerant circuit, an air curtain on and off, a radiant heater against a convector, and compressed-air leaks.
• Follow the air: a scroll-driven journey through an air handling unit on the home page.
• Animations pause when off screen, have a pause button, stay still for visitors who prefer reduced motion, and carry text captions.

Built to generate leads

• Three lead forms: Request a quote, Book a site visit and Contact, plus a newsletter box in the footer.
• Every submission goes straight into the group's lead database, and each lead form also works with JavaScript switched off.
• If the database cannot be reached, the form offers a ready-made email so the visitor does not have to retype.

Quality checks

• Unique title and description on every page, canonical links, social share cards and structured data.
• Text colours at 4.5:1 contrast or better, and icons at 3:1 or better.
• All 32 pages checked at 360, 768, 1280 and 1920 px wide (128 views): no horizontal overflow and no script errors.