Kaus

A responsive website for an educational and transparent insurance company

Role: UX/UI Designer (including research, strategy, information architecture, interaction design, UI design, user testing)

Tools: Figma, OptimalSort, Zoom, Whimsical

Date: October - December, 2020

Project Overview

PROBLEM

For over 30 years, Kaus has been selling insurance through regional agents and a primarily B2B environment. With the digital age and the rise of the internet and personal devices, Kaus has run into a problem: they’re losing ground.

OBJECTIVES

Kaus looked to change how they sell insurance and begin selling directly to consumers online, especially a younger demographic. The project objectives were to:

• Create a responsive e-commerce website that is easy to navigate and browsable
• Refresh the Kaus brand to target consumers directly

SOLUTION

An insightful, responsive website, including modern and fresh branding, that allows potential and current customers to learn about the products Kaus offers.

Phase 1: Research

RESEARCH PLAN: OUTLINING RESEARCH

I started the project by conducting research in order to better understand the users and evaluate my current knowledge of how they purchase insurance. To help frame my research and ensure a structure was in place, I created a research plan, which includes the goals and objectives, assumptions, methodologies, participants, questions, and timeline.

Overall, my goals and objectives were to:

• Understand the market and trends in home cooking and food waste
  
• Identify competitors and their strengths and weaknesses
  
• Understand the customer base and their needs, goals, fears, and frustrations
  
• Understand user sentiment towards cooking and what, if any, current methods are utilized to find recipes and use ingredients
  

The research methodologies I used for this project were secondary research (including both market research and competitor analysis) and primary research (through user interviews).

In the end, I found that young consumers feel they don’t know much about insurance and what policies best suit their needs.

Let's dive into how I came to this conclusion.

Secondary research

MARKET RESEARCH: UNDERSTANDING THE INSURANCE INDUSTRY

I began by conducting market research, looking at broader industry trends and any recent shifts, to gain a better understanding of the market as a whole and help me understand the users I would need to speak with, as well as the questions to ask them, during my primary research.

While looking at the insurance industry I found:

• For the US insurance market in 2018, premiums recorded by property/casualty (P/C) insurers accounted for 51%, while premiums by life/annuity insurers accounted for 49%
• New competitors are arising through InsurTech companies, who hit funding record levels. However, most insurers see these startups as vendors rather than partners or co-developers in innovation
• Insurers that use digital to streamline and personalize the customer experience, while offering empathy throughout the whole process, including access to human help when necessary, will find more success. This is important for Kaus who wants to take advantage of the digital market
• In terms of demographics, insurers will need to keep in mind the upcoming mass retirement of baby boomers, a large retirement savings gap, and the delays among millennials and younger generations in marrying, buying homes, and achieving other traditional milestones

COMPETITIVE ANALYSIS: EXAMINING COMPETITORS

Looking at both direct and indirect competitors through a competitive analysis helps me to not only get a sense of their strengths and weaknesses but also identify potential areas where Kaus can better differentiate itself against these competitors. 

Primary research

LISTENING TO USERS

Building on my knowledge of the market, I wanted to speak with consumers directly to get insight into their needs, goals, fears, and frustrations. I created an interview guide to frame my interviews, focusing on understanding the user's experience with purchasing insurance. I conducted five interviews in total, primarily targeting those of a younger demographic. From the interviews, I saw that:

• With a lack of experience in purchasing insurance, young consumers feel they don’t know much about insurance and they rely on trusted advisors (friends and family) for advice 
  
• Cost and how much coverage will be supplied are the most important factors when choosing an insurance plan 
  
• Consumers do not trust insurance companies and thus have no allegiance to any one company. They feel insurance companies deliberately hide information, particularly around how users can file and keep track of claims
  
• Consumers can easily be persuaded to leave their current insurance company for similar coverage at a lower price

Research synthesis

USER PERSONA: UNDERSTANDING THE USER

With my findings from research, I created a user persona to get into the mind of the user and to keep the user at the forefront of my designs. Meet Emily, who is 26 years old and has “basic” insurance (health, dental, vision). As Emily is moving to Los Angeles, and getting older, she’s considering purchasing auto and renters insurance. When purchasing insurance in the past, she primarily sought advice from friends and family. Throughout the remainder of the project, I kept Emily at the forefront of my decisions, ensuring that my designs would keep her goals, needs, fears, and frustrations in mind.

EMPATHY MAP: GETTING TO KNOW EMILY

In addition to bringing Emily into the fold, I also outlined an empathy map to better understand and identify how Emily feels, what drives her, and how I would expect her to behave. The empathy map helped me synthesize the data I had collected from research and ensure empathy with the user. 

Phase 2: Define

Strategy

PRODUCT GOALS: OUTLINING STAKEHOLDER GOALS

In order to help prioritize features and ensure they map back to the goals of all stakeholders, it’s important to keep in mind the goals from a business and technical perspective, as well as the user. With the goals of the user, business, and technical team identified, I also outlined mutual goals between the groups, which helped me identify the main goal to keep in mind for all three groups: an experience purchasing insurance with no confusion. 

PRODUCT ROADMAP: PRIORITIZING FEATURES

With the goals outlined, I began prioritizing features to include on the site through a feature roadmap, identifying features with descriptions and the research supporting each. Creating the feature roadmap helped me prioritize the features into four categories, with the top features to move forward with first under the Must-Have (P1) category, followed by Nice To Have (P2), Surprising & Delightful (P3), and Can Come Later (P4).

Information architecture

CARD SORTING: STRUCTURING THE SITE

I implemented a card sorting exercise to gain insights from users on how they would structure the site. The similarity matrix below shows the proportion of participants who grouped any two cards in the same category. We can see some closely related pairings (identified in the red boxes), as well as strongly associated pairings that all participants grouped together (identified with the star icon).

SITE MAP: INTEGRATING FEATURES

Knowing which features I prioritized for Kaus, I began to create a site map to understand the organizational structure of the site and identify content groupings, which helped me identify how to best integrate the features into the Kaus website.

Phase 3: Design

TASK & USER FLOWS: HELPING EMILY NAVIGATE KAUS

Before taking pencil to paper and sketching the design, I wanted to ensure that I was keeping our user, Emily, in mind and her primary goals. I began by creating a UI Requirements document to understand all of the pages and interactions needed to design the Kaus website, as well as the tasks Emily would complete while navigating the site. 

I then created a task flow to help Emily help get a quote for auto insurance. This helped me be more specific in identifying how Emily would complete the task, identifying the pages and actions needed. 

To further expand the task flow, I outlined the user flow to better see how a user may navigate the site, as well as what steps they will need to take for the scenario. The user flow expanded upon the task flow and includes any decisions Emily would make as she explores the site. Below is a piece of the full user flow, specifically for Emily to get a quote for auto insurance.

SKETCHES: TAKING PEN TO PAPER

With the flows outlined, I began sketching out several versions of the Kaus home page. Sketching enables me to quickly begin to visualize what the Kaus site will look like before I begin outlining the details in a design tool.

MID FIDELITY WIREFRAMES: FURTHER REFINING THE DESIGN

Once I had a sense for how the pages should be laid out, I took to create wireframes that would help Emily purchase auto insurance. Keeping my research findings in mind, I focused on showing how users can not only get a quote for insurance, but also understand the claims process, become familiar with insurance terminology, and get advice from customer support before completing their purchase.

RESPONSIVE WIREFRAMES: ENSURING A RESPONSIVE DESIGN

Users may access the Kaus website through different mediums, so it was important to create responsive wireframes for this project. To ensure it would be a seamless experience for users, I designed responsive wireframes for desktop, tablet, and mobile.

BRANDING: DEFINING THE KAUS BRAND

With the mid fidelity wireframes updated, I focused on the second objective for this project, which was to refresh the Kaus brand to target consumers directly. I first started by outlining the brand's attributes, which I defined as:

• Transparent
• Trustworthy
• Reliable
• Insightful

Once I had the attributes outlined, I created a mood board to help define the direction for the brand. I then sketched various logo options, looking to highlight Kaus as open and honest, traits that stood out throughout my research.

STYLE GUIDE: CREATE THE KAUS STYLE

I refined the Kaus brand further by creating the style guide, which includes the logo, color, typography, and imagery. The primary color of blue is calming but honest, and the accompanying colors appeal to a younger demographic with a playful element. The serif heading font is modern and clean, while the sans serif body font is friendly. 

UI KIT: MAINTAINING CONSISTENCY

With the style guide complete, I also outlined the UI Kit for Kaus to ensure that a consistent design is maintained throughout the site. The document will change as the design is refined and any iterations will be reflected in the UI Kit.

Phase 4: Test

PROTOTYPE & USABILITY TESTS: EVALUATING THE SITE

With the high fidelity wireframes complete, I created a prototype to connect the pages together as if they were the Kaus website itself. The prototype then enabled me to test the screens with users and understand what worked well, or could be improved upon, in the design.

Before contacting usability test participants, I outlined a usability test plan in order to highlight the objectives and process for testing the prototype with users, including the script and scenarios for each test. I expected the completion rate to be 100% and the error-free rate to be 95%. I conducted usability tests with four participants and noted any errors they made while they took the test. 

AFFINITY MAP

The affinity map below shows the results and highlights common themes from the usability tests. With comments noted for each participant by color, I grouped common feedback together to uncover patterns. The map categorizes the feedback based on positive comments (wins), areas pertaining to visual hierarchy, comments on the content, and opportunities for improvement. 

REVISIONS: ITERATING ON THE DESIGN

With the results from the usability test, I altered the design to incorporate feedback from the usability test participants, focusing on comments of the highest impact for the design. 

• Priority 1: The quotes recommendation page was the most confusing for participants; the distinctions between coverage and cost under each plan, as well as the differences between the basic, standard, and premium options, needed to be made clearer
• Priority 2: The finalize purchase page could better outline the “Plan Summary” section to better identify what the plan costs and what the plan covers. This “Plan Summary” section would stay static as the user fills in their respective information on the page. The user will also be better prompted to create an account with a username and password
  
• Priority 3: On the home page, the “Let’s lose the jargon” section could better outline the calls to action (CTAs) and the purpose of the section

FINAL PROTOTYPE: COMPLETING THE PROJECT

Now that the revisions were implemented, I could finalize the prototype, allowing me to complete the wireframes with feedback incorporated.

Takeaways

Research: From this project, I learned that research sets the foundation for any design project; design decisions must always be based on research and testing. Identifying patterns in research and conducting research with a sizable number of people can help outline common sentiments versus the opinions of only one individual.

Personas: Keeping my persona in mind throughout the project helped me not only with conceptualizing the project myself but also with participants in user interviews and usability tests.

Next Steps

From this project, I recognized it’s just as valuable to know what doesn’t work in a design as it is to know what does work. For immediate next steps, I would compile all of my design files, as well as any helpful instructions or tips, and hand off the designs to developers through Zeplin for development. In regards to the design, I would also explore designing the nice to have features that were identified in the product roadmap.

Let's connect!

I'd love to chat with you.