Kaus Insurance

Responsive Web Design

background

As the first project of Designlab's curriculum, I chose to work with Kaus, an imagined insurance company looking to create a responsive e-commerce website to sell insurance policies directly to individual consumers.

problem

Kaus had previously been selling their insurance policies to agents who would then sell them to consumers. With the rise of the internet, Kaus had been losing ground and wanted to catch up by selling packaged policies to consumer directly, which would allow them to be more efficient and keep rates lower than competitors. Since insurance is not an easy topic, Kaus wanted to create a website that was easily browsable, pleasing to use, and simple to understand.

goal

My goal was to create a responsive website across desktop, tablet, and mobile that would allow users to easily browse Kaus products, have a good user experience, and create a modern and fresh logo for the company.

Role

UX/UI Designer

timeline

4 weeks

Process

1. Empathize
Understand users' thoughts and considerations when shopping for insurance
2. Define
Design a useful, usable, and desirable responsive design that would meet both the business' and user's needs
3. Ideate
Create sketches and wireframes of the homepage, quote form, product page, and checkout form
4. Prototype
Create high-fidelity wireframes and prototypes to use for testing the usability and understanding of the website
5. Test
Conduct usability testing to get feedback on task flow and overall experience with the website

1. Empathize

To understand user's thoughts and considerations when shopping for insurance, I conducted market research, competitive analysis, and user interviews. These helped me to get a better understanding of the user's wants, needs, and frustrations.
Market Research
Insurance is a contract, represented by a policy, in which an individual or entity receives financial protection or reimbursement against losses from an insurance company. Websites play a big role in competition and can greatly improve a carriers' quality of service by providing online means such as paying bills, adding coverage, etc. The market today is making it difficult for traditional insurers to stand out, so the shift has been to prioritize customer experience.
Competitive Analysis
User Interviews

"I feel like car insurance is just something I have to buy and they're all pretty much the same with the exception of minor differences but either way, all policies are just hard to understand."

Goals

  • Find the most affordable insurance option while understanding what they are getting

Needs

  • Understand the benefits in their policy in simple terms
  • Get good pricing for policy
  • Inclined to reputable and recognizable companies

Frustrations

  • Not being educated on insurance terms
  • Understanding the calculations of premium rates
  • Hidden fees/no transparency
  • Not being able to see comparisons across different companies
  • Any language barriers

Motivations

  • Having agents to speak to for specific questions
  • Discounts/incentives for cheaper rates
Key Findings
  • 3 out of the 4 participants rated themselves less than 2 out of 5 in their confidence in understanding insurance (1 being not confident and 5 being super confident)
  • Two participants noted that they did some research prior to purchasing their current policy, while the other two expressed they considered referrals by other people
  • All participants expressed that insurance was needed as a protection and just an item that they needed to have
  • All participants expressed they wanted to understand the benefits in their policy in simple terms and would like more education on insurance when shopping for it 
Possible Solution
  1. Create a website that provides helpful educational information and tips while the user gets a quote, browses for insurance options, and purchases a policy

Participants

  • 4 participants were interviewed
  • 3 of the 4 participants were young adults while one was middle-aged

Goals

  • Find the most affordable insurance option while understanding what they are getting

Needs

  • Understand the benefits in their policy in simple terms
  • Get good pricing for policy
  • Inclined to reputable and recognizable companies

Frustrations

  • Not being educated on insurance terms
  • Understanding the calculations of premium rates
  • Hidden fees/no transparency
  • Not being able to see comparisons across different companies
  • Any language barriers

Motivations

  • Having agents to speak to for specific questions
  • Discounts/incentives for cheaper rates
Key Findings
  • 3 out of the 4 participants rated themselves less than 2 out of 5 in their confidence in understanding insurance (1 being not confident and 5 being super confident)
  • Two participants noted that they did some research prior to purchasing their current policy, while the other two expressed they considered referrals by other people
  • All participants expressed that insurance was needed as a protection and just an item that they needed to have
  • All participants expressed they wanted to understand the benefits in their policy in simple terms and would like more education on insurance when shopping for it 
Possible Solutions
  1. Create a website that provides helpful educational information and tips while the user gets a quote, browses for insurance options, and purchases a policy

2. Define

Based on research findings, I created an empathy map, persona, and task flow for Annika. She is a young working professional who is trying to slowly become more independent. This means getting off of her parent's insurance policy and onto her own. However, since insurance is confusing she needs some assistance in whatever way she can get it.
empathy map
persona
task flow
The task flow I created was to test whether or not Annika could successfully get a quote for a car insurance policy and purchase a policy from the homepage. This would meet both the business and user's needs as the business wants the user to purchase a policy and the user wants a good user experience and to understand what they are purchasing.

3. ideate

Based on the persona and task flow, I designed low-fidelity wireframes of the homepage, the quote form, and the product page that would give Annika a good experience and allow her to easily purchase a policy. I also designed the homepage to be responsive across desktop, tablet, and mobile.
low-fidelity wireframes
logo designs
UI KIt
My original logo design idea was to create an umbrella shape over the word "Kaus" to show that as an insurance carrier, it helps to cover. However, since Kaus aims to help people save money, I ultimately decided on the logo below because I felt that it resonated with the word "contained" as it implies that since you are insured, your losses will be contained.

I decided to go with the colors blue and green because it evokes of sense of security, growth, calmness and serenity, which I felt worked well with the brand keywords and idea of insurance.
responsive homepage
Desktop
Tablet
Mobile

4. prototype

After some iterations, I created high-fidelity wireframes for the task flow and added pages for the checkout process.

5. testing

After creating the prototype, I conducted usability testing to test if users could complete the task flow and to receive feedback on their experience for further iterations.
Usability Testing
  • 6 participants
  • Ages 26-60 years old
Findings
  • All participants were able to complete the tasks of getting a quote and purchasing a policy with minimal help, despite some errors due to my prototype creation and explanations
  • All participants were able to find the CTA within seconds of opening the page
  • All participants said the flow made sense and the form was logical
  • One participant mentioned having a chat function or live agent to speak to would be helpful
  • Two participants commented on how helpful the information on the quote and product pages were
Iterations

Based on user feedback, I rearranged the badge placement on the homepage. The feedback I received was that in the original placement, it was a bit cramped, hard to see, and made it feel like there was too much going on in the hero section.

Moving the badge out of the hero section helped with visual hierarchy to draw more focus to the headline and CTA. Placing the badge in its own thin section under the "Browse Products" also helped to draw attention to the badge without being crowded by other elements.

After reviewing some insurance websites, I noticed they usually had a "Save for Later" type option. I added this to my form as I felt like would help to make a better user experience, especially if someone couldn't finish filling out the form at the moment.

I received feedback to add some more information to the confirmation page in regards to the user's ID card. This would let the users know they would be receiving a physical ID card but could also retrieve it in their confirmation email or on their account. This would also incline the user to browse their account page on Kaus and potentially look at other insurance types.

FINal prototype

The task flow: Go through the form to get a quote and purchase a policy.

next steps

As the first project within Designlab's UX Academy, I really had no idea how it would turn out. I was worried it would not be that great of a project especially since insurance itself is already such a complicated topic adding onto my first ever website design. However, I am quite content with the end result. Although it is not the best, I began to learn how important it is to consider the user's experience through the user's lens throughout the entire design process. Even though my research findings mirrored the considerations I had in my initial thoughts of a responsive website after reading the brief, being able to hear from my users their needs and wants, frustrations and pain points proved in helping to create a website that would meet their needs and give them the best user experience.

The next step would be to continue improving the visual design of the different pages. Since the information gathered to produce a quote are quite static, making the website easily browsable posed some challenges because there wasn't much information that could be filtered. One thing I didn't get to explore much into was the comparison chart and comparing quotes against other companies, so I would like to design that function. I would continue looking at other major insurance websites to get some more inspiration from their designs and overall experience. Since this design was mainly focused on car insurance, I would like to explore the other insurance types and how it would interact with the rest of the design and experience.

Although insurance is still a complicated topic, I think my website helped to provide some help and tips that would alleviate user's concerns and frustrations when visiting this topic.

Other Projects