Mike Faudel is a UX designer
Mockup-v2-less-shadow_v4.png

KAUS INSURANCE

Kaus

 

 

Kaus_devices_REversed-no-background-smaller-no-shadow.png
 
 

Project Details

Client: Kaus Insurance
Timeline
: June 2019 - July 2019
Team: Self-directed with feedback from mentor and peers
Deliverables: Website prototype and branding
Role: UX Design, UI Design, Researcher
Tools: Sketch, Illustrator, Photoshop, Zeplin, InVision

 
 

Kaus is a large insurance company offering coverage for every type of situation exclusively on a B2B basis with no online presence. They want to expand their offering into the B2C market by creating a responsive e-commerce site to make their product available to individual consumers. They are looking to tap into a younger market and need a refresh of their branding to accompany the site.

Background

Problem

Kaus needs to establish an online presence to make their product line available directly to consumers through a responsive design that allows for insurance purchases of individual plans and packages.


Process

 
 

1

Research
I first needed to research the current insurance market to gain a better understanding of the customer as well as gather insight into who the competitors are and what their strategies are for the users’ online experience. I focused both on existing data for insurance customers as well as examining which demographics have the biggest impact on the insurance market and the market in general.

Goal:
To research the existing insurance market and its online customers
Deliverables:
Market Research | Competitive Analysis | User Interviews | Empathy Map | Persona | Storyboard

 

Market Research

I conducted market research to gather demographic and psychographic information about who purchases insurance as well as when they purchase it and how they interact with insurance companies online.

Online insurance shopping trends

  • People often buy insurance in tandem with a purchase or rental

  • 24% of people find insurance online

  • 40% of Millennials find insurance online

  • 75% of customers spend less than 4 hours researching insurance

Demographics of insurance customers

  • 49.4% of drivers are male / 50.6% are female

  • Non-hispanic whites have the highest rate of owning health insurance (87.4%)

  • 36 is the average age for car upgrades

  • 26 is the average age a person loses their parents’ health insurance coverage in the U.S.

Millennials’ contribution to the insurance market

  • By 2025, Millennials will account for 75% of the global market

  • 81% of Millennials in the U.S. own insurance

  • 80% of Millennials own cars (appx. the same amount per capita as Baby Boomers)

  • 1/3 of potential life insurance customers are Millennials

 

Competitive Analysis

Next, I conducted competitive analysis of existing insurance companies in order to compare and contrast their strategies. Primary competitors included companies that cater to a younger market and those that focus on more advanced technology to enhance the user experience.

 
 

User Interviews

With the data gathered in secondary research, I conducted primary research in the form of 1-on-1 interviews with people matching the demographics of key insurance customers. This would help me understand the experiences of real people and establish patterns of behavior by asking open ended questions to solicit stories from the participants.

  • 5 interview participants

  • 3 females / 2 males

  • Age range from 27 - 37 years

  • All currently own insurance

 
 
You don’t need insurance until you do.
— Marie-Eve, Interview Subject
 
 

 
 
 
 

2

Define
After collecting data about the market and competitors, I next needed to define the target user and gain insight into their behavior.

Goal:
Define who the target user is and gain an understanding of their needs, goals and frustrations
Deliverables
:
Empathy Map | Persona | Storyboard

 

Empathy Map

By recording all comments and behaviors made during the interviews, I was able to group the observations into patterns of behavior which illustrated user insights and needs.

 
 

Insights:

  • Users think comparing quotes is too time-consuming

  • Users feel strongly about trusting insurance companies

  • Users chose various contact methods when communicating with insurance providers

  • Users do not know the details of their insurance plans

Needs:

  • Users need to know the quote process is fast

  • Users need companies to illustrate their trustworthiness

  • Users need easy contact with their insurance providers

  • Users need explanation of plan details

Persona

By synthesizing the data collected in the interviews and the patterns that emerged, I created a persona that represented the archetypal user. This persona would help keep the design user-focused by defining who would be using the product.

 

Storyboard

Using one of the main frustrations identified in the interviews, I created a storyboard to illustrate how the Kaus site will have a real impact on someone’s life. In this scenario, the frustration was how time-consuming it is to receive an insurance quote online and how Kaus addresses the problem.

 
 

 
 
 

3

Ideate
Next, I needed to generate a wide range of ideas that could be implemented in later stages in an effort to move from understanding and defining problems to coming up with solutions for those needs

Goal:
Establish information architecture and flows
Deliverables:

Goals Venn Diagram | Feature Roadmap | Site Map | Task Flow | User Flow

 

Goals Venn Diagram

I created a Venn diagram of the needs of the business, the needs of the user and any technological considerations to be aware of. This would ensure that IA and flow considerations would be consistent with the business goals as well as the goals of the user.

 
 
 
 

Features Roadmap

With the needs of the business and the needs of the user in mind, I created a feature roadmap to establish the features to be included in the design. They were organized by importance to guide the priority of their development.

 
Screen Shot 2019-08-17 at 2.48.41 PM.png
 

Site Map

With goals defined and features established, I created a site map showing all pages and subpages that would be needed for the design in order to better understand what would be included and the relationships between screens.

 
 

Task Flow

One of the primary goals of the Kaus site is to provide insurance quotes efficiently and quickly. I created the task flow to illustrate the flow of a user accomplishing this task. Then, to further explore the various paths a user may take to accomplish the same goal, I created a user flow which laid out all the pages that would be needed to achieve the goal given the numerous paths a user could take.

 
 

User Flow

To better understand the non-linear path a user may take and the decisions they make along the way in a given scenario, I created a user flow diagram.

 
 

 
 
 

4

Design
With the user and their goals defined as well as an understanding of how they would complete particular tasks and what screens that would necessitate, I next strategized UI elements, visual hierarchy and brand aesthetics.

Goal:
Design the UI and branding for the Kaus site
Deliverables:
Sketches | Mid-Fidelity Wireframes | Branding

 

Wireframe Sketches

I began by sketching low-fidelity wireframes of the Kaus homepage. Trying different layouts based on existing design patterns I was able to experiment with which was most conducive to the user while meeting the needs of the business.

 
 

Mid-Fidelity Wireframes

Next, I created responsive mid-fidelity wireframes in Sketch in order to establish a more clear layout and visual hierarchy. This would give me a foundation upon which I would be able to add visual elements and branding.

 
 

Branding

In order to move into high-fidelity wireframes, I first needed to create branding guidelines to ensure cohesion and consistency in the visual appearance of the site. The branding was made to convey a trustworthy, yet modern aesthetic that had a fresh perspective, but was still rooted in the traditional professional sensibility of existing insurance providers.

 
 
 

 
 
 

5

Prototype
In order to test the usability of site and gather information for further iterations, high-fidelity wireframes and a functioning prototype needed to be created and tested.

Goal:
To create a clickable prototype of the Kaus site and gain feedback on usability
Deliverables:
High-fidelity wireframes, Prototype, usability testing

 

High-Fidelity Wireframes and Prototype

I incorporated the design elements established in the brand style tile into the existing wireframes to create high-fidelity versions that were then brought into InVision to create a prototype. The prototype included all screens that would be necessary to complete the tasks laid out in the usability testing.

Interact with the full prototype here.

 

Usability Testing

Objectives:
1) Test how effectively users can navigate the site
2) Test how users get an insurance quote and if they can complete the task without difficulty
3) Test how users find a local agent in their area
4) Test how users discover if Kaus offers comprehensive auto insurance
5) Identify any areas of hesitation, confusion or difficulty

Results:
Conducting the user test with 6 participants provided valuable information about the usability of the site that would be synthesized and then incorporated into further iterations.

 
Collcetion.png
 
 

 
 
 

6

Iterate
With the data collected in the usability tests, the next step was to synthesize the information into actionable recommendations for updates and to iterate further

Goal:
To identify priority improvements and iterate upon the design accordingly
Deliverables: Affinity map, revised wireframes, UI Kit

 

Affinity Map

To synthesize the information gathered in the usability testing, I created an affinity map by organizing similar behaviors and comments that focused on shared pain points and frustrations into patterns to establish important insights about the usability of the site. These insights informed the priority recommendations for updates that would need to be implemented.

View the full affinity map here

 
 

Revised Wireframes and Prototype

Based on the insights and recommendations established in the affinity map, I further iterated on the design, making changes that were based on the biggest frustrations discovered during usability testing. Updates were made to some navigational elements, building out the search feature functionality and clarifying the purpose of the CTA button on the quote results page.

 
 
 

UI Kit

I collected all UI elements and patterns from the high-fidelity wireframes and created a UI kit to house all integral components. This will ensure consistency and reference for future design. I then prepared handoff deliverables in Zeplin in order to create a redline that can be shared with developers.

 
 

Reflection

 

Next Steps

Building an insurance e-commerce site for Kaus required learning about an expansive industry that has many existing design patterns, but is going through an evolution to cater to a younger audience with an increased dependency on technology. I learned valuable lessons and best practices in usability testing to iterate based on real life use as well as the importance of inclusion of established design patterns to provide a familiar and usable experience.

  • Prototype the remainder of the pages that need to be created to test the full functionality of the site

  • Continue to identify areas of improvement and user frustration through continued usability testing

  • Design the responsive UI for the remainder of the site

  • Update design deliverables for developer handoff