Overview

Kaus Insurance has been around for the past 30 years, and are now realizing that they are starting to fall behind due to their nonexistent online presence. They are hoping to take their business online, as they would like to start targeting a younger audience, whom they realize are using technology more than ever.

Kaus understands that insurance can be confusing, which is why they want to provide affordable coverage, and a simple, easy to use quoting process that will make users feel less overwhelmed and intimidated when purchasing insurance.

Challenge

Design a responsive e-commerce website for an insurance company that provides a pleasing, affordable experience and allows customers to easily browse products and find what they're looking for.

Role

UX/UI Designer, UX Researcher, Branding

tools

Sketch, Invision, OptimalSort

Duration

Jan-Feb 2021

Client

Kaus

1. Empathize
🌎
How might we help young people with little insurance knowledge find and purchase the right insurance for them at an affordable price?
RESEARCH GOALS
What we're trying to accomplish
View my research plan
Research questions
These were answered through research

🔍  What do people currently use to find their insurance policies?

🛍 Why do people feel overwhelmed when shopping for insurance?

🧐 What draws people to purchase insurance?

🤔  What factors affect a person's decision to purchase one insurance policy over another?

secondary research
Getting familiar with the Insurance Market
💻
Insurance companies that have a website have a more competitive edge

It is very convenient because users can compare policies with other companies, make quick searches, and there is no phoning around to companies. Some are even able to provide quotes in a matter of minutes. A lot of the traditional insurance companies have been falling behind due to their late understanding of UX.

🤯
Many companies have even started to use AI to help customers find the right insurance for them.

There has also been a rise of "insurtech" companies - which use technological innovations to disrupt the current insurance industry model and innovate the insurance industry.

competitive analysis
Identify Market Opportunity

I compared some of the top insurance companies that have a similar target audience to see what works well for them, and what they could improve on.

Strengths 👍
  • Reviews/testimonials are clearly displayed on the homepage
  • Know if you've been instantly approved or declined
  • Offers insurance tools and resources - such as an insurance calculator to help calculate your coverages based on expenses and income
Weaknesses 👎
  • Didn't allow you to purchase insurance straight from the website without speaking to an agent first
  • Offered limited insurance products (i.e., only life insurance or only car insurance)
  • During the quote process, it was hard to go back to a previous step and make changes
user interviews
Gathering information from our users

To understand the problem scope and the users experience with Insurance companies, I conducted five interviews - two participants who haven't purchased insurance before and three that have.

I decided to divide the interview questions into two scenarios - one for those that have purchased insurance before, and another set for those who haven’t. The user’s experience with insurance and their thought process when it comes to purchasing may vary depending on if they have actively looked to buy it before vs. never having any interest in it.

View my user interview questions here
EMPATHY MAP
Understanding the research findings

After conducting the interviews, I synthesized my research with an empathy map to narrow down on anything that was unique or came up frequently.

Some valuable insights that I learned were:
😥

People felt overwhelmed by the amount of options and information.

👩🏻‍💻

They put in a lot of research before making a purchase (they value reviews, forums, recommendations).

🤩

Value price & coverage the most when purchasing insurance. They also want customer service that is reliable, responsive, and quick.

🤷🏻‍♂️

Find a lot of insurance products unclear & confusing.

2. Define
👤
PERSONA
Meet Amy

The insights that I had gathered from the Empathy Map were then used to define the goals and needs of the target user, Amy.

She is a young digital marketer who recently graduated university, and is looking to purchase her first car. Car insurance is mandatory where she lives, but finding the right one is confusing and taking a long time, which has delayed her purchase of the car. Her and her boyfriend are also thinking of settling down in the next few years, so it would be nice if they could easily add bundles for the insurance coverage that they may need in the future.

project goals
Aligning our user & business goals

Now that I had identified the target user, Amy, I went over the business goals from the project brief to make sure they aligned with what Amy was looking for.

FEATURE ROADMAP
Prioritize features based on research

With all of the research found above showing that users find the process confusing and overwhelming, I knew that I had to provide a clear and simplified approach to insurance. I listened to what people valued when purchasing insurance, such as customer service and reviews, which helped me prioritize my list of features.

Highest Priority (Must haves) ⭐️⭐️⭐️⭐️
  • Clear CTA button (i.e., Get a Quote, Check prices) = users find the process to get insurance unclear
  • Contact us = users said that they value good customer service
  • Reviews/Testimonials = users value what other are saying when making purchases
Lowest priority (can come later) ⭐️
  • Kaus will take care of the switch between insurance companies if the user is already insured elsewhere
  • Fitness reward program to promote healthy lifestyles
CARD SORT
How do people categorize information?

As mentioned by the participants I interviewed, the information on insurance websites can often be overwhelming and confusing. As I was starting to gather the information I wanted to include on the website, it seemed appropriate to conduct a card sort exercise to help me categorize everything properly, and in a way that was familiar to users.

Details:
  • online using OptimalSort
  • 7 participants
  • 30 cards
Interesting Finds:
  • A lot of people categorized cards similarly but with different variations of category names (i.e., insurance vs insurance options vs types of insurance)
  • Unique features, like insurance dictionary and health & wellbeing tools, were hard to categorize
  • All of the insurance types were grouped together by everyone, even if they weren't sure what it was
sitemap
Let's organize

I took the card sort results to figure out the main navigation on the homepage of the site.

Main Nav:

user flow
The path users take when purchasing insurance

By building off of the sitemap, I thought about the main task that we would want a user to take on the website, which is to get a quote. I focused on this task as I considered the different ways that a user could end up here.

Here are some of the considerations that helped me make my decisions:

product requirements
Determine the features for each page

Now that I had a list of features, as well as the typical path that a user would take, it was time to determine which features would go on each page. I carefully thought about which features would best help the user in completing the task, which is to get a quote. These decisions were backed up by research.
For example, insurance pages should have:

3. Ideate
💭
LO-FI WIREFRAMES
Validating the design decisions

Based on my research, and keeping my persona, Amy, in mind, I felt that these features were most important to have on an insurance homepage:

Many users expressed that price was a major factor in choosing whether or not to purchase, so it's important that they know that it's affordable. They really valued reviews/testimonials when making any buying decision. Also making the process to get a quote as clear as possible since people value transparency, and so that they don't feel intimidated.

To quickly test out my ideas, I first sketched out the pages on paper that were necessary for the user to get an insurance quote - such as the homepage, insurance landing pages, quote page & payment page.

I was able to choose what I liked about the sketches and take them into Sketch to begin building the outline of Kaus' website.

responsive WIREFRAMES
Desktop, Tablet & Mobile

The website needed to be responsive so that users could view it at various screen sizes. I tried to optimize the screen sizes and focus on the placement of items.

Some challenges that I faced when designing responsive:

moodboard
Establishing a brand with images

When thinking about Kaus, I wanted people to feel comforted, yet know that the company was very sophisticated and trustworthy. A lot of the images that I was gravitating towards included flat vector illustrations & rounded corners/curves. This was a good starting point for my brand, and also helped start to establish a colour palette.

brand logo
What will Kaus be recognized by?

I started by brainstorming some adjectives to describe Kaus: 

At first I came up with a lot of different ways to represent this, from links, open hands, to umbrellas. I knew that the main message that I hoped would be conveyed is to make the users feel safe and reassured, but also comfortable.
To do this, I made sure that the logo had rounded edges to represent that reassuring, comforting feel.
The chosen logo was a play on links, since links are usually used to show connection. The heart shape gave that youthful look since Kaus is trying to target a younger audience, as well as feelings of safety and comfort.

style tile
Gathering some UI features

Referring to my moodboard and logo, I put together this style tile as a guide that could be referred to when putting together the UI designs.

Colour Palette
  • Teal (main brand colour) = it is a mix of blue which represents trust and green representing wealth
  • Pink & orange = warm and inviting
Typography
  • Montserrat (primary font): rounded edges give the youthful and comforting feel
  • Lora: good for the body text since the brushed curves give that sophisticated feel to the brand.
Images/Logo
  • Different sizes/variations of the logo (such as how it would look on different coloured backgrounds)
  • Vector Images - tried to remain consistent by choosing images that looked similar to each other (like their facial features)
responsive ui designs
Putting it all together

I referred back to my wireframes and style tile, but made sure not to stick with them completely since I was realizing some things needed to change as I was designing (such as image sizes). For the most part, the text size stayed consistent between web and tablet, but I had to start reducing it for mobile. I changed the vector images to match my brand colours, and utilized a lot of whitespace so that it looked minimal and the information didn't feel overwhelming.

How I was able to use the colours:

UI Kit
A reference sheet

In case I or anyone else ever need to recreate my design, I put together this UI kit. It was especially helpful to put together once I figured out the different states of the buttons and form fields.

4. Prototype
💻
objectives
What I wanted to get out of user testing
Scenario #1
Purchasing car insurance

The user was told that they just purchased their first car, and were looking to buy car insurance. They were given specific information about the car that they were looking to purchase to help them fill out the information.

Scenario #2
Learning about coverages

They were then told that they needed to find more information about car insurance coverages.

5. Test
📝
conducting the test
Putting my prototype to the test

The test was conducted remotely with four participants. I sat with them through Zoom and recorded the screen as I asked them to complete the given tasks on the high-fidelity wireframes. All participants were able to complete the tasks successfully.

affinity map
Understanding the findings

This map was done to help sort, prioritize, and rank user testing feedback. It was helpful to divide the information in this way to prioritize what needs to be fixed right away, and what can be fixed in the future.

Areas to explore 🤔
  • How users choose their coverages, since this page wasn't originally included in the prototype
  • Wordings of certain sections
  • How many questions are being asked in the quote phase
  • Fix where "edit policy" takes you
Successes 👍
  • Similar to online shopping experiences
  • Enough CTAs
  • Not a lot of paragraphs of information
  • Modern and resonates with younger audience
iterate
Priority Revisions

I focused on the changes that I could implement right away:

If you're interested, you can view the final prototype below:

How did this website solve the problem?
How might we help young people with little insurance knowledge find and purchase the right insurance for them at an affordable price?
  • Simplified quoting process: step-by-step questions asked
  • Clear Instructions: immediately shown a "how it works" section on the homepage and it was clear what was being asked of them
  • Relevant content: simplified explanations to prevent users from feeling overwhelmed, but also gave them information they needed to make decisions
  • Shopping preferences: gave users the information that they value when making purchasing decisions - such as reviews, affordable prices, and reliable customer service
Reflection
next steps
If I were to take this project further...

The first thing would be to test out the changes that I made above with participants, to see if the users have any problems with them. I would then take the feedback that I get from that test and try to implement them again. This process would likely repeat for a few times, until we are ready to explore new features (referring back to the "can come later" section on the feature roadmap list). I would also want to conduct some tests for mobile & tablet as well, since the prototype focused on desktop.

the challenges & the wins
How I overcame the difficulties

Insurance is something that many people realize they need, but don't know much about. So coming up with a solution that makes insurance look appealing is already difficult enough, and then I had to figure out how to target a specific audience like the younger generation. I made sure to reference a lot of newer insurance company websites during my competitive analysis to see how they were appealing to a younger audience and standing out. It also helped to talk and interview people who fit this target audience, as they were able to tell me how I can help to make insurance less confusing. I was able to learn what frustrated them about the purchasing process, and reasons why they avoid it in the first place.

Overall, I was able to simplify the quoting process and not make users feel overwhelmed by the amount of information that was being thrown at them or that they were being asked for. I learned that coverage and price is what users value the most when purchasing insurance, and I was able to highlight these on my website.

Back
Immigrow - Responsive web design