Kaus Insurance Website
Designing a responsive website for an e-commerce insurance company, Kaus.
👩🏻💻 Role: UX Designer
🔨 Tools: Figma, Miro, Zoom
⏰ Timeline: 80+ hours (4 weeks)
see prototype ⤴︎*Kaus is a fictional company generated from a brief via Designlab's User Experience Academy.
Introduction: Who is Kaus?
When it comes to selecting the right insurance plans, Kaus has their customers covered. By selling prepared packages tailored for a wide variety of life situations, Kaus is able to keep their rates competitive and accessible. However, they have been operating for 30+ years primarily only with regional agents. So, Kaus desires to branch out their sales directly to customers vs. agents.
The Problem
Need to reach a widespread e-commerce market: Kaus feels as if they've been losing ground directly with customers, particularly with the rise of digital and personal devices.
The Solution
Responsive website: Stand out in the insurance B2C market via a refreshed and updated brand identity and responsive website.
How might we increase conversion to Kaus by building a refreshed brand identity and pleasing e-commerce website?
How might we aid Kaus customers by making the information easily browsable and the streamlining the purchasing process?
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/60afebbb8394307513f8d5ff_Frame%20116.png)
Defining Research Goals
Now that I had the overarching challenges in mind, it was time to do some research! I developed the following goals in order to guide my investigation, sharpen my hypothesis, and reveal any assumptions.
Competitive Analysis
To better understand the competitive landscape, I researched and summarized the strengths and weaknesses among five carriers who provide similar services and products to Kaus. From this relevant information, I then generated five provisional personas that could potentially reflect a target segment of the market.
Key insights from the landscape:
• Insurance companies stay competitive by offering a wide range of policyholder discounts and savings through bundling opportunities.
• Companies try to offer diverse coverage for various life situations and accidents.
• They all employ an online quote tool and account management abilities on the website or app.
• Generate Kaus’ online audience who would purchase insurance policies online. This strategy involves creating a refreshed brand identity and appealing website.
• Develop a persona that fits Kaus’ target audience and market.
• Determine the needs and pain points of customers who would buy insurance packages online. Identifying these points would be crucial in determining the content and structure of Kaus’ website.
• Understand competitors’ roles and strengths that serve their customers well. Identifying these patterns is necessary in order to apply some to Kaus’ model, also.
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/6098c202f115904e8ce5acfe_quotes-kaus.png)
Talking With Current Insurance-Holders
I conducted qualitative research via user interviews in order to understand the users’ motivations, identify pain points, and reveal their insights into the insurance sphere. I remotely interviewed and recorded participants using Zoom meetings. All participants have experience with holding an insurance policy. They're either looking for better alternatives or satisfied with their current policies.
• Number of participants: 7
• Age range: 25-65
• Insurance history: All hold insurance policies (auto, home, life, renters, unemployment).
Interviewing my participants produced some incredible insights. These are my main observations and respective takeaways summarized from the interviewees' responses.
Observations
• Participants are often unsure about the detailed pricing concerning their plans.
• They don't want to spend extensive time parsing through complicated insurance jargon.
• Most users have been with their original providers for multiple years.
• They are annoyed about unexplained premium hikes.
• A streamlined online quote process is extremely valuable and desirable.
Key Insights
• Participants desire more transparent information about their policies.
• Participants greatly value their time and effort when they’re seeking information.
• Most users won’t switch to new companies unless they’re absolutely convinced they need to make a desperate change.
• Many would like clear explanations as to where their money’s going.
• They would take advantage of online tools such as this for more convenience.
Defining The User: Meet Julie.
Given my better insight into users' needs, I constructed a user persona who would represent the audience segment for Kaus. By building Julie’s persona, I was able to keep primary needs, wants, and limitations in mind while developing key design features of the website. I also created an empathy map to illustrate a well-rounded perspective of pains and gains in Julie’s context.
Information Architecture: Time To Organize!
Given clear research insights, I began crafting the structural blueprint for Kaus’ website. I aimed to achieve a seamless and intuitive layout of content, so that Kaus’ customers could easily access relevant information.
In order to determine the possible categories, I conducted a card sorting exercise (via Optimal Workshop) consisting of 30 total cards from which participants formed their own groups. The main goal of this exercise was to see how participants intuitively group insurance-related topics together.
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/6098c4ea4bc7284c2122acda_kaus-card-sorting.png)
Visualizing Melanie's User Flow
It was helpful to see how users may group relevant categories of information on the website. With the relevant points in mind, I built out a possible user flow for Julie, including the primary screens that would be required for her to get the job done, which was to purchase an insurance package.
This flow also includes logical points of divergence. (ie: Julie could seek for more information, create an account, or exit the site if she’s not satisfied with her experience).
Ideation: Sketches + Wireframes
With a pencil and my notebook, it was finally time to start brainstorming! I drafted three low fidelity sketches and versions of Kaus’ landing page. It was a worthwhile exercise in experimenting with various placement of navigation and the presentation styles of content. I ended up favouring version one of the following three sketches.
I then designed mid-fi wireframes for the primary screens (landing page, all products page, home policy, quote start page). I also created some responsive wireframes that would be adapted across three kinds of devices for the landing page: desktop (1440 px), iPad (758 px), iPhone (414 px).
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/6098ced2cacf0b8d151ccfd8_kaus-mid-fi.png)
Kaus' Refreshed Brand
In addition to establishing a new website, Kaus also wanted to update their brand identity.
I drove all visual decisions of design elements (logo, colour palette, typography, illustrations) and the UI kit (CTA buttons, menu, input styles, etc) while keeping the following keywords in mind to represent Kaus' identity: energetic, friendly, inviting, warm, safe, trustworthy.
For Kaus' logo, I sketched out several versions, before settling on the final version, which features a face and two dots above the "U" in Kaus to represent a smiley face. I wanted to convey a non-intimidating nature and welcoming tone with this playful and simplistic approach.
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/60992e04b731ab1fcd66c102_logo%20(2).png)
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/60992fcaeeb17a28f467442a_ui-kit.png)
The Prototype: Insurance, Easy as 1, 2, 3!
As I reached the finalizing of styling decisions, the next step was to start building hifi prototype in Figma! This prototype, along with more relevant screens, would be used in the next stage for usability testing to determine the success rates of achieving user goals.
Accessing Quote Option #1
From the landing page, I wanted to give Kaus customers a few options for accessing the quote tool. The first route was through the "Get Free Quote" CTA button, placed in the hero section.
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/60994df0255d67211c427aa2_landingpage-1.gif)
Accessing Quote Option #2
The second route would then be through a pop-up modal, accessed through the CTA button in the main navigation at the top.
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/60994df5b5bd896209dba9d6_landingpage-2.gif)
Browsing All Products
From my card-sorting exercise, I knew it was important to have understandable categories for insurance types.
I organized information into broader products: Property, Insurance, Auto, Business, and Other. I then designed a sub-page to provide customers with more information.
In our case, Julie would be searching for Homeowners information, under the Property products tab.
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/609950130579cb689b6a5a94_modal.gif)
Completing the Quote Form
Once Julie reaches this page, then she would be prompted to fill out the necessary information to receive a price estimation.
![](https://cdn.prod.website-files.com/6059f62e72f0103016a7c37a/6099501b7265c856a37f8224_form.gif)
Usability Testing
With a working prototype, it was now time to take it for a test drive.
My primary usability test goal was to determine the major user pain points when navigating the landing page and subpages of Kaus’ prototype, all the while trying to achieve the relevant task goals, outlined below. The feedback from this usability test would then be valuable in revealing areas of improvement for the next prototype iteration.
PARTICIPANTS' TASK GOALS FOR THE TEST
Task 1:
1. Go to Kaus' landing page
2. Browse for homeowners options
3. Navigate to page for homeowners options
Task 2:
1. Start at homeowners page
2. Select homeowners policy
3. File a quote
4. Purchase a plan
The feedback from this usability test was valuable in revealing areas of improvement for the next prototype iteration.
USABILITY TEST RECRUITS
• 5 participants
• Age: 29-42
• 4 participants: remote test via Zoom meetings
• 1 participant: moderated live testing
• Screen recorded meetings
Usability Test Findings!
Understandably, version one of the prototype could benefit from some honest feedback! The results from usability testing provided helpful direction on how to improve the design for my next iteration.
In order to group the participants' comments, I developed an affinity map by clustering common concerns and successes together. From this map, I was able to extract next steps for my priority revisions for prototype version #2.
Pain Points
• Large illustrations in the banner
• Icons on the main page are too large, a bit jarring
• Scrollability is not intuitive
• UX copy on buttons and question fields need to be reworded in some instances
• Double confirmation modal before purchase is highly desired
Successes
• Visual, clear information
• Good choice of aesthetically pleasing illustrations
• Useful CTA locations
• Multiple helpful routes to get the job done (find info, get a quote)
• Nice loading/buffer screen before quote confirmation
Due to the helpful comments from my participants, these are just some of the improvements that I strived to make for version two of the prototype.
1. Increase scrollability on all pages, by resizing the banner illustrations, icons, and content sections. Also, make the content peek above the screen's fold.
2. Create more working interactions navbar for even more engagement with the user.
3. Update wording on fields, footer, and some CTAs.
4. Design a second confirmation modal screen before committing a purchase.
Closing Thoughts
The next steps would involve handing off this prototype to the development team via a spec tool, such as Zeplin or Avocode. This prototype could definitely benefit from additional usability testing before or after it goes live. Understandably, this could be limited by the time and budget constraints of the project, the business goals and respective engineering efforts.
Most importantly, as a designer, I would continue to keep the communication lines open with the developers, product manager, and other team members, so that I can maintain a holistic perspective of the project and best prioritize any design adjustments moving forward!