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 with mentorship).

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:

Learn what positively and negatively impacts potential users’ decisions when shopping for insurance online.

Understand what factors cause a user to trust a D2C insurance company and ultimately choose a provider

Uncover any gaps in user needs during the shopping experience

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.

With this in mind, I explored the offerings of D2C insurance providers and conducted a competitor analysis of Klay's direct and indirect competitors.

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.

To ensure I was addressing the major needs of Klay’s most important users, I created Perri as a research-informed persona to represent a key segment. Using my persona, I further synthesized the data I collected into an empathy map in order to create a coherent, empathetic view of Klay’s users and ensure a human-centered design.

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 key features roadmap based on priority for development. → See the feature roadmap

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

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.

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

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.

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:

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

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:

Test how easily and efficiently the user navigates the site through a series of tasks and prompts.

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

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?)

Identify any other opportunities for improvement/future features.

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

The top priority revisions I made based on user testing include:

Changing the “Coverage” nav label to: “Coverage Types” to solve for the confusion. (This was a global nav change).

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

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.

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.

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.