Klay

Simplifying small business insurance → see the final prototype
Responsibilities
Research
UX design
UI design
Branding
Timeline
December 2020 -
February 2021
(3-month project)
Tools
Figma
Optimal Workshop
InVision

The Problem

For years, the number of independent professionals and small business owners has steadily climbed. A 2017 report predicted that freelancers would make up a majority of the U.S. workforce within a decade—at the time, nearly 50% of millennial workers were already freelancing. But this year’s pandemic changed everything.

With 59 million Americans now freelancing and small business owners needing more support than ever, B2B insurance provider Klay is going direct-to-consumer to build deeper trust, loyalty, and lasting relationships with its customers. (This is a speculative project for learning and development).
A design challenge emerged...
How can an insurance provider build trust
with this new wave of independent professionals?

Research Goals

My goal was to better understand the needs of the target audience to brand and design a competitive e-commerce website. In my research, I focused on three main objectives:
01
Learn what positively and negatively impacts potential users’ decisions when shopping for insurance online.
02
Understand what factors cause a user to trust a D2C insurance company and ultimately choose a provider
03
Uncover any gaps in user needs during the shopping experience

Research Methods

Market research
Within the insurance landscape, I noticed 3 key consumer-driven trends: insuretech is on the rise, customer experience is a major strategic focus, and insurers are expanding their online offerings.
50%
of insurance clients are considering turning to newer models.
57%
say the best way to maintain customer loyalty is accessible, friendly & knowledgeable support staff.
41%
are likely to switch their insurance company for a more digitized one.
competitive analysis
With this in mind, I explored the offerings of D2C insurance providers and conducted a competitor analysis of Klay's direct and indirect competitors.
Competitor strengths
→ Trusted and established names within the industry
→ Uses advanced tech to personalize their policies
→ Above and beyond content (“how to” videos)
→ Wide range of products + extra perks such as home business discounts
Competitor weaknesses
→ Limited coverage in some states
→ Limited online capacity (not all products available for an online quote)
→ Not very transparent with rates and fees
→ Lengthy claims process
→ Overwhelming UI design
User surveys and interviews
To gather attitudinal insights directly from users, I conducted interviews and surveys on the insurance shopping experience. All participants (aged 25-45) were either currently self-employed or are considering a transition to independent work.
3 targeted user interviews
10 survey participants
92%
buy insurance for
peace of mind (top motivation).
77%
want to be able to talk with a human if they need help (top need).
85%
hold a negative view
towards insurance companies due to lack of transparency and poor customer service (top pain point).
User motivation
→ Nearly all participants want to have peace of mind knowing they’re financially covered in an unexpected scenario (likely or unlikely). They want to be able to live their life or practice their profession without worry.
User needs & wants
→ A reputable, vetted provider
→ Access to a trained advisor
→ Dependable customer service
→ An easy-to-understand plan

User goals
→ Finding the right plan: one that meets their particular needs and nothing more
→ Staying within budget
→ Getting it done. Crossing it off their to-do list—fast!
User frustrations
→ General distrust: "There’s no incentive for insurance companies to do the right thing."
→Not confident that insurance companies will deliver on their word
→ Shopping for insurance is a high-effort, high-energy task
→ Understanding all the details of their insurance is very difficult
→ Getting clear, straight answers from their insurer is usually difficult
Users expressed that shopping for insurance is a high-effort, high-energy task:
"It feels like I have to do mental gymnastics anytime I need to buy insurance."

User Mindset

Key audience Persona and Empathy mapping
To ensure I was addressing the major needs of Klay’s key users, I created Perri as a research-informed persona to represent a major segment. Using my persona, I further synthesized the data I collected into an empathy map in order to help build empathy for Klay’s users and ensure a human-centered design.

Defining the MVP

Product Roadmap
Using the data I synthesized from my empathy research, I reviewed the goals of the user and the business and identified the common ground between both. Keeping in mind technical considerations, this helps ensure I make the best design decisions for an MVP. Then, bringing together my research conclusions, the business’ needs, my persona, and the market analysis, I created a high-level roadmap based on priority for development. → See the roadmap
Information Architecture: Card sorting and Sitemap
One of the major frustrations of shopping for insurance is that, simply put, the topic tends to be complex and confusing for many. Navigating an insurance company's site is one thing that shouldn't be.

My research showed the need for a site that is user-friendly and easy to understand—users should be able to intuitively navigate the site and find what they're looking for right away. To help me understand what my users expect in terms of categorization and determine an effective information architecture, I ran a card sorting exercise with 10 participants. The results informed a more streamlined and understandable sitemap (see below).
interaction design: Task and user flows
From there, I was able to map out how a user like Perri might interact with the site's functions and content, based on her goals.

Creating task and user flows enabled me to see the various and necessary steps in a user's journey: where someone like Perri might be coming from, where she might get lost or confused and need extra support, and where she might find certain features or content helpful as she decides whether Klay is the right provider for her needs.
Product Requirements
The previous deliverables played a crucial role in providing clarity to the redesign's MVP requirements. I was now able to write the Phase 1 product requirements, identifying the key pages to launch in the redesign, as well as the detailed functionality needed. → See the product requirements

I kept four key user stories in mind: As a user, I can...
...get a quote and purchase a policy
Page to be designed:
→ Homepage
→ Get a quote/purchase plan form
→ Account dashboard
...get help (and speak with a trained agent if needed)
Page to be designed:
→ Contact Us
→ Help Center


...research the type of insurance I need
Page to be designed:
→ Category page
→ Product page
→ Profession page
→ Search results page
...learn more about the company
Page to be designed:
→ About Us
→ In The News

Wireframes & UI design

Sketches and responsive wireframes
Before producing mid-fidelity wireframes, I spent time sketching variations on the homepage in order to produce a variety of ideas as quickly as possible. Next, I recreated the strongest sketches in Figma to get alignment on flow, design patterns, and content organization—at which point I can begin to design out more screens and begin to build a low-fi prototype.
UI Design
Before prototyping, I solidified the brand's visual identity—from moodboard to logowork to UI kit complete with brand guidelines.  → See the full UI kit

To create the look and feel for our site, I reviewed Klay's business goals, my empathy research findings, and Perri's persona and focused on a few key brand adjectives:
approachable
understandable
human
modern

Prototyping & usability testing

With the branding and visual look and feel in place, I designed the desktop screens for several key task flows and created a mid-high fidelity prototype in Figma and InVision for usability testing with representative users. The goal was to test my design and assess impressions and reactions to the new site.
see the final prototype
User testing
I conducted 4 moderated remote usability tests over Zoom. Participants (aged 25-40) were recruited via my personal and professional network, and all are currently earning income through some independent work/profession. I focused on 4 objectives:
01
Test how easily and efficiently the user navigates the site through a series of tasks and prompts.
02
Observe the user’s reactions/level of satisfaction while going through the multi-step form to get a quote and purchase a policy. (Do they feel supported through the process? I wanted to identify any pain points, friction, or confusion in the process.)
03
Observe the user’s first impressions and attitude(s) towards the look and feel of the website overall. (Does the design/branding feel trustworthy, easy-to-understand, and build confidence? Are the reactions positive or negative?)
04
Identify any other opportunities for improvement/future features.
4
Usability tests
43
Average minutes per session
16
Screens tested
100%
Expressed positive reactions to the overall design, look and feel of the site
100%
Felt that the purchase flow was clear and easy-to-understand
75%
Mentioned they felt supported during the quote and purchase process
75%
Said they would feel good about buying insurance with Klay
A user testing success:
"Klay doesn't feel like some stuffy insurance company that doesn't care about me."

Priority revisions

Synthesizing the data
In order to extrapolate the results of my usability tests, I created an affinity map to help me understand and identify current patterns and pain points with my design. This allowed me to decipher the most important and impactful improvements to make before launch, as well as prioritize future enhancements. → see the affinity map
Revisions
The top priority revisions I made based on user testing include:
01
Changing the “Coverage” nav label to: “Coverage Types” to solve for the confusion. (This was a global nav change).
02
On the Creatives page, I reduced the white space between the top section and the Plans section and gave the Plans section stronger visual hierarchy by increasing the header type on “Choose A Plan That’s Right For You."
03
On the Bundle cards, I added a visual cue on the most popular bundle to indicate the“Most Popular” plan. I added a link for “How It Works” on each bundle, and updated the button to “Get Covered.”
On the Get a Quote and Purchase wizard, I gave stronger visual hierarchy to system feedback copy (it now lives within the form card vs. above it) and updated copy to feel more reassuring throughout the process.

Learnings

Outcome
I set out to design a D2C business  insurance website that feels trustworthy, transparent, and easy to use and understand. Overall, the insights from my testing phase validated my assumption that the design is clear, learnable, and delightful. According to the testers, the site “feels current and modern,” “it doesn’t feel like this is some stuffy insurance company that doesn’t care about me,” and “I really love how simple it is.” While the site will still need improvements and BAU updates, the redesign is off to a strong start.
final thoughts
Throughout the process, I had based my design thinking around one major target audience segment: the Perri persona.

While she indeed represents users that make up a significant share of Klay’s audience, my usability tests confirmed that I will need to equally consider other segments (e.g., an experienced user with advanced business insurance knowledge) to ensure the product succeeds when it comes to novice and experienced users alike.