Overview.
Kaus has been in the insurance business for over 30 years and up until now have worked only in a B2B environment, selling their policies through regional agents. With the rise of the internet and personal devices, the company has been losing ground to insurance companies that are adopting a B2C approach, with online products.
The Challenge.
Design a responsive e-commerce website to increase sales online and redesign the logo to provide a more modern and reliable look and feel to the brand.
VIEW PROTOTYPE
Market & User Research.

The goal of the research phase was to understand how users shop for insurance.

Assumptions

  • Insurance is a complex topic, and most people prefer to talk to a specialist before buying online.
  • Users don’t understand what is included in the coverage until they need to use it.
  • Insurance terminology makes it more complex to understand policies.

Hypothesis

Users will buy insurance online if we design a friendly responsive website, with tools and resources to help them find the ideal insurance coverage.

Market & Competitive Analysis

I conducted online research to understand the insurance business in Canada and identify good practices.

Key Findings

  • Most companies offer resources to help customers, like calculators, insurance glossary, comparison tools and blog articles;
  • In Canada, you can buy insurance from: a licensed agent; a registered broker; a private insurance company; a lender when you apply for a loan.
  • Pros of buying insurance online: lower premiums; easy comparison; convenience; less paperwork; no miss-selling;
  • Cons of buying insurance online: lack of knowledge about the product; lack of customization; online scams; poor customer assistance.

User Research

Online survey and three 1:1 interviews to understand reasons and frustrations of buying insurance coverages online.

Survey Key Findings (36 participants)

Common Pain Points

  • Convenience (75%);
  • Easy of comparison (68%);
  • Lower premiums (64%).

Top Reasons for buying online

  • Finding clear/transparent information (58%);
  • Comparing different types of policies (44%);
  • Knowing which policy to choose (39%);
  • Industry terminology (31%).

Methods for buying insurance

  • Online (57%);
  • Insurance agent (31%);
  • Insurance broker (11%);

1:1 Interviews Key Findings (3 participants)

  • 100% of interviewees turned to internet search at some point of their buying insurance process.
  • 100% of interviewees talked to a specialist over the phone to ask questions about the policy before buying it online or over the phone.
  • Lack of clear information about policy/rules was an issue for 100% of interviewees.
  • 2/3 interviewees struggled to compare different insurance policies as part of their decision process.
Defining a Persona.
‍‍With the research findings, I identify the beliefs, pain points and most common behaviors among potential users regarding insurance policies, and used an empathy map to gather similar feelings and thoughts together. With that in mind, I created a user persona.
Ideation Phase.
Based on the persona's pain points and behavior,  I used a How Might We framework to help me define the problem and potential solutions and features. I also used a Venn Diagram to cross the business and technical goals with the user goals. Those tools help me develop a Feature Roadmap, which guided me while designing the wireframes.

View Feature Roadmap
Information Architecture.

To understand how users would categorize insurance information, I conducted an online card sorting with 10 participants.

Key Findings

Categorizing Insurance

  • 90% of participants gathered all types of insurance into one single group rather than organizing it by category.
  • 60% of participants grouped "insurance combo options" together with other types of individual insurances.
  • 40% of participants associated "insurance combo options" with resources and tools to find insurance.

Categorizing Tools & Resources

  • 80% of participants paired Get an Online Quote and tools to find and compare insurances together, under a "Tools" category.
  • Help/FAQ, Talk to an Advisor, and Online Chat were paired between each other by more than 50% of participants under groups named Help/Support or Resources.
  • 30% of participants categorized blog as an individual category. The others associated it with educational and communication resources.

Similarity Matrix

Sitemap

Based on the card sorting results, I created a sitemap for the Kaus Insurance website.

Task & User Flow.
‍Considering the user interviews key findings, I designed what would be an ideal task and user flow for buying insurance online. With this flow in mind, I sketched a few homepage screens and later designed mid-fidelity wireframes.

Task Flow

Homepage Sketches.

After defining the task and user flows, I sketched a few homepage layouts, keeping in mind users' main struggles.

Wireframes.

Before jumping into Figma, I defined the pages I was going to wireframe:

  • Homepage
  • Insurance Category page
  • Insurance Coverage page
  • Get a quote flow screens
  • Checkout flow

View all wireframes

Homepage wireframes

For the homepage, I created responsive wireframes for different screen sizes: desktop, tablet, and mobile.

More wireframes

For the other pages, I created only a desktop version, but kept the same card patterns to keep visual consistency and facilitate responsiveness.

UI & Branding.
‍‍For this project, I was also responsible for developing a UI Kit and look and feel of the website. I redesign the logo and opt for a blue color as the brand primary color to show the company’s trustworthiness, combined with peach/orange for modernity. I also choose to use graphics and illustrations instead of traditional insurance imagery to give the website a more modern look.
Building the Prototype.
‍‍After defining the colours, typography, illustrations, and imagery,  I started building the prototype. I decided to test a hi-fidelity prototype to also have feedback on the visuals of the website, since one of the challenges was to do a rebranding to provide a more modern look & feel.

Responsive Homepage

Prioritizing Products & Tools

In the wireframes the "Why Us?" section was on top of the page to show reliability, but as we moved on into the design process and with the users pain points in mind, I decided to move the section down to prioritize  products, and tools.

Improving Visual Scannability on Mobile

For the mobile version, I also decided to stack the product cards, instead of a horizontal scrolling as it was designed in the wireframes, for better visual scannability.

Hi-Fidelity Screens

Banners

The main pages consisted of hero banners formed by the same geometric form inspired by the "K" in the logo, same style illustrations, and colours. Cards also followed the same visual pattern, with illustrations and modern look.

Chat Button

In the research phase, we found out that clients would feel more comfortable talking to a specialist before making a purchase, so a fixed chat button was added to main pages in case users need to talk to a specialist any time throughout the process.

Questionnaire pages

Insurance is a complex topic, that requires detailed information. A simple questionnaire, with a progress bar, was added to simplify the process of getting a quote and help users find the ideal product for them.

Testing the Prototype.

To test the website usability and navigation, I conducted four monitored tests with users between 25 and 40 years old. Sessions were conducted via Google meet, where participants shared their screens while performing the tasks.

Goals

  • Test how users will prefer to quote a life insurance: directly from “get a quote” button or by browsing the life insurance products page.
  • Identify any issues that might prevent users from navigating smoothly or completing a task.
  • Test if copy used in buttons and throughout the website are clear and easy to understand.

Tasks

  • Task 1: You landed at Kaus Insurance homepage to get a quote for life insurance but are not sure which product is the ideal one for you. Show me how you would navigate the website. Where would click first? What type of information would you look for?
  • Task 2: After browsing the website and doing some thinking you are back at Kaus homepage and decided to purchase a Standard Term Life Insurance Plan. Get a quote for that plan and proceed to checkout.

Summary of Results

I used an Affinity Map to identify common thoughts, needs, and struggles.

  • 100% of participants (4/4) preferred to browse the products page first in a situation in which they don’t know exactly what type of coverage they want.
  • Just one participant clicked on the "Get a Quote" button for getting a quote for a specific insurance.
  • Although 100% of users noticed the Get a Quote button at the top, none of them would click it if they were not sure what type of coverage they were looking for. One participant mentioned they didn't know exactly what to expect from that action.
  • 50% of participants mentioned they would like to see a space to ask questions to a specialist.
  • 75% of participants mentioned that the compare policies tool is a very useful resource.
  • Just one participant mentioned bundle options as an important part of their process of researching insurance plans.
  • All participants found the interface intuitive overall and liked the clean layout and graphics.
Iterations.

Based on the usability testing results,  I identified three main areas of improvement:

  • Hero section and Get a Quote Button: How to make users click directly on the hero CTA?
  • Talk to a Specialist: How to make it more prominent in the page so users don't missed it?
  • Compare Policies Tool: How it would look like and how to make it more prominent?

Because of time constraints, I needed to prioritize iterations, so I used a priority matrix to define the main ones:

  • Redesign the "Talk to a Specialist" button to make it more visible to users.
  • Redesign the Compare Policies Tool  to make it more prominent in the products page.
Key Takeaways.

Learnings

  • How to design within a time constraint.
  • The importance of components when designing responsively.
  • The importance of validating your design decisions throughout the process.

Next Steps

  • Design Compare Policies Tool page
  • Do usability testing on "Get a quote" button first click and rethink strategy
  • Research the insurance industry deeper and bechmark more
More Projects.
Tennis Circle
Ortaliza
Google Maps

Get in touch.

Powered by Webflow
LinkedInDribbble