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
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.
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.
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.
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.
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.
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.
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.
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
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