Work / Case study 05

belairdirect (Intact) · 2019 · Shipped

Quoting multi-car, multi-driver & home without breaking what works

belairdirect's single-car online quote converts beautifully. The brief: let people quote several drivers, two vehicles, and bundle home insurance, on mobile, without denting that completion rate or overloading the offer page.

Domain
Personal-lines insurance · D2C
My role
Product Designer - research → UI
Timeline
2019
Status
Shipped
belairdirect offer page showing a multi-car, multi-driver quote with a car and home bundle
Project gallery

The work at a glance: the shipped multi-car / multi-driver quote and checkout, the flow and strategy behind it, and the research that shaped it. Browse it here, or read the full story below.

View full

01The challenge

Extend a high-converting flow: carefully.

The one-car, one-driver quote was one of belairdirect's most successful online journeys. But more customers wanted to insure two vehicles, several drivers, and their home in the same place and a growing share of them were doing it on a phone.

My job was to understand how these customers think when they shop for coverage, then design a multi-car / multi-driver flow and a bundled offer page that adds capability without adding friction to the journey that already worked.

Objective

  • Understand the mindset of consumers who request coverage for several drivers and two vehicles.
  • Analyze the discount page and the offer page from the perspective of online checkout.
  • Simplify the offer-page reviewing process flagged as a pain point in earlier user studies.
Constraint 01

Protect what works

No deterioration of the very successful 1 car + 1 driver experience.

Constraint 02

Mobile-first

Designed for mobile first, to accommodate the growing traffic volume coming through this channel.

Constraint 03

Respect capacity

Minimal modifications to the offer page, to respect engineering's development capacity.

02Process

A design-thinking loop, end to end.

I ran the project as a full design-thinking cycle - grounding decisions in research and competitive evidence, generating ideas with the broader team, and tightening the design through repeated rounds of prototyping and testing.

1

Empathy

Understand who quotes for multiple cars and drivers, and why.

2

Define

Frame the problem and map the journey from quote to checkout.

3

Ideate

Generate quote-system concepts in a cross-functional workshop.

4

Prototype

Build clickable flows in Axure for the best ideas.

5

Build & test

Put prototypes in front of real people and watch them quote.

6

Iterate

Refine, re-test, and move the strongest idea forward.

03Benchmarks

What does "good" look like across the market?

I started with an overview of quoting features across direct and indirect competitors: who offers a quick quote, who supports multi-car / multi-driver, and who lets customers actually buy online. Building the comparison into one table made the gaps and the opportunities obvious.

Online quote benchmark table comparing quick quote, multi-car multi-driver, and buy-online support across many insurers

Online quote benchmark - comparing quick-quote, multi-car/multi-driver, and buy-online capability across the competitive set. Few competitors did all three well; that gap framed the opportunity.

04Ideation workshop

Generating ideas for new quote systems.

To open up the solution space I facilitated an ideation workshop with product, engineering, and design - generating, sharing, and prioritising ideas for how a multi-car, multi-driver quote could work.

01

Warm up

Set a context for the activity and get everyone on-boarded with the problem.

02

Activity

Define the problem and find ways of solving it. Create project roadmaps.

03

Close up

Close to the end of the session we presented our ideas and voted for the ones we liked most.

04

Work with ideas

Analyze each idea against metrics such as feasibility and desirability.

05

Prototype

Bring the best ideas to life - build prototypes and ask for feedback.

06

Iterate

Repeat ideation and prototyping again and again, to refine an idea and move it forward.

Collage from the belairdirect ideation workshop: teammates cutting and pinning magazine clippings, marker-covered tables, and a wall of pasted-up paper offer-page concepts

I got the team away from screens and into physical materials - magazines, scissors, markers, and tape - to sketch and paper-prototype offer-page concepts. Working with their hands produced faster, wilder ideas, which we then voted on and carried into clickable prototypes.

05Prototype & test

Wireframes to prototype to real hands.

First wireframes anchored the discussion during user interviews. The chosen direction became a clickable prototype built in Axure, which I took into moderated usability sessions - eleven participants across two days, observed and tested live.

Guerrilla usability testing
A user-testing rig: phone clamped to a tripod with a camera recording the screen, on a desk
Testing the live prototype
A participant's hand interacting with the belairdirect quote prototype on a phone

Observations from all eleven participants were synthesised on a shared board - section by section, from car model through to checkout.

A large synthesis board with colour-coded sticky notes for 11 test participants across each quote section
06Test results

What worked, what hurt, what to fix.

The sessions confirmed the basics were solid - everyone could pick a car year, make, and model - and surfaced sharper problems around daily kilometres, driver assignation, and the density of the offer page. I turned the findings into a prioritised list of recommendations the team could act on.

Findings slide for the add-a-car flow: what is working and key findings, next to two belairdirect mobile screens

Example finding: participants struggled to estimate daily kilometres but knew their annual distance - so the flow leaned on what people actually know.

A summary table of high-priority recommendations across landing, adding car, adding driver, discounts, offer page, coverages and checkout

High-priority recommendations, scored for user and business impact - feeding directly into the updated prototype and another round of user tests.

07Final mockups

One flow, two paths - single or multi.

The final design keeps the proven 1 car / 1 driver journey intact and branches into a multi-car, multi-driver path only when the customer needs it - car model, usage, drivers, driver assignation, contact, and a bundled offer page. The same skeleton serves both, so the simple case never pays for the complex one.

Flow map showing the single-car path and the multi-car multi-driver path converging on the offer page

The end-to-end flow: single path on top, multi-car / multi-driver branch below, both resolving to one offer page.

The mobile quote, step by step

belairdirect mobile screen: First, tell us about your car
Add a car - year, make & model.
belairdirect mobile screen: One car added, now let's add another car
Add another car - the multi-car branch.
belairdirect mobile screen: Your insurance, your way - kilometres
Car usage - built around annual km.
belairdirect mobile screen: Let's talk about you as a driver
Drivers - add & assign each one.

The offer page - simplified, and bundled

The redesigned offer page presents the quote at a glance, lets customers confirm drivers and review each car and home, and surfaces a car + home discount, turning the most-complained-about screen into a clear, reviewable summary that also works on a phone. Both versions below are the live prototype, click and scroll through the real flow.

Desktop experience
belairdirect.ca/quote
Live Desktop - the full interactive quote & offer flow.
Mobile experience
Live Mobile - the same flow, phone-first. Scroll inside the phone ↕

Closing the deal - now online, 24/7

Before this project, you could build the whole quote online - but you couldn't actually buy. The flow ended in a shopping cart: the customer left their details, and an agent from the call centre phoned them back during business hours to review everything and close the sale by voice. The new checkout flow lets people confirm their cars, drivers, address, and payment and bind the policy themselves - any time of day.

Before

Quote online, close by phone

The online quote worked like window-shopping. To actually buy, customers had to wait for a call-centre agent to reach them during open hours and finish the deal over the phone - a hand-off that cost time, momentum, and sales.

After

Quote & check out, 24/7

Customers complete car details, drivers, address, and payment and bind the policy themselves - no call-back, no waiting for the call centre to open. Self-serve, end to end.

belairdirect desktop checkout: car details, driver details, address, payment method and contact, with an order summary
Checkout · desktop - car, drivers, address, payment & consent in one reviewable page. Scroll inside the screen ↕
belairdirect mobile checkout with accordion steps for car, drivers, address, payment and contact
Checkout · mobile - the same flow as step-by-step accordions. Scroll inside the phone ↕

Letting people buy the moment they're ready - instead of waiting for a call back - moved the numbers that matter.

24/7

Customers can quote and buy any time - no longer bound to call-centre hours.

↑ Conversion

Removing the phone-only close let far more quotes turn into bound policies.

↓ Op cost

Self-serve checkout reduced the call-centre load needed to close each sale.