Kaus
Boosting insurance sales online
Overview
Kaus is a large insurance company that primarily sells prepared business and personal insurance products through agents and allows little customization to maintain low costs for its customers.
The Challenge
To compete with competitors and appeal to the growing population of tech-savvy Millennials, Kaus would like to begin offering and selling its insurance products directly to customers online.
Objectives: (1) Design a new modern and fresh logo for the company, and (2) Design a responsive e-commerce website
Role: UX Researcher, UX/UI Designer, Interaction Designer
Duration: 4 weeks
Tools: Figma, Invision, Miro, Octopus.do, Creately
Kaus is a fictitious company, and this project and its content are used for speculative and educational purposes.
Design Process
01
Empathize
02
Define
03
Ideate
04
UI Design
05
Prototype
06
Test
01
Empathize
I needed to learn about the complexities of the insurance market and its competitive environment and to understand the user’s needs, motivations, frustrations, and goals regarding insurance.
PROCESS: 01 Plan research | 02 Conduct research | 03 Synthesize findings
01 Plan research
RESEARCH PLAN
I created a Research Plan to guide my research efforts.
Research goals
Determine motivations, needs, goals, and pains for buying insurance online
Define characteristics of people who buy insurance online
Define the general process of buying insurance
Methodologies
Secondary: Market research, Competitive analysis, Provisional personas
Primary: User interviews
02 Conduct research
MARKET RESEARCH
To understand insurance mechanics and current market threats and opportunities, I conducted market research.
Industry
Most common personal policies: auto, health, homeowners, and life
Car insurance legally required in the U.S. (minimum requirement varies by state)
Medical insurance requirement: MA, CA, VT, NJ, RI, and DC
Most standardized: Auto and life insurance
Most common bundles (for cheaper rate): Auto + homeowner/renters insurance
U.S. SALES
25%
Direct online auto insurance sales
90%
Indirect life insurance sales via agent/broker
84%
Indirect property & casualty insurance sales via agent/broker
MILLENNIALS
2.5 X more often
Contact insurers through social networks
Lower
Satisfaction logged with insurer
2 X more often
Contact insures by mobile
TECHNOLOGY
Nearly two-thirds are confident users of new technology and online services
Threats
01
Shift to
Risk prevention
02
Increasing power of companies that
Own and analyze data
(e.g., 44% users willing to buy insurance from the likes of Amazon, Google, etc.)
03
Preference to yield high returns through
Insurance-related investment
Opportunities
01
New Risks
83% - Cyberattacks and outliving savings
Each step in global supply chains
Businesses reliant on shared economy
02
New Underwriting
Micro-insurance
On-demand insurance
Peer-to-per insurance
Personalized pricing (e.g., telematics)
03
New Value Propositions
Online price aggregators help users compare prices and bypass traditional agent distribution model
55% - Customers want to explore new insurance models
26% - Insurers investing in new models
37% - Customers willing to share additional data for improved risk control and prevention services
04
New Technology
Insurtech companies are disrupting distribution channels
31% - Customers want new channels
COMPETITIVE ANALYSIS
Next, I had to understand Kaus’ competitors. For direct competitors, I chose well-established insurers selling similar types of insurance and newer entrants with more targeted and innovative approaches. Based on market research, I found an indirect competitor that helps users compare policies across different insurance providers.
PROVISIONAL PERSONAS
I leveraged market research to craft provisional personas, which guided recruitment for user interviews, where I would further assess them.
The Skeptic
30 - 55 years, tech-savvy, cautious, frugal
GOALS
Get all the necessary information needed to make informed decision
Review and compare policies efficiently
Get the absolute cheapest deal
PAINS
Finding the lowest cost provider
Comparing policy terms with respect to prices efficiently
Lazy Shopper
18 - 35 years, tech-savvy, brand conscious, not too concerned about privacy
GOALS
Does not want to think too much/ be told what to do
Easy and quick process
Find the best-fit plan
Find reliable provider
PAINS
Comparing different products is time consuming and confusing
Reading through the entire policy
Asking someone for help or reading reviews/ getting recommendations
USER INTERVIEWS
To gather users’ perspectives, I conducted remote, 1-on-1 interviews with four potential users, who previously purchased insurance, to ask about their insurance buying experiences and online shopping habits.
Participants
Ages: 32 - 65
Gender: 2 male, 2 female
Race: 3 Asian, 1 Caucasian
Education: All university graduates
Employment: 3 working professionals, 1 unemployed
Marital status: 3 married, 1 single
Dependents: None
03 Synthesize findings
With all my observations, I needed a way to organize and analyze my research findings to enable me extract user needs, motivations, frustrations, and goals.
EMPATHY MAP
With one observation per sticky note, I sorted ( and resorted) sticky notes into themes. From the largest themes, I extracted an insight and then a need.
Insights
User is more likely to purchase from a provider that appears credible
Users avoid interacting with other people
Users tend to look for the cheapest option
Users do not trust insurers’ claims process
Users value an easy online experience
Needs
To know about other users’ experiences with the insurer
To know they can shop online for insurance
To be able to compare options
To see that the claims process is transparent
To complete tasks just by using the insurer’s website
STORYBOARD
Then, I sketched a storyboard to further explore users’ motivations and frustrations regarding buying insurance.
PERSONA
I consolidated all of my research findings into a persona to represent my ideal user, help communicate all my research findings, build empathy with relevant stakeholders, and direct my design decisions for the remainder of the design process.
James Townsen
“I don’t trust insurance companies because I don’t think they will have my back when I need them.”
THE SKEPTIC
Age: 33
Gender: Male
Location: Boston, MA
Occupation: Developer
Marital Status: Married
Dependents: None
Goals
Want an easy process
Want the cheapest policy
Do not want to interact with other people
Motivations
Have peace of mind for covering something he loves
Comply with legal requirements
Have coverage for something that is expensive
Frustations
No quick way to read through policy
Do not ever know what the actual cost of the risk will be
Paying for something in which the actual benefit is unknown
Needs
To know about other user’s experience with the insurer
To know they can shop online for insurance
To be able to compare options
To see that the claims process is transparent
To complete tasks just by using the insurer’s website
02
Define
After understanding the user and insurance industry, I had to define the issues and the goals as a foundation for problem solving.
PROCESS: 01 Frame the problems | 02 Understand product goals
01 Frame the problems
POV STATEMENTS
To define the problems and frame them from the user’s perspective, I created Point-of-view (POV) statements for each insight and need pairing from my Empathy Map.
POV Statements
Users need to know about other user’s experiences with the insurer because users are more likely to purchase from a provider that appears credible.
Users need to know the user can shop online for insurance because users avoid interacting with other people.
Users need to be able to compare options because users tend to look for the cheapest option.
Users need to see that the claims process is transparent because users do not trust insurers’ claims processes.
Users need to complete tasks just by using the insurer’s website because users value an easy online experience.
02 Understand product goals
PRODUCT GOALS VENN DIAGRAM
I had to identify different stakeholders’ product goals to see how they align and understand their impact on my design decisions. To identify stakeholder goals:
Business goals: I referred to the design brief.
User goals: I pulled goals from the Persona.
Technical goals: I thought of goals developers may have for the mobile app.
After plotting all the goals in a Venn Diagram, I could identify the aligned goals (in the middle) that I would use to direct my design decisions going forward in the process.
03
Ideate
In this phase, I generated ideas for Kaus’ website and logo design based on my research and aligned product goals.
PROCESS: 01 Prioritize product features | 02 Build information architecture | 03 Sketch | 04 Understand interactions | 05 Wireframe
01 Prioritize product features
PRODUCT FEATURE ROADMAP
To meet product goals, I had to decide which features to include in Kaus’ website. After researching features competitor websites have, I identified issues the features solve, noted how often they occur, and sorted them in a Product Feature Roadmap to prioritize which features to design first.
02 Build information architecture
SITEMAP
After comparing competitor sitemaps and referencing aligned product goals, I built Kaus’ website’s Sitemap to visualize its information architecture and ensure its navigation and content groupings aligned with user mental models.
03 Sketch
LOW-FIDELITY SKETCHES
Sketching helped visualize and layout product features, apply information architecture, and communicate my design decisions to stakeholders.
I began sketching three different wireframes for Kaus’ homepage based on layouts and designs of competitor websites.
04 Understand interactions
To validate my design decisions in the low-fidelity sketches, I had to understand how users would interact with the website to accomplish a task: buying insurance on the Kaus website.
TASK FLOWS
Mapping out the task flow helped me determine where users would enter the website, which pages, features and functions they would interact with to accomplish the task.
Depicted above is the task flow: To get an auto insurance quote on the Kaus website
USER FLOWS
With the task at hand and assumptions noted, I mapped user flows for a new and return user, which helped determine placement for CTAs and certain content to assist users in making decisions and accomplishing the task.
The above user flows indicate that a current customer may have more interactions before clicking on the Get a Quote CTA.
05 Wireframe
MID-FIDELITY WIREFRAMES
To assess the website’s overall tone and begin building its design, I selected the homepage sketch with the best visual hierarchy to create as a mid-fidelity wireframe. Then, using wireframe’s elements, components, and general layout, I created mid-fidelity wireframes for other desktop pages to ensure consistent design across the website.
RESPONSIVE WIREFRAMES
To meet project objectives, I had to ensure content responds appropriately on different screen sizes by structuring content in a linear fashion as screen sizes decreased.
By creating responsive wireframes, I learned how important “mobile-first” and “content-first” design approaches are.
04
UI Design
To meet product goals and project objectives, I had to create Kaus’ branding concept and the website’s user interface.
PROCESS: 01 Create the brand | 02 Apply UI
01 Create the brand
I first followed the below branding process to identify Kaus’ brand attributes:
01 Reference design brief to find desired attributes
02 Brainstorm how Persona would perceive the brand
03 Gather inspiration from competitor websites
LOGO & STYLE TILE
Through the branding process, I identified the following brand attributes for Kaus: comfortable, modern, thoughtful, knowledgeable, affordable, efficient, sincere, and clear.
Considering these attributes, I created a wordmark logo similar to competitors and ensured it is scalable, readable, and clear. Then, I selected color, typography, and line illustrations to create a style tile that clearly conveys the branding concept.
Logo brainstorming and exploration
02 Apply UI
With a clear branding concept, I could apply the branding concept to my wireframes to create a cohesive website design.
UI RESPONSIVE WIREFRAMES
I applied the branding concept to my mid-fidelity responsive wireframes to evaluate how the branded elements and components would scale across different screen sizes.
UI KIT
To communicate my design and replicate the design consistently across all pages in Kaus’ website, I consolidated repeating branded elements, components, and templates I created into a UI Kit.
05
Prototype
To be able to test the Kaus website’s usability and understandability, I had to create a high-fidelity prototype.
PROCESS: 01 Create high-fidelity wireframes | 02 Build prototype
01 Create high-fidelity wireframes
HIGH-FIDELITY WIREFRAMES
Leveraging my UI Kit, I applied branded elements, components, and templates consistently across other mid-fidelity wireframes and pages in the Sitemap.
High-fidelity desktop wireframes of main pages
02 Build prototype
HIGH-FIDELITY PROTOTYPE
First, I thought of main task flows I could test using my high-fidelity wireframes. Then, I gathered my high-fidelity wireframes, created additional high-fidelity wireframes to flesh out task flows and micro-interactions, and connected them with interactions in Invision.
High-fidelity wireframes of quote wizard screens
05
Test
Testing the Kaus website desktop prototype would allow me to observe its usability and understandability, which help inform improvements.
PROCESS: 01 Decide what to test | 02 Conduct usability tests | 03 Synthesize findings | 04 Revise wireframes | 05 Revise prototype
01 Decide what to test
USABILITY TEST PLAN
Drafting a Usability Test Plan helped provide direction in conducting usability testing.
Method
Remote think aloud usability testing of the Kaus desktop website high-fidelity prototype in Invision
Tasks
Get a quote for auto insurance that provides basic coverage (i.e., for collision)
Search the Kaus website to find one way to save on car insurance
Find where in the Kaus website you can learn what Gap insurance is
02 Conduct usability tests
USABILITY TEST FINDINGS
Using my Usability Test Plan and my high-fidelity prototype, I conducted usability testing with six participants as they completed three tasks.
Participants
Ages: 31 – 37
Gender: 3 male, 3 female
Locations: 1 California, 1 Texas, 4 New York
Race: 5 Asian, 1 Caucasian
Trait: has purchased insurance before
Average testing time: 22 minutes
Test metrics
Test completion rate: 83%
Task 1: 0 incomplete
Task 2: 1 incomplete
Task 3: 2 incomplete
Error-free rate: 100%
03 Synthesize findings
AFFINITY MAP
After testing, I created an Affinity Map to organize and analyze my testing observations, enabling me to identify the users’ main frustrations and generate and prioritize actionable revisions to improve the website’s usability.
The Process
01 Write one observation per sticky note
02 Group (and regroup) sticky notes into themes
03 Draw insights from largest themes that focus on user frustrations
04 Think of specific, actionable improvement for each insight
05 Prioritize revisions based on the effort required to make the revision and the impact the revision would have on the website’s usability
Below are some of the insights and correlating revisions in order of priority.
PRIORITY
High
Insight: Users want to see all quote options side by side
Improvement: Create side by side quote comparison
High
Insight: Users want to know how company knows their information
Improvement: Explain where company retrieves information
Medium
Insight: Users need to know why personal information is required for a quote
Improvement: Explain why requested information is necessary
Medium
Insight: Users look at Resources to learn more about insurance concepts
Improvement: Move Resources to main, top navigation
04 Revise wireframes
I revised the high-fidelity wireframes based on the revision’s impact and effort required.
HIGH-PRIORITY REVISIONS
High-priority revisions either have the most impact in improving the website’s usability or were easy and quick to make. Therefore, I made high priority revisions first, as they would result in the best revised version of the prototype. As I iterated later, I made medium priority revisions, as well.
This high-priority revision required the highest effort (i.e., required changing the entire page structure) but resulted in the highest impact, as all participants desired a side-by-side comparison.
The effort level required for this medium-priority revision was high, since I had to conduct additional secondary research and add a tool tips icon and modal to almost every field in the quote wizard. However, the impact is equally high because users would be more informed when deciding to enter their personal data.
05 Rebuild prototype
HIGH-FIDELITY PROTOTYPE
I gathered my revised high-fidelity wireframes, created additional screens to flesh out previously selected task flows, and connected them with interactions in Invision.
Conclusion
In helping Kaus design their e-commerce, responsive website and new logo, I learned:
There is no need to flesh out every micro-interaction for testing. That’s just not the point of testing, even in a high-fidelity prototype. I mistakenly took a long time to create a detailed prototype, which resulted in very long testing sessions (due to the number of interactions) and participant fatigue.
You have to think about testing long before the testing phase. I began thinking about testing task flows during interaction design in the Ideate phase.
Solid research makes you empathize more but feel less. After better understanding the user through research, I felt more confident about my design decisions and could (more importantly) justify them. This process made me think about empathy differently. I was no longer trying to feel what the user felt (per se).
Next steps
Hand off current revised version of the prototype to developers using Figma’s spec tool
Incorporate accordion pattern for FAQs
Wireframe and apply UI to Claims page, Sign in and account pages, Resources subpages, and product information pages
Monitor for and adapt to changes in the market and user needs, motivations, goals and frustrations
OTHER CASE STUDIES
Google Aria
Assisting caregivers manage asthma
PayPal
Improving consumers’ financial well-being
Coppell Deli
Enabling online sales channels