Email

hello@example.com

Phone

+32 458 623 874

Kingdom

Universal Studio
8-12 Neal St, London
WC2H 9PU

Kaus

Timeline: Aug – Sep 2019, 4 weeks
Deliverables: Website prototype, Branding
Team: Self-directed, with feedback from mentor and peers
Role: UX/UI Designer
Tools: Sketch, Illustrator, InVision

Background

Kaus has been a successful B2B insurance provider for over 30 years. They would like our help to expand their business into the individual sector by providing property, motor, liability, marine, aviation, life, and health insurance. Their business strategy is to keep their costs low and provide easy solutions for customers. For that reason, they created a set amount of packages for people with similarities such as age range, income range, or household size.

Objectives

•  Design a new, easy to use, responsive website
•  Develop a fresh brand identity system

01. Empathize

Process

Market Research / Competitive Analysis / User Persona / User Interviews / Empathy Map

Market Research

I gathered and analyzed existing trends, data, and insights around insurance shopping. This will help us understand a complicated industry and provide guidance in creating personas.


Brand reputation matters

Accordingly, the top 10 insurers in terms of total market share now write 72% of all business in the country. 


Value isn’t always the key driver

80% of survey respondents said that agents and brokers should prioritize getting the right insurance policies for protection over getting the lowest price. 54% of successful families and individuals surveyed said that agents and brokers actually lose credibility when they lead with the lowest cost option.


Agent vs. online shopping

67% highlighting the advice they receive on how to protect one’s home.
64% acknowledging the benefits of being able to talk to a real person in the event of a claim.


Competitive Analysis

I compared the strengths and weaknesses of 5 of our top competitors. This will help us understand what users are expecting from insurance websites and we can learn from investigating them how other companies solve problems.

User Interviews

I recruited 5 participants that have experience buying insurance online. Based on my secondary research, I developed a series of open questions regarding insurance shopping experiences to conduct one-on-one sessions with my participants and I recorded our conversations.


Goals

Determine the pain points users have when managing money
•  Identify what is important to those trying to manage their money
•  Uncover who will use the new PayPal feature and why
•  Identify the financial trends of millennials
•  Compare the strengths and weaknesses of our competitors

 

Empathy Map

I wrote my observations on post-its, color coded by participant. From there, I could find common threads in order to discover insights to define the needs of my users.

Insights

•  Users spent time looking for the best price
•  Users conducted research outside of the insurance company website because they were confused by the policies
•  Users felt like talking to an agent would be a hassle


Needs

•  Compare prices efficiently
•  Find clear policy information online
•  Know that they won’t have to call an agent

 

User Persona

I created a persona of a typical insurance shopper based on market research and one-on-one interviews. My fictional user, Wyatt, helped me to visualize my user flow and user flow later on in my process.

02. Define & Ideate

Process

Business & User Goals / Low Fidelity Wireframe Sketches / Sitemap / Task Flows/ User Flow / Mid Fidelity Wireframe / High Fidelity Prototype / Usability Testing

Business Goals and User Goals

Before beginning to define my design, I used my research and project brief to identify the overarching goals of the project.

Card Sorting

Because there are so many types of insurance within my navigation, it was difficult to predict what users would expect to be grouped together, so I conducted a card sorting exercise to help inform my information architecture. I added 30 insurance types and asked 10 participants to group them as they see fit. The chart below shows how common groupings became obvious.

Site Map

I built a site map to show a high level relationship between the content of my site. Starting with the homepage, I used my card sorting results to categorize the types of insurance based on majority agreement to create top navigation. I then added additional pages to top navigation based on my competitive analysis.

Task Flows

I created 3 possible task flows for my users to inform my wireframes for testing.

User Flow

After creating a possible route for a user, they were asked to use the new feature to accomplish a variety of tasks. In this version, I show key action and decision points in the goal setting process.

Low-Fidelity Wireframe Sketches

Based on the outcome of my ideation process, I began to sketch out the specifics of each screen needed for my user to accomplish my tasks. I paid close attention to the design patterns of the existing app, in order to integrate my screens seamlessly.

03. Prototype & Test

Process

High Fidelity Wireframes / High Fidelity Prototype / Usability Testing

Mid Fidelity Wireframes

I accurately recreated PayPal’s visual design system to create high fidelity wireframes. My goal was to integrate the new feature as seamlessly as possible, so all design patterns were present elsewhere on the site, and UI was designed to fit the current app look and feel.


Mid Fidelity Prototype

A mid fidelity, limited functioning prototype was used in order to quickly test and effectively find pain points. The prototype is currently archived and available upon request.

Visual Design

I started by using my previous Kaus work to define 5 attributes: modern, friendly, reliable, optimistic, and authentic. I then created a moodboard can be viewed here.

I used previous Kaus work to inspire sketches, picked the most successful ones, digitized them, then used my mood board to experiment with color.

High Fidelity Wireframes

I accurately recreated PayPal’s visual design system to create high fidelity wireframes. My goal was to integrate the new feature as seamlessly as possible, so all design patterns were present elsewhere on the site, and UI was designed to fit the current app look and feel.


High Fidelity Prototype

A high fidelity, limited functioning prototype was used in order to quickly test and effectively find pain points. The prototype is currently archived and available upon request.

Usability Testing

I conducted think aloud moderated testing with 4 participants to observe their interaction with the prototype.


Tasks

• You just bought a car for the first and you need to get coverage before you can drive. You see an ad on Instagram for Kaus and you decide to check out their prices. How do you go about getting a quote?
• You have been shopping around for insurance and you heard about Kaus from a friend. You know the prices are low but you want to learn more about their coverage for home insurance. How would you go about learning more about home insurance?


Affinity Map

Using my findings from my usability testing I used post-its to assign a color to each participant to pull out key pain points in order to revise my prototype.

Priority Revisions

1. Have 4 main types of insurance visible in main navigation.
2. Make sure “get a quote” icons go to quote builder

Postmortem

This project was a crash course in developing my user research and usability testing skills. I learned the process of deeply understanding my users through conducting empathy exercises in order to better inform my design.

 

Next Steps

•  Build out additional screens
•  Build out “my account” and “file claim” capability
•  Continue to test and iterate the feature