Kaus

A responsive insurance website focusing on the millennials
View Prototype

Objectives

1. Design a new modern and fresh logo for the company to refresh the brand.
2. Design a responsive e-commerce website that is pleasing to use and that allows users to browse through all products and easily complete their tasks.

Role

UX/UI Design
Research
Branding

Tools

Figma
Photoshop
Lucidchart
GlooMaps
SketchBook
Pen & Paper

Project Type

Concept Project

Timeline

7 Nov 2019 - 14 Feb 2020
(14 weeks)

Mentor

John Isaac

Background

Kaus is a large insurance company that has been running for 30 years, and sells more than 8 types of insurance. While it has been working through regional agents, the business has figured it needs to tap into the digital market in order to appeal to younger generations.

Kaus also believes in providing a good user experience to their customers. Insurance selection is not easy, and the business is open to break industry standards in favour of a good and easy experience.

Challenge

Build a responsive website from scratch that is consistent with the existing branding.

Research & Understand

To start off, I needed to conduct research to understand what I know now, what I don’t know, and what I need to find out.

The goals of research were:
1. Identify Kaus’ competitors and opportunities in the market.
2. Find out common decision making processes and behaviours in buying insurance.
3. Discover the customers’ needs and struggles when shopping online for insurance.

Market Research

As insurance was not something I was familiar with, I firstly conducted secondary research by reading online to gain a better sense of the industry.
Below is a summary of findings:

1. Millennials are motivated by social causes and have high expectations for any sort of digital experiences.
The key is convenience, transparency, efficiency (want it now, or not at all), and fun when trying to appeal to the group in digital.

2. The overall impression that millennials have towards insurance is “complicated and overwhelming”.
It mainly comes from lack of support such as insurance broker, which used to be common to older generations.

Competitor Analysis

I also visited a few competitors’ websites to have a better understanding of how each competitor tries to solve their problems.There are a lot of different insurance brands out there, so I have selected these 3 major brands that operate within Australia and listed the strengths and weaknesses.

At this stage, I learned that it was very important to make the website approachable, easy/quick to use, and more personal, especially when a brand is looking to target younger market.

User Interviews

User interviews were conducted to gain a deeper understanding about user needs, pain points, and the ways that purchase or browse insurance online.

I interviewed 5 participants (3 males and 2 females) who:
- are age of 25 to 33
- have previously shopped for insurance online.
All the interviewees were recruited through my personal network, such as friends and family.


The followings were revealed:
1. Relationship with insurance: Users do not think about insurance often — only when they need it/might need it (for example, when their vehicle gets damaged), or when the bill is due.
2. Decision-making process and behaviours: While price is the most important deciding factor, users do have a process that includes researching online, asking people (word-of-mouth) or a combination of both. When contacting insurers, phone was the top result, followed by online form or chat.
3. Needs and struggles: Users often have to ring their insurers to contact them which is supposed to be easier and quicker, but usually takes time. They want to be able to compare insurance providers online without spending too much time and getting pressured.

Define

Empathy Map

It was also useful to have an empathy map created with the persona, James, to visually capture the attitudes, behaviours, and surroundings of the user.

I decided to use the arrows for each section to roughly display the user’s timeline; the further it goes from the persona photo, the closer to the future.

Diving deeper into the mind of the user, I learned the user's surroundings and priorities.

Storyboard

I thought about moments where a new product of Kaus would solve a problem for James and he finds it great. I started off by writing down a rough story line, and then began sketching digitally.

These rough sketches of a moment (but an important one) in James' life and the narrative format allowed me to see how the new product is making an impact in the user’s life. This storyboard also helped me to smoothly transition to the ideate and design phase.

Problem Statement

The following problem statements were created based on the research conducted:

1. How might we allow the user to browse insurance products efficiently?
2. How might we communicate approachability to the user despite the impression of the topic?

Ideate

Card Sorting

Once the define phase is completed, it is time to start making sense of navigational schemes.

I used open card sorting, since the website was to be created from scratch. Understanding  and comparing how users conceptualise insurance related terms was the key.

There were 4 participants, 3 males and 1 female, of age between 22 to 26. I asked them in person to sort 30 insurance related cards into groups that make most sense to them.

Key findings were:
1. Most participants struggled at the beginning due to unfamiliarity of the field.
2. Each participant created 4 to 6 categories.
3. The most common category words in order: disaster, personal/human, criminal/crime

It was interesting to find out again that millennials do feel that they are not familiar with insurance, as some of the participants mentioned it during the card sorting.

Sitemap

The findings derived from the card sorting, I created a sitemap to decide on the structure of the Kaus website. As part of this deliverable, I learned that what kind of terms were used in the labels also played an important role in the structure.

View Sitemap

Task Flow & User Flow

I created task flows where the main task was to purchase insurance along with an additional task of “creating an account” for existing customers who already have insurance with Kaus but do not have an online account.

View Task Flows

The user flow - snippet shown below - was created by reviewing the sitemap and task flow.

While thinking deeper from the user's point of view, I was able to possible paths that the user can take within the structure created earlier and consider revising it if required.

View Full User Flow

Design

Sketching

In order to communicate trustworthiness, I wanted to create something expectable in terms of elements placement.

I had a few ideas for homepage at this point, so I quickly made sketched variations to visualise them and create a foundation for UI design. To do so, I conducted online research by visiting direct competitors’ websites again and learned further what design patterns are more common in the industry.

Due to time constraints, the paper prototype could not be tested at this stage.
Paper prototyping could have conducted  to test and validate the idea by quickly sketching a few more additional pages and using a tool that allows paper prototype.

Mid-fi Wireframes

Kaus is an insurance that targets younger market as well as existing customers eventually, and the website is to be displayed seamlessly on different devices: desktop, tablets, phones.

I firstly worked on 3 pages: homepage, category page, and quote page. The homepage is a combined version of the sketches.

Creating mid fidelity wireframes made me realise what I should improve the design with a focus on the layout and content.

Once I created the different pages, I began building the responsive pages for the homepage.

Initially the desktop homepage did not include top three benefits below the hero image, and I was concerned that the page is not informative enough for an insurance website.
I sought feedback from John and decided to place them with his help. This way the website communicates the advantages the user will get, while avoiding to overwhelm them with plenty of information.

Testing the mid-fi wireframes would have been useful before actually entering into the UI design phase. However, they were not tested due to time constraints while the hi-fi versions would be tested later in the project.

Logo & Visual Design

Before I began creating, I explored direct and indirect competitors’ websites once again to gain more concrete ideas. I noticed a lot of insurance companies, especially large and long-running ones, has blue colours to embody “professional, trustworthy, calm” branding.

I was aware that these were definitely important to Kaus as well, but I believed differentiation would be essential, because for one, Kaus wanted to renew the “B2B only” brand, and for two, a user in the interview mentioned that there are so many insurance companies and it is overwhelming.

To have a descriptive brand message, I listed, in addition to the 3 words, key adjectives for the new brand: modern, clean, reliable, approachable, fun, kind, affordable. This allowed me to create the visual elements that effectively communicate the brand.

Below is my rough sketch and ideas for the logo.

The style tile I created after some ideation is shown below.

I chose to use a few soft pastel colours to minimise the "overwhelming" impression of insurance.

As for typography, I wanted to stick to rounder sans serif typeface to convey the idea of being approachable and fun.

Responsive Design

By using the style tile and wireframes, I built responsive homepages and quote pages. John again gave me useful feedback on some parts, and after a few iterations, the new Kaus website was created.

One of the challenges was thinking about how to display and place each elements on mobile where the space is limited.

I decided to adopt carousels for some sections to allow the user explore options efficiently.

Test

Now I have made a few high fidelity pages, it is time to build a desktop prototype to be able to test the user's path.
I created more pages, such as quote process pages, in addition to the homepage and quote page, to prepare for the usability test.

Usability Testing

Using the prototype created, I conducted a usability test with 3 participants I recruited through my personal network to find out what the user would think about the website.

One was female, the other two were male. Despite my effort to recruit at least 5 individuals, I had a limitation for the number due to scheduling difficulties.

Before the test, I made a plan that I can stick to, including:

Test Objectives
1. Test how easily the user can complete their tasks while navigating through the pages.
2. Test if the user finds the website trustworthy and informative yet approachable as an insurance company website.
3. Identify any areas where the user has difficulty, confusion or concern.

Test Goals
1. Observe and evaluate the interactions the user has with the website.
2. Identify issues, concerns, and difficulties the user has.
3. Collect any thoughts or feedback from the user.

During the test, I asked the participants to perform the tasks below in each scenario.

Scenario 1: You are looking to buy insurance policy for your new boat, and open up Kaus homepage. Then you remember a friend of yours was looking for pet insurance.
Task: Find out what types of insurance Kaus has.

Scenario 2: You just remember that your current car insurance expires in a month. You have been thinking of changing it to another insurer, and start looking at Kaus.
Task : Find out more about Kaus. (eg. advantages of being with Kaus)

Scenario 3: You are convinced and happy to buy Third Party car insurance from Kaus, but want to get a quote first.
Task : Get a quote for your Third Party car insurance.

Getting the design exposed to the fresh eyes of users and receiving feedback was definitely valuable and interesting.
I believe at least 2 more additional participants would have revealed clearer patterns and results of the test.

Affinity Map

I also took notes from the usability test to post-it notes, and created an affinity map. By categorising and sorting them to groups, the test results were made easy to evaluate.

Key findings include:
1. Participants did not spend too long reading the contents on the homepage.
2. Participants were more interested in the quote pages ie. prices and what is included.
3. For task 3, two participants used the main CTA button next to the hero image, and one used the smaller button at the top.
4. Two participants had an issue at the beginning where they assumed that they could not scroll down, due to the screen size mentioned above.
5. Two participants had to search for pet insurance as it was located under Life in the top navigation menu.

Conclusions

This project has required me to empathise with the user and keep doing so along the way, since the topic is complex. I was not familiar myself with the insurance industry at the beginning, and there were a lot of research conducted during the process.

Due to time constraints and lack of resources, the number of participants for tests were limited. Additional testing needs to be conducted in order to refine and identify further pain points and solutions.

Main takeaways include:
1. Younger target market's needs for "convenience, transparency, efficiency" applies to insurance as well.
2. Keep in mind the user's mind and surroundings. (eg. when and in what kind of situation are they using the website?)
3. Differentiate the brand from others while considering the industry trend.

Next Steps

  1. Make changes/adjustments to the prototype according to the feedback given during the usability test.
  2. Test again with new participants and evaluate.
  3. Repeat these if required.
View Prototype

Other Projects