Kaus Insurance
UI/UX Research and Design for Kaus, a ficticious legacy insurance company, to create a responsive e-commerce site.
The Challenge
Kaus has focused on B2B sales for over the past 30 years, but they are losing the market share of younger insurance buyers.
The Opportunity
Kaus needs a refresh of their brand as well as a new responsive e-commerce website to capitalize on direct to consumer technology solutions.
Tools: Figma, Adobe Illustrator, Adobe Photoshop, maze.co, optimalworkshop.com, Google Workspace
Timeline: 12 weeks
Roles: Art/Creative Direction, UX/UI Design, UX Research, Brand Design
The Result
A responsive e-commerce site fitted with a simple information architecture, and an approachable brand to connect with the target audience and solve their needs of an insurance company.
Empathize with the user
What are users motivations or frustrations with current insurance solutions?
Competative Analysis
My research began with reviewing the existing competitors in the market and the solutions they had created thus far. Overall, no one is really doing internet B2C insurance sales well. Insurance is a complicated topic.
User Interviews
To get diverse insight to this problem, I interviewed 5 people through 1-on-1 in-person interviews. Each conversation lasted up to 15 minutes. My research resulted in 3 key findings:
1. Cost alone was consistently the highest value for each particiapnt.
"Anytime I see a commercial I think 'Could I get that cheaper?'"
2. No one wants to think of insurance more than what is absolutely necessary.
"I honestly don’t use it and check it maybe twice a year"
3. The less insurance is thought of, the happier the person is with their purchase.
"[Insurance is] just a pain to think about. Its a chore."
Define the problem
After learning about the eixisting user experience, I set out to define the problem into actionable points.
User Persona
I compiled the Epmatize research into the user persona of Budget Ben. He is a young professional, has multiple responsibilities (husband, father, business owner).
He is ultimately looking for a transparent, hassle-free, insurance solution that delivers peace of mind and doesn't require his attention.
Project Goals
Budget Ben's goals arent't the only one that needs to be considered though. The business goals need to be seen in light of the user's goals. And where there is an overlap there is a design opportunity.
The opportunities include a simplified solution that allows for easy in-and-out navigation, hassle-free sign ups, and simple classification of insurance products. This simplicity will improve user expereince and keep costs low.
Ideate potential solutions
This is where the fun starts; braingstorming solutions to the problem!
Card Sorting
After compiling about 20 items that users could be looking for in their insurance search, I used the website OptimalSort to run acard sorting exercise. Asking people who fit the target user demographics to categorize the diferent items in whatever way mad sense to them.
3 obvious delineations of content rose to the top.
1. Company (About, Contact, FAQ, etc)
2. Products (various insurance products, insurance bundles, and insurance info)
3. User account (bill pay, account management, update policies, etc)
3 obvious delineations of content rose to the top.
1. Company (About, Contact, FAQ, etc)
2. Products (various insurance products, insurance bundles, and insurance info)
3. User account (bill pay, account management, update policies, etc)
Since "ease of use" was a top user piority I seperated out "claims" into their own top level navigation as well. It could have easily fit inside "user account" but filing a claim is frustrating enough without users having to dig through their account to find where to do that. Visbility here was an easy win for useability.
Mind Maps
Building off of the card sorting exercise, I started to define the information architecture of the website. and then combining it with the user flow.
Site Map
This is the structure of the navigation, based on the results of the card sotrting exercise.
Task Flow
This flow defines the main task the user is wanting to complete and lists all the steps needed to accomplish this task.
User Flow
This user flow chart shows the potential routes the user could take to accomplish the primary task. Each blue box is a page that would need to be created and optimized for the user to be able to make the decisions (makred by the white diamond).
Design for delight
Putting pen to paper. This is when I get to bring the solutions for the user from ideas to reality.
Low Fidelity Mock Up
Starting with low fidelity mockups, I sketch out some initial ideas for the desktop version of the new Kaus homepage. Keeping in mind the task flow and user flow in the call-to-action call outs.
Responsive Wireframes
From the initial sketches I built out these mid-fidelity responsive wireframes. Building out the site in desktop, tablet, and mobile screen so the user experience can be consistent across devices.
Branding
"Cover what you care for" is the catch phrase of Kaus insutance. With both that marketing approach and the desire of the user to have a no-nonsense approach to their insurance, I created this monogram based logo. Simple straight forward, but if you turn it on its back, the arm and leg of the K form the shape of a heart.
High Fidelity Mock Ups
"Cover what you care for" is the catch phrase of Kaus insutance. With both that marketing approach and the desire of the user to have a no-nonsense approach to their insurance, I created this monogram based logo. Simple straight forward, but if you turn it on its back, the arm and leg of the K form the shape of a heart.
Test to improve
Putting pen to paper. This is when I get to bring the solutions for the user from ideas to reality.
User Tests
I had 5 participants run through a remote, unmoderated user test via maze.co that consistented of a series of 2 tasks and 4 questions.
Results
All participants completed the tasks, but took different paths. The "quote" module was utilized by every single participant, which was entirely unexpected. Knowing this allowed me to make design iterations to improve that user flow so that the user could more effeciently complete the main task of quoting and purchasing insurance.
Iterate to excellence
Putting pen to paper. This is when I get to bring the solutions for the user from ideas to reality.
Design Revisions
In response to the overwhelming evidence of the users using the "quote" section to accomplish their task of pricing insurance, I knew that could be a major area of improvement. I sought to both make that section more attractice and better emphasized so as to improve interaction.
I removed the duplicate quote section at the bottom of the page, as well as the "get a quote" botton on the top right. Reducing redundancy and increasing clarity of navigation (which was an initial a user goal). I also changed the copy, improved spacing, and changed the container to be the entire width of the website.
Conclusions
Insurance is a complicated product, but that doesn't mean the buying experience has to be. Through highlighting navigability and price transparency, the user has to work less to acheive their task and thus the business gains goodwill. In the end, I created a simple, beautiful, and approachable e-commerce solution for the business.
This project taught me 3 things:
1. Testing is important to reveal bias. My own personal bias for how I like to navigate e-commerce websites influenced my design decisions in a way I didn't forsee. This was revealed in the user testing when every user interacted with the quote module, completely antithetical to my expectations. But I was able to recognize my bias and iterate on the design to improve its accessibility. Further research could be warranted to reveal further design bias that could potentially be impacting the user flow.
2. Figma prototypes have limits. This was my first time creating fully prototyped interactions in Figma. As such I discovered how powerful of a tool it is to create useable mockups; but still I realized it's limitations. Those limitations cause design changes. Know that I have a better understanding of Figma's prototyping capabilities, I'll be better prepared to create mock-ups within the proper score in future projects.
3. Components are timesavers Another feature of the software that I learned through this project is components and components sets. It wasn't until I created my high fidelity mock-ups that my mentor pointed out components to me; a tool which could have saved me time a difficulty in the design process. In the future I will design with components and component sets in mind to incrase speed and consistency across the UI kit.
