Designing a friendly, educational insurance quote for beginners.

October - December 2021

Roles: UX research, UX Design, UI Design

Comparing before and after depart flight screen designs. Left is the legacy design and right is the revised design.

Kare is an insurance company that offers budget-friendly insurance for almost every type of situation.

Kare lags in the insurance market due to a lack of direct online services for customers, limiting growth among the younger online generation. Transitioning to an online platform poses a challenge, as there's no agent to assist with the quote process, which contains industry jargon that potentially confuses new buyers.

Solution

A responsive website that provides transparency and explanation at each step of the quote process, so shoppers feel confident in purchasing the right insurance.

Read the process below

Researching insurance

Barely knowing anything about insurance, I began researching the topic extensively to understand the product being offered.

Research Objectives

  • Understand the current online U.S. insurance market
  • Understand customer pain points when purchasing insurance
  • Understand factors that influence insurance purchases

Secondary Research

This digital culture empowers insurers to innovate when it comes to age-old insurance problems such as risk assessments, claims processing and policy sales.

Source: Forbes

Interviewing a range of insurance holders

Insurance applies to people of all ages so I talked to a range of people to compare their experiences.

Insurance is an industry that people find confusing

The cognitive load is high especially for new buyers due to the terminology and complexity of comparing insurance. They are forced to learn the terminology before they understand what they are buying.

Why people switch insurance

Increase in cost

Annual renewal, accident & claims

Change of lifestyle

New job, car, health condition, moving, or having a baby

Bad experience
with claims

Insurance doesn't cover items that people expected

Meet Amanda Wilson

A young, busy, price-sensitive persona based on interview and survey insights.

How can Kare create an approachable online experience?

Quoting car insurance

My primary focus was to create an approachable, intuitive quote flow. I'd also educate users by utilizing text input fields descriptions.

Business goal

To determine the risk of the user’s lifestyle and value of car to reflect in the cost of quote.

User Goal

To buy car insurance and get pricing based on needed coverages.

Sketching, wireframing, and visual designs

I’m an avid sketcher so I explored many page iterations in sketch form before moving on with digital wireframes. As I added content to the wireframes, I changed sections around to strengthen the hierarchy of the page.

Building out the design system

With Amanda in mind, I developed a look that encompassed key words like safe, approachable, and lively. Visually this type of style should be calming and encouraging to new insurance buyers.

Main screens of quoting and purchasing car insurance
Click to view larger

Testing then iterating the car insurance quote flow

To create a realistic quote experience for usability test participants, I added auto-filled past vehicles and drivers within the prototype. This added complexity helped me understand how people felt about auto-filled sections and what interactions they used to complete tasks through the quote.

After observing the participants, I identified the top pain points and iterated the designs.

Providing the remove option in add vehicle card

3/5 participants tried to add a vehicle by editing the previously owned “Honda Civic” listing because they feared it would be added to the final quote.

Iterations

  • Add remove feature to give users the flexibility and peace of mind that certain vehicles aren’t included on their quote.

  • Add clarity to page description by changing “check” to “select.” Getting rid of the double meaning word.

Add vehicles page
Before
After

Restructuring the quote layout for improved plan comparison

4/5 participants completed the comparing quotes task.

  • Users took a long time to find the compare quotes button. Some tried opening a new tab.

  • Users noted that the tab design caused a lot of scrolling to compare the numbers between quotes.

New quote layout

No more hidden content behind a button. Showing all three plans side-by-side allows users to easily compare the differences between all quotes fast and efficiently.

Purchase confirmation should guide users to next steps

Since insurance is complicated, users want to know that they have completed all the steps and are protected by their insurance. Now that they have insurance, how can they use it?

5/5 participants wanted to see more information displayed on the payment submitted page.

Iterations

  • Adding multiple ways to view insurance policy: email and immediate PDF download.

  • Adding next steps and call to action buttons so users can properly access their insurance.

Insurance quote page
Before
After

Participants also loved the color palette and illustrations. The visual design gave off the approachable insurance look I was aiming for.

View prototype

Closing thoughts

Overall within the quote process, participants wanted to understand why Kare needed information and what it did with the gathered information. These questions validated my initial research that the copy should be transparent and educational. UX copywriting helped provide guidance where a live agent might.

To track the impact of Kare’s new website, I would measure metrics: the number of incomplete vs. completed quotes, the amount of time spent on each page, the number of purchases, and customer inquiry topics.

Lessons learned

To keep the whole user journey in mind while designing part of a process.

The power of asking the right questions to push the design further.

Next steps

Another round of usability testing to test version 2.

Building out more educational examples for coverages.