A Customer First AC: website redesign and improvements

A new design and a set of improvements for the website of an HVAC company in South Florida. The concept is built on the louvres of an air register, with a clear path to a call or a request on every page, four languages and fast pages. The work continues with new sections and refinements.

Category: Website improvement
Niche: HVAC services
Market: Florida, USA
Languages: 4 languages
Platform: Astro, Cloudflare Pages
Website: acustomerfirstac.com

400+pages in one design system

4languages with a flag switcher in header and footer

62 KBaverage page HTML weight, about half of before

What was done

Design concept

An original concept built on the louvres of an air register, a recognizable HVAC element
A sky blue and lime palette with a slat strip between sections and along the card edges
The concept chosen from a set of design variants and tried on the real pages
One type scale and one set of components for every page type
Small print and links held to a contrast of 4.5:1 or better

Home page

A hero photo behind real slats that tilt one after another
On computers the slats follow the cursor; on touch screens they open on load, follow the scroll and close and open again with a tap
Blocks in a conversion order: trust strip, service pictures, benefits, reviews, latest articles, quote form
Call and Schedule Now buttons in the header and in a bar that stays on phones

Header and navigation

A new header frame with the phone number and a Schedule Now button
Drop-down menus with service pictures and plain lists for About Us
A language switcher with flags in the header and the footer for four languages
One breadcrumb line above the heading on every inner page, built from page data
A compact header height on phones and computers

Page heads and text

A sky blue page head band with breadcrumbs and the heading
Long text in one component: lead paragraph, headings with a sky-to-lime bar, lists as cards with ticks
FAQ as its own section under the text with every answer open
A Read more fold that sits inside the card

Services and cities

A services hub with its own hero and picture cards in a grid
Service pages with the band, the text, a photo and a consultation band
An Areas We Serve hub with city cards grouped by county
A request form on the services hub

Articles and blog

An article head in the same band, wide text and a Jump to rail with up to eight entries
A byline with the company name, the date and the reading time
Summarize with AI buttons: ChatGPT, Perplexity, Claude and Grok
A call card that stays visible and click to call inside the article on phones
The blog listing and category pages assembled from one catalog
Article cards with the company logo as the avatar

Lead capture and reviews

A quote card with the details panel on the left and the form on the right, the form placed last on the home page
Forms delivered through a mail Worker with a check of where each request comes from
A pop-up request form localized for each language
Reviews as a three-card carousel with arrows, real reviews shown verbatim
A rating line next to the form and on the services hub

Speed and technical base

Static pages on Cloudflare Pages with the edge cache refreshed on every release
Duplicate analytics scripts removed and analytics started after the page is drawn
Unused web fonts removed and Bootstrap trimmed from 227 KB to 72 KB
Images delivered at the size they are drawn
Average page HTML weight of 62 KB, about half of the earlier weight
A release pipeline with automatic checks of links and structured data

Result

One design system across 400+ pages in four languages: home, services, cities, blog, articles, contacts and about
A call or a request is one tap away from every page: the header phone, Schedule Now, the phone bar, the quote form and the article call card
Average page HTML weight of 62 KB, about half of the earlier weight, and 72 KB of Bootstrap instead of 227 KB
Small print and links at a contrast of 4.5:1 or better
Every article can be summarized with ChatGPT, Perplexity, Claude or Grok in one click
The work continues: new sections and refinements are being added