Kaus Insurance Responsive Website Design

UX DESIGN

Kaus Insurance

This project is a website redesign for a fictitious insurance company named Kaus. Pretend with me, if you will, that Kaus is a large insurance company that has been in the business for over 30 years. Kaus has largely ignored the online insurance market in the past, but is now planning to break into that sphere with an innovative online platform allowing customers to choose and manage their insurance policies, while still integrating the great user experiences customer expect from Kaus.

Objective

This case study encapsulates building a responsive website, fresh branding, and a new logo for Kaus's first foray into e-commerce.

Proposal

I proposed to design a responsive e-commerce website that is pleasing to use, and which allows customers to browse through all products and easily filter by relevant data. I also proposed to design a new modern logo for Kaus that matches the website branding aesthetic.

Year
2020
DURATION
5 weeks, 40 hours per week
Tools Used
Figma, OptimalSort,
Maze

Process Overview

      Research Goals
      Interviews
      Persona
      Empathy Map
      Feature Roadmap
      Card Sorting
      Preliminary Sketches
      Site Map
      Task Flows
      User Flows
      Wireframes
      Brand Style Tile
      Responsive UI Design
      UI Kit
      High-Fidelity Prototype
      Usability Testing

1. Research

Research Goals

  1. Identify opportunities for refreshing Kaus’s branding.
  2. Identify best practices for organizing information on Kaus’s large variety of insurance offerings in an online setting.
  3. Understand customer needs for an online insurance platform.
  4. Identify strategies for Kaus to still provide good user experiences to their customers through an online platform.
  5. Identify the demographics of customers who will be interested in Kaus’s online platform.
  6. Understand customer pain points that could make shopping for insurance online difficult.

Interviews

I reached out on social media to friends, asking for participants in an interview regarding their experiences with buying insurance. I gathered 4 participants (2 women and 2 men between the ages of 30 and 65), who I interviewed via Zoom and FaceTime.

Overall Patterns Between Participants

Participants were generally concerned with getting the best price for the correct coverage that meets needs.

They also feel that having a personal relationship with a dedicated insurance agent is key to trusting the company, getting the best prices, and getting a clear understanding of all the information they need to make decisions. Most feel that talking with an agent on the phone is the best option, though other means should be available, such as online chat and in-person appointments. Good customer experiences, caring, and empathy from insurance representatives are very much appreciated by these interviewees.

Finally, these participants feel that online resources for researching, self-educating, and comparing prices should be readily available on the website.

Persona

This exercise, which led me to create a fictional characters based the people I encountered in my UX research, helped me gain a more clear picture of the type of person who might be most interested in Kaus as a business, particularly young professionals between the ages of 30 and 50. These customers have busy lives, and would like to get their insurance covered in a way that feels consistent with their online lifestyle, in which many types of information is easily accessible, and quality customer services leads the user to purchase insurance without any worry of having possibly received a bad deal.

Empathy Map

From my persona, I delved deeper into the motivations, thoughts, actions, and pains of my fictitious ideal Kaus client, so that I might approach the design of the new website addressing the concerns that both consciously and unconsciously matter to the ideal client.

In particular, I feel that the Kaus ideal client values affordability, clear and straightforward presentation of information, various methods of engaging with customer service, and stress-free ways to navigate Kaus's offerings and account information (after insurance is purchased) so that the user can spend less time overall thinking about insurance.

Feature Roadmap

After considering the ideal Kaus client, I explored the websites of many different insurance providers (with Lemonade, Oscar, Ethos, and Progressive as primary benchmarks) in order to create an exhaustive list of the features that the website absolutely must include, plus those that would be surprising and delightful to include, and those that can come later after the first two categories of features have been integrated.

I was particularly inspired by Lemonade's quote generator, which creates the illusion that the user is interacting with a live customer representative, while in reality it is very detailed wizard quote engine.

I was also inspired by the quirky illustrations on Oscar's website, and the high-quality photos of contented customers on both Oscar and Ethos's websites. All three websites featured excellent integration of customer service options, and laid out their insurance offerings in simple, easy-to-navigate interfaces.

2. Information Architecture

Card Sorting

Agenda

Through a detailed survey of many insurance websites, I made a list of the comprehensive insurance offerings that I felt it would be necessary for Kaus to provide (the brief stated that Kaus offering all popular types of insurance. Next, I felt it would be helpful to conduct an open card sorting, to help me identify the best way to organize my offerings.

I used the website OptimalSort to conduct the card sorting, as COVID-19 prevented me from meeting participants in person. I chose to conduct an open card sorting exercise consisting of 30 cards. Findings were based on the data from 7 participants, all friends and family of mine between the ages of 30 and 60 who have purchased insurance.

Cards Used for Sort
  • Auto & Recreational
  • Boat/PWC
  • Business
  • Classic Car
  • Commercial Property
  • Commercial Umbrella
  • Condo
  • Data Breach
  • Disability (Long-Term)
  • Disability (Short-Term)
  • Electronic Device
  • Flood
  • General Liability
  • Health
  • Home & Property
  • Home Finance
  • Home Refinance
  • Homeowner
  • Identity Theft
  • Landlord
  • Life
  • Long-Term Care
  • Motorcycle/ATV/Recreational Vehicles
  • Other Coverage
  • Pet
  • Renter
  • RV/Trailer/Mobile Home
  • Travel
  • Wedding & Event
  • Worker’s Compensation
Finding Analysis

Based on the results, most participants grouped the cards into 6 distinct categories, into which the other cards would be grouped as sub-categories. The 6 main categories were:

  • Auto & Recreational
  • Business
  • Health
  • Home & Property
  • Life
  • Other Coverage
Most participants organized the cards into the following categories:

Site Map

Now in possession of my ideal client type, my website feature list, and guidelines for insurance offering categorization, I mapped out all the features and categories in a somewhat convoluted attempt at site hierarchy and organization.

3. Interaction Design

Task Flows

From my garbled sitemap, I decided to clarify one user's possible movement through the Kaus website in the following task flow. This outlines how an average user might go from browsing the website all the way to a completed sale.

Notable in this flow is the user's ability to receive a phone call from a Kaus representative right away after receiving a quote. Many participants in my research noted that interacting with a representative is important to them, and I feel that this manner of involving customer service through an online quote generator could be crucial in turning price quotes into more sales.

User Flows

I used the sitemap and task flow I created earlier to codify all the possible movements through my website in this detailed user flow. Notable throughout are the many times the user is faced with the opportunity to speak with a representative, as my research indicates that involvement from a live representative is key to turning general browsing into completed sales.

Wireframes

These are the responsive wireframes for Kaus that I created as an early attempt to develop content and establish placement of the content hierarchy throughout the homepage. I tried to create a welcoming and playful atmosphere through the use of my header typography choice, the repetition of simple geometric shapes as a design elements, and the uncluttered presentation of text and insurance offerings surrounded by plenty of negative space.

These two screens below continue the stylistic theme begun on the homepage for the Auto & Recreational page (which I decided would be featured in my prototype user flow), and a very basic initial attempt at the quote wizard screen (inspired by Lemonade).

4. UI Design

Brand Style Tile

This is an early exercise I did to explore a visual style for the Kaus brand. The UI evolved considerably from this initial attempt.

Responsive UI Design

This is the homepage that I designed for Kaus in desktop, tablet, and mobile formats. I landed on the color scheme after trying out a number of different options, eventually setting the hue of all my colors to the same number, which I feel helped create a better sense of unity. The colors are meant to evoke trust, calmness, and relaxation.

I dropped my original idea of geometric shapes in favor of hand-drawn circular shapes, which I feel tie the customer photos together and also contribute to the sense of unity throughout the design. I also bought a set of illustrations, which I edited in Adobe Illustrator to match my color scheme, and I decided that each illustration would accompany each insurance category.

I did a good deal of experimentation with the style for the carrousel slideshow at the bottom of the page which would like customer testimonials, and eventually arrived at one that I feel matches the rest of the site's aesthetic.

Below is the auto insurance detail page for the Kaus website. I wanted in particular to find action photos of people engaged in fun activities related to the types of insurance in question, that would again contribute to a sense of ease and fun.

I found a set of icons online, which I used to accentuate each card in the insurance discount section.

The following set of pages are for the quote wizard screen, which represents the end of my prototype user flow. I was inspired by the format of Lemonade's and Progressive's quote generators, though I did my best to execute the screens in a format that reflected the style I had set up in the previous screens.

In particular, I struggled to make sure I covered all the necessary details that a customer would encounter in an auto insurance quote.

I enjoyed creating the forms, dropdowns, buttons, and progress bar for these screens, doing my best to make these assets consistent with the previous pages' design aesthetic.

Especially notable is the floating icon that allows the customer to contact and insurance agent at any point in the quote process.

I had to do some specific research on quote generators for inspiration on how to organize the order payment screens.

Finally, the customer is greeted at the end of the flow with options for how to engage with their new Kaus coverage.

UI Kit

Next, I collected all the various design elements I created for this project into a master UI kit.

5. Iteration

High-Fidelity Prototype

View Prototype

Usability Testing

I held an unobserved usability test via Maze for my Kaus prototype, in which I tested the following design objectives:

  • Test the ease of navigation between pages.
  • Test how well the interface promotes a feeling of calm and trust for the user.
  • Test how easily the user can complete an auto insurance quote.
  • Assess whether components are well placed to promote easy task completion and site navigation.

I designed my user flow so that users could move in a few different ways from the homepage all the way through the quote wizard. I posted my usability test link on social media, with the request for friends and family between the ages of 30 and 65 who have previously bought insurance to test the prototype and answer some questions on their findings. 8 total participants completed the flow and questions.

Possible Changes

The participants in the usability test suggested the following updates to the prototype, which I have since implemented.

  • Add “next” buttons to all quote screens to make the experience uniform.
  • Rephrase one particular quote wizard prompt to be a statement of instruction rather than a question, since there is no “no” answer to the current yes or no question.
  • Add a page where the user can download the quote as a PDF or have it emailed to them. From there, they could be asked if they would like to proceed with purchasing a policy.

Next Steps

1. Improved Prototype

I will add more options and features to the current prototype. In particular, I feel that the quote wizard should include more opportunities for the customer to be able to contact a customer representative. This inclusion would make the wizard more consistent with my research findings and my original user flow, which included more possibilities for customer assistance.

2. Testing

I will pursue more usability testing on the updated customer assistance features of the prototype.

...

Latest Work

Back to Top