Case study 01 · Marketing site and quote funnel
Rebuilding coveragex.com around trust
CoverageX sells vehicle and home protection plans. I redesigned its public site and, with the engineering team, rebuilt it from WordPress as a Nuxt application covering lead capture, the auto and home quote funnel, a referral programme, a learning centre and the entry point for the AI assistant.
- Company
- CoverageX
- Role
- Software engineer and product designer
- Year
- 2025–2026
- Disciplines
- Design · Frontend · Backend
01 The brief
A protection-plan business depends on trust. The WordPress site had slow pages, stock imagery and inconsistent typography, and every marketing change waited on a plugin update.
- No downtimemoving from WordPress to Nuxt
- One schemavalidates the quote on client and server
- One systemdesign tokens and components behind every page
Before and after
The home page at the first Nuxt release in September 2025 and today. Drag the handle to compare.
My role and constraints
I joined CoverageX as an intern in January 2025 to work on the rebuild, and stayed with the site through promotion to associate software engineer and then software engineer.
The site carries the company’s lead capture. It could not go offline during the move, and every lead had to keep reaching the CRM.
Four pages that carry the business
I started with home, auto protection, home warranty and contact, the pages most visitors pass through before they call or buy. The current home page leads with a photographic hero, a product picker and a trust strip, so the choice of product and the reasons to trust the company come before any form.
A design system for the whole site
To keep the design intact in production, I defined a design system in Tailwind v4: tokens, buttons, form fields and trust badges. Every page on the site is built from it, and the theme is the part of the codebase I have shaped most.
It also ended the dependence on plugins. A marketing change is now an ordinary change to shared components.
A two-step quote that never asks twice
I designed the quote as a two-step builder: vehicle or home details first, then contact details. One Zod schema, a TypeScript validation library, checks every field in the browser and again on the server, so the two sets of rules cannot drift apart. When a visitor goes on to buy, the draft passes to the Buy Online checkout and nothing is entered twice.
When a field is wrong, the form says so in one sentence and keeps the visitor on that step. Lead capture is hardened, and each lead reaches the CRM with its campaign tracking number.
The same quote is available through the AI assistant as a short conversational form: five steps for auto and four for home, each opening once the one before is complete.
Migrating with no downtime
The first Nuxt release went live in September 2025 and replaced the WordPress site with no downtime.
Over the following year I led the home page overhaul, and designed and built a paid-search landing page, a landing page for gig workers, landing pages for the SEO campaign and a bug-report form, with review rounds with leadership along the way.
How I work
The same process runs on every project. I own the design throughout; the build is a team effort in which I build much of the front end. This is what each stage looked like here.
In general
I review what exists and talk to the people closest to the customer. Then I write the brief, before opening Figma.
- Brief
- Audit
- Journey map
On this project
I audited the WordPress site for speed, brand consistency and lead capture before drawing anything.
Highlights
- An interactive section on the home page shows what a breakdown costs with and without cover.
- The quote builder opens in place, so the visitor never leaves the page they were reading.
- Welcome emails link back to the exact step where the visitor left the quote.
- An accessibility settings widget lets visitors adjust how the site is displayed.
Outcome
The site moved from WordPress to Nuxt without going offline, and every page now comes from one design system. A visitor can start a quote on the site, in the assistant or in the lead form and finish it in checkout without retyping. The funnel data from GA4 shaped the home page overhaul and the paid-search landing page.
What I’d do differently
I would record first paint and quote completion on the WordPress site before replacing it, so the improvement could be stated in numbers. The first Nuxt release kept a light hero with the form inline, and the current layout arrived a release later.
11 Screens · 20 captures
Select a screen to enlarge
01 WordPress home page in March 2025, before the rebuild.
02 First Nuxt release, archived on 2 September 2025, with a light hero and the quote form inline.
03 Current home page with a photographic hero, a product picker and a trust strip.
04 Quote builder opened in place over the home page.
05 Instant-quote section at the foot of the home page, offering auto or home.
06 AI-assisted auto quote, asking for contact, address, vehicle and usage one step at a time before showing the quote.
07 AI-assisted home warranty quote in four steps, each opening once the one above is complete.
08 Lead form holding the visitor at step one, with a single line of guidance, until name, email and phone are valid.
09 Auto protection, the first of the two product pages.
10 Home warranty, the second product page, built from the same components.
11 Opening of the “How it works” page.
12 Landing page of the learning centre.
13 Customer reviews page.
14 Guide to filing a claim.
15 Landing page for the referral programme.
16 Contact page with phone and email options.
17 Page for the CoverageX mobile app.
18 Home page on a phone.
19 Auto protection on a phone.
20 Full-length home page, top to bottom.
