A design system with three distinct themes overlapping in diagonals.

Insurance Funnels Redesign

2021
QuoteWizard by LendingTree
My role
Research, design, testing, front-end development.
The team
Funnel Optimization Director
Data Analyst

PROBLEM

Our approach as the Funnels Optimization team had been to test one small thing at a time in order to gradually improve the product and that approach had been working well for the first eight months of our team's existence. However, we had started to uncover a lot of major problems that we believed warranted a full redesign. Historically UX had not been important to the product's stakeholders and accessibility even less so. There was no documentation of why the original design decisions had been made or any research behind them. The only user feedback that we had access to was bits and pieces that we heard second hand from the customer success reps. While we could make changes slowly over time, we felt it would be a better use of our time to build a stronger foundation for the funnels.

ANALYSIS

First we completed a quick heuristic evaluation of the current designs both for usability and general accessibility standards. Error messaging and general accessibility were the most egregious problems, but there were also many issues with navigation, consistency, recall, system status, and help with the process. Many of these issues were well-known but not prioritized by stakeholders.

A selection of slides from the heuristic analysis presentation noting usability problems. (click to enlarge)

While comparing different groups of users' session data, we noticed some large discrepancies in key metrics that could help us ballpark lost revenue numbers to sell stakeholders on the proposed changes.

  • Desktop conversion rate (~16%) vs. mobile conversion rate (~29%)
  • Internal traffic sources conversion rate (~24%) vs. affiliate traffic sources conversion rate (~11%)

We also determined that the first slide had the highest abandonment rate, which we assumed could be due to the misalignment of content between the source and the funnel or a low information scent on the first page itself. The first personal information slide had the second highest abandonment rate. We knew it would likely always be towards the top, but made a note to pay attention to people's reaction to the question during user testing to see if there might be a way to soften the blow.

TESTING

The primary goal for the first usability test was to find issues with the product that we may be overlooking as people familiar with the product and the business's goals and strategy. We also wanted to get an idea of which problems were the largest and could have the biggest impact if solved.

This first test was presented to five participants of various ages, insurance histories, and research preferences. They were presented with the primary landing page for search traffic in our stage environment (to prevent the acquisition and sale of their data) and asked to "compare car insurance offers." The test went fairly well and supported some of our assumptions, but there were a few surprises. One person managed to break the form due to an undiscovered bug and had to refresh in order to progress, and one person read the legal disclosure top to bottom before submitting. There was the occasional ask as to why some question was required. My favorite moment was a participant laughing and saying, "Why is it yelling at me? 'MARRIED?' Sorry, sorry...it just felt so aggressive!"

Usability test findings
TASK COMPLETION
  • 3 of 5 completed easily
  • 1 of 5 completed with some difficult related to accuracy
  • 1 of 5 could not complete due to bug preventing progression, but completed after a refresh
  • 2 of 5 said they likely would not have submitted the form outside of test environment
POSITIVES
  • Simplicity of single question presented at a time
  • Questions were not difficult, most could be answered with little effort
  • Most pleased with a linear form, it was clear until the end what they needed to do
ISSUES
  • Final listings page was not what was expected for 4 participants, confused by no rates or details and expressed disappointment that they'd need to do more work
  • 1 participant looked for phone number to call
  • 1 participant expressed anger at final disclosure, said it should have been stated upfront that they would receive phone calls from insurers outside of test environment
  • Some struggles with tapping an unintended option which progresses the form automatically
  • Some confusion when trying to find make and model

GOALS

  • Consistent: Build a visual design system with standardized components, grids, interactions, and typography, develop a content strategy that fits with the tone & voice of many different brands.
  • Accessible: Rewrite HTML to be more semantic, add aria-labels, make tap targets larger, check contrast across all brands, add tab order, create flexible layouts that won't break when user changes font sizes.
  • Scalable: Create light and dark value components to support any brand color combinations, make inputs flexible for new or updated questions, update CSS with variables to streamline branding efforts, break up slides into smaller VueJS components to reduce development time for building new slides and product funnels.

CHALLENGES

  • Form components: We could not change any of the questions or accepted answers without permission from every carrier and updating all downstream processes (calls, leads, remarketing), which was out of scope for this redesign.
  • Listing page updates: Our largest carrier advertisers would not allow us to show rates, and most smaller carriers hadn't yet built public rate APIs.
  • Limited resources: With only one designer and a couple of devs busy supporting multiple projects and many other tests already in progress or planned, we knew this project would take much longer than necessary and we'd need to plan the implementation to be as efficient as possible.

PROCESS

Based on the findings from the session data and the usability testing, we came up with some additions to the product that could help align the final page with user expectations as well as hopefully add a new source of inbound calls to help increase revenue from call-buying advertisers like State Farm.

Sketches showing possible contents and layouts of the final listings page.
Content and layout sketches for the final listings page of the funnel.
Wireframes of the two content types for the redesigned insurance marketing funnel.
The final wireframes for the two major slide types presented to stakeholders for feedback and approval.

After presenting the updated listings page concept to the stakeholders, the biggest concern was that people would click less often on advertisers. Clicks were a large portion of the funnel revenue that we certainly did not want to lose. However, historically carriers had been willing to pay more per click for sources with a higher click-to-application rate. If the user was presented with more info they may be more secure in their decision to choose that carrier, and we assumed the click to app rate would increase as a result. Showing plan details upfront may filter out people who would be dissatisfied for one reason or another. We knew carriers would pay more for higher intent traffic because they already were with sourcing—internal paid sources were the most likely to apply and had the highest bids. It would take more time to roll out the test, but we decided that the test could be set up as a new source to test this theory without affecting existing bids.

Once the wireframe was approved with some small modifications and we received more information from the advertiser relations team as to what we could and could not include on listings, I began to flesh out the design system.

A mockup of the redesigned insurance marketing funnel with QW's logo.
The final iteration of high-fidelity mockups for the QuoteWizard branded funnel.

The new design would need to work with 100+ unique color combinations as the product could be white-labeled, so I created two base themes with relative values alongside our standard QuoteWizard by LendingTree theme that followed our brand guidelines. The two neutral themes could be skinned with more affiliate colors than we previously supported which would increase the consistency from their content to ours.

High-fidelity mockups for the two base themes and examples of partner brands to show how they would be used. (click to enlarge)

IMPLEMENTATION

With our team's director and data analyst weighing in on the data collection and analysis side, we came up with a phased plan of testing and implementation. As the final listings page was the biggest pain point in user testing, already looked nothing like the funnel, and would require the most development work, we decided that testing that first (with the current header and footer) on a small subset of traffic would give us the clearest idea of impact for providing users with additional information.

While that test was running, we'd run a standard A/B test of the current HTML and styles versus the redesign. In the beginning we would only test on internal sources that used the QuoteWizard brand, then expand to external sources using the same brand. If the test experience was showing improvements in retention and conversion, we'd then start to roll out the test to the 100+ affiliate brands. Once the test period and analysis of the results were complete for the auto insurance product, we'd follow the same process for the home, renters, health, and Medsupp funnels.

REFLECTIONS

  • Testing, testing, testing: Even after managing to convince stakeholders to include usability testing with actual people in our process, I still feel there are several other areas we should have leveraged qualitative research methods. We had many assumptions based upon the data from sessions, but that just told us what people were doing and not why. Surveys and more usability tests could have given us better insights into what people expect from the product and what pieces of data they were least comfortable providing.
  • Conflicting goals: Needing to come up with solutions that solved the goals of the user, our business, the advertisers, and our affiliates was stressful to say the least. They often seemed directly at odds with each other, but that also helped uncover new ways of doing things that weren't as obvious in the beginning.
  • Dependencies all the way down: The funnel was the primary product at QuoteWizard, and redesigning it made me extremely aware of all the other products and services that rely on it. It was difficult to nail down exactly what we could and could not change, but in hindsight it was the some of the most valuable time spent on the project. I occasionally had to go back and change something that I had assumed would be isolated, and that time could have been saved if I had asked more questions beforehand or run ideas by other teams more frequently.