Kaus

Responsive web design for an insurance company.

 

Project Overview

Kaus is a large insurance company that has been successful for 30 years. They have sold exclusively B2B and have been able to keep costs low by creating prepared packages. To stay current, Kaus is ready to refresh their brand and create a digital platform in order to sell directly to consumers.

Objective

  • Create a responsive e-commerce website (accessible on mobile, tablet, desktop) in order for consumers to purchase insurance that fit their needs.

  • Create a logo and branding that aligns with company’s values

My role

UX/UI Designer

Timeline

4 months

Tools

  • Figma

  • Maze

  • Canva

  • Miro

  • Google Forms

Research

Secondary Research

Competitive Analysis

The objective for competitive analysis was to get familiar with the insurance industry so that I had a better idea of how to solve the problem. This information was important in the beginning stage in order to get insight on industry standards and existing solutions.

Findings:

  • Most data found related to auto insurance

  • Companies can offer discounts

  • Bundling is a common feature

Primary Research

Survey

I created a short survey using Google Forms and asked those in my network that owned insurance to complete it. The objective of the survey was to find quantitative data so I could get a better idea of the demographics for those that owned insurance and some basic understanding of user behavior.

Results:

16 participants ages 27-71

  • 81.25% of participants do not have dependents

  • Most users were between the ages 27-29

  • All participants have auto insurance 

  • 2 participants only have auto insurance 

  • Top factors considered when buying are costs and coverage

Interviews

interviewimage.png

I interviewed 5 participants from those who completed the survey and asked them questions around their experience purchasing insurance. I was able to gain qualitative data from user stories. From their perspective, I could tell what features they liked and where they experienced pain points.

Frustrations 

  • Feels like quotes are different online v. with an agent and not aware of all discounts available.

  • Website is easy to navigate but does not provide the same comfort and information as an agent. 

  • Being dropped by an insurance provider after a claim has been filed.

Needs

  • Wants the lowest price 

  • Needs best coverage in case of emergencies

  • Auto and home/renters bundle so that it will be easier to make payments 

  • Ability to speak with agents when getting coverage so can ask questions. 

Define

Persona

Meet Sophia! Based on the research I was able to create a persona that represents the characteristics, goals, and frustrations of a potential user.

newpersonaimage.png

Project Goals

Here I have defined the business goals, user needs, and technical constraints in a venn-diagram to help visualize their relationship.

Similarity Matrix

Kaus has a lot of products and features and in order to successfully design the information architecture I was able to get 5 participants to complete an ‘Open Card Sort’ using Optimal Workshop. The participants sorted the words by association and I used the results to help me create the site map. I was expecting these results with the products and features grouped together but was surprised to see ‘Business Insurance’ was not associated with the rest of the insurance products.

revisedsimmat.png

Site Map

Based on the similarity matrix, I was able to create a sitemap which divided the items in the card sort into 3 groups (Insurance, Account, About). I also included some features I wanted on the landing page to use as a reference when I start designing wireframes. Having the site map divided this way will help the user find what they need quickly when performing a task. 

Task Flow

After the site map, I was able to create a diagram of the process of purchasing car insurance. This helped me prioritize what pages are most important and what features should be available to complete the task.

Design

Lo-fidelity Responsive Wireframes

Once the task flow was done, I was able to create some sketches. I sketched out some ideas for the most important page which was the homepage. This is the user’s first impression of the website. The sketches allowed me to visualize how I could prioritize and display different features.

wireframescasestudy.png

For these low-fi wireframes, I decided for a minimalistic design. The most important tasks are right on the homepage so that users have easy access to those features without having to sort through too much information or pictures.

loficasestudy.png

Branding

In the project brief for Kaus, it stated that the brand message was clean, modern, and trustworthy. Sans-serif fonts convey a modern look while the blue represents trust. I chose this combination so that it aligns with the business’s core message.

styletile.v2.png

Hi-fi Wireframes

For my first version of the hi-fidelity wireframe I had a lighter blue color with simple icons for a clean look. However, the main color did not pass the accessibility standards and the icons were too simple. I wanted to keep blue since it is the color of “trust” while also making sure the color contrast was accessible for everyone so I found a shade that passed the AAA standards and found icons that had more depth.

beforeaftercasestudy.png
Frame 1.png

Test

Usability Test

For the prototype, I focused on the process of purchasing insurance. I used Maze for an unmoderated test with 7 participants and I was able to complete a moderated usability test in-person with 5 participants. My goal was to see if users could successfully perform tasks and reveal any pain points that might exist.


Task 1: Please take a moment to look at the main page. What stands out the most? 
Task 2:
You researched other insurance companies but have decided on Kaus from a 
family recommendation. Where can you start the process of buying auto insurance?
Task 3:
Choose the option that will give you the best coverage and the best price.
Task 4:
Complete your purchase using a credit card. 

Maze Test Results

These pages were confusing a majority of the testers. There was a high percentage for mis-click rate. As shown in the images, users were clicking all over the page. This was cause by the multiple buttons available and it led to users not having a clear path to continue forward.

Frame 13.png

Moderated Test Results

The results for the moderated and unmoderated usability tests were similar in terms of where the pain points were. What I liked about the moderated test is being able to see how the user approaches each task and at times able to hear the user’s thought process. I received some valuable feedback that I wasn’t able to get from the unmoderated test because I didn’t include a section for that.

Positive 

  • 5/5 easily completed Task 1

  • 4/5 easily completed the Task 3 

  • The layout of the website was easy and simple to navigate 

  • The information for the insurance was easy to find 

Negative 

  • 2/5 had difficulty completing Task 2 

  • User who is color blind had difficulty identifying if button was active

  • Most users find “Add to list” process was confusing

  • Some technological issues like text being too small and hover states not activating 


affinity.png

Conclusion

Reflection

This project was challenging for me because I started off without a lot of knowledge about insurance. I completed this project knowing more about insurance and how important the steps are. Since this was my first project, I was focused on completing each step. As I was creating my case study, I realized how important each step is to move the project forward.

Next Steps

  • If I had more time I would have tested my prototype with the corrections made from the feedback I got

  • In my research a lot of users preferred to speak to agents and I was not able to implement that in my design. 

  • Create a prototype for tablet and mobile


Next
Next

Wok N Roll