Back to Process

Kaus

A responsive website that simplifies insurance quote
and purchase process

Timeline

6 weeks

My Role

UX/ UI Design
Research
Branding

Tools

Figma
Whimsical
Photoshop

View Prototype

Background

Kaus is a big insurance company with 30+ years of experience. They sell insurance to agents (B2B), who then sells to customers.

Problem

Its current B2B business model has hindered the growth of a younger customer base. They want to get into the digital market by selling insurance directly to young people through an e-commerce website (B2C).

Solution

Design an e-commerce website with an easy insurance quote and purchase process.

Design Process

Empathize

Insurance is a complex industry. I don’t know much about insurance when I started this project. I conducted research to understand the market place and the decision making process of users.

Understanding the Industry

I started off my research with competitive analysis. It helped me understand the current market space, the strength and weakness of competitors, and opportunities and limits.

Key Insights

Product focus: most direct competitors focus on health & life insurance while indirect competitors (bank) focus on other areas

Not all competitors provides online quotes

Information amount is important: some had too much info and some had too little

Transparency is important: users might leave if they cannot find the information they want

What do users think?

I wanted to hear from users about their insurance purchasing experience, including their goals and needs, their purchase decision criteria, the process & pain points.

My assumption: users who are/ aren’t working have different financial capcity to purchase insurance.

Key Learnings

I interviewed 5 participants in person and learned the following:

The ah-ha moment!

It turns out that my assumption was wrong. Both working and non-working groups have similar price sensitivity. They all want a cheap price, BUT they are not digging for the cheapest price. They don’t want to do more work if the price difference is little.

To Empathize

I created a persona, empathy map, and story board so I can reference Sharon later.

Define

Now that I have empathized with users, I need to define the real problem. As a UX designer, my goal is to make sure I solve for the right problem.

Big picture

User goals are important, but so are business and technical goals. Before fleshing out details of the product, I decided to refresh myself with diagram. It’s important to have a big picture on mind and align all parties before moving on.

How will the Kaus website be organized?

I conducted open card sorting with 3 participants to help me understand what users expect in terms of organization. I then created a sitemap based on the result.

How will Sharon navigate the website?

Based on my persona, I defined the task of buying an auto insurance, which involves filling forms and getting a quote. From what I’ve learned, users are mostly frustrated here because of the long process. This will be important for Kaus to pivot their B2C service.

Design

In our young target audience, there are first time buyers and experienced buyers. One of the challenges was to balance these 2 groups. How can I design the website in a way that satisfy both novice and expert users?

Sketches & Wireframes

I did different sketches and then wireframes to ideate the structure of the website.

Branding: moodboards, icons, style tile, UI Kit

I was inspired by sunflower, which gives a bright mood, just like how happy insurance can be. I also picked amber as the main colour, as it's associated with with energy and happiness,

UI Challenge

1. Finding the right image & treatment

2. Recall vs recognition

I realized my original design was problematic and old-fashioned. I decided to flesh out the coverage terms with explanations and icons to help users recognize than recall. This piece of info is important to users and therefore deserves more space and higher hierarchy.

Hi-Fi Prototype

View Prototype

Test

It’s time to test how users would react to my product and find out my blind spots! I recruited 6 participants for usability testing. I wanted to test the effectiveness and easiness of the quote form and checkout flow, and if there’s any confusion or difficulty.

Usability Test Result

All participants successfully completed the task given.

What they liked:
Image was fun and happy

quote process was quick and simple

the grid/ list view toggle feature

What didn't work:
Confusing question: All participants were confused by the question ‘when did you get your driver’s license’. They did not know if it was asking about G or G1 or G2.

When a participant wants to browse to auto insurance, I noticed that he was confused if he should click on the icon or ‘learn more’.

Organize & Prioritize Feedback

With these valuable insights from usability testing, I created an affinity map to help me organize feedback. With time constraint on my mind, I created a priority matrix to guide me on which iterations I should make.

Key Iterations

1. where to click?

2. Chat box discoverability

Final Product Key Feature:

simplified quote form that only asks for info required to calculate a quote
   → name and address detail will be filled if users decide to purchase

List/ Grid View Toggle

gives users the flexibility to choose seeing coverage terms in list view or grid view
fits the needs when doing on different devices (laptop, phone, tablet)

Next Steps:

Create screens for other flows: claims, account creation, other insurance products
Hand-off

Key learnings:

Insurance is a REALLY complex industry.
Take the time to really understand and immerse myself in the industry in the beginning.
Testing allowed me to learn quick and get insights that I have not thought about.
When getting feedback, it’s hard to change everything and accommodate everyone. It can also be hard to decide if it’s the participant’s individual preference, or if it’s a user problem. Priority matrix can help with the decision to identify the more impactful issues.

Other Case Studies: