FINTECH | CONSUMER GROWTH DESIGN

Auto Insurance at NerdWallet

Project description

NerdWallet is a suite of personal finance products and services that has, since 2009, helped millions of people in the United States, United Kingdom and Canada reach their financial goals.

Background

The auto insurance product helped users find, compare, and ultimately decide on the best auto insurance product that meets their needs. The landing page for this product existed on its own legacy front end client, which negatively impacted SEO capabilities and page rank because of the limitations on page editing, optimization, mobile friendliness, as well as poor page speed and performance. In addition, the core of the shopping experience was provided by a third-party, with less-than-desirable conversion rates

The Challenge

How might we design for an experience that helps users find and efficiently shop across top carriers so they can make a decision about the best auto insurance policy for them, and increase conversion rates for the business?

My general process

Define a user-focused hypothesis

Worked with the product manager to (re)define the initial hypothesis so that it is focused on what users need to be successful using the product.

Audit the current experience

Walked through the current product both internally and with users to identify shortcomings and opportunities for improvement.

Explore within constraints

Considered several solution approaches for the landing page with product, engineering and business partners with a focus on ease of use and user click-through-rates.

Reimagine the flow

Selected a primary user group and redesigned the flow through the app with the goal of improving user conversion.

Visualize and A/B test in high fidelity

Designed and tested the landing page and lead flow with users, optimizing for conversion along the way.

The initial hypothesis was formulated by the business and product management team and focused more on internal user (content, marketing) goals than the actual user (consumer) goals.

Working with the UX research team to get a better understanding of the external user goals, I reframed the hypothesis to focus the team on solving the actual user problems and improving their experience as opposed to focusing on the internal user problems.

The initial hypothesis was formulated by the business and product management team and focused more on internal user (content, marketing) goals than the actual user (consumer) goals.

Working with the UX research team to get a better understanding of the external user goals, I reframed the hypothesis to focus the team on solving the actual user problems and improving their experience as opposed to focusing on the internal user problems.

Define a user-focused hypothesis

Define hypothesis

With the team in alignment with the reframed hypothesis, I proceeded to audit the current experience to identify shortcomings and opportunities for improvement.

Notably, with the landing page, the amount of content and navigation through the content was overwhelming. And with the lead flow, we had questions that were not sequenced logically so that users dropped off before we could provide them the auto insurance recommendations.

With the team in alignment with the reframed hypothesis, I proceeded to audit the current experience to identify shortcomings and opportunities for improvement.

Notably, with the landing page, the amount of content and navigation through the content was overwhelming. And with the lead flow, we had questions that were not sequenced logically so that users dropped off before we could provide them the auto insurance recommendations.

Audit the current experience

Based on findings from discovery and audit, I documented anchors to guide design explorations and decisions going forward.

With the goal of providing users quick access to the auto insurance tool, I created header banners for the landing page, clearly highlighting the call-to-action.

I ran a preference test to identify which banners resonated best with users, selecting the option that most aligned with the NerdWallet design system.

Based on findings from discovery and audit, I documented anchors to guide design explorations and decisions going forward.

With the goal of providing users quick access to the auto insurance tool, I created header banners for the landing page, clearly highlighting the call-to-action.

I ran a preference test to identify which banners resonated best with users, selecting the option that most aligned with the NerdWallet design system.

Explore within constraints

Working with the product manager and UX researcher, we categorized users into three different groups (low, medium and high intent), based on how motivated they were to purchase auto insurance services right now.

I mapped out different flows and question sequences that catered to the needs of the different user groups and facilitated a workshop with the broader team to collectively determine which of the user groups and flow should be the focus of our efforts going forward.

Working with the product manager and UX researcher, we categorized users into three different groups (low, medium and high intent), based on how motivated they were to purchase auto insurance services right now.

I mapped out different flows and question sequences that catered to the needs of the different user groups and facilitated a workshop with the broader team to collectively determine which of the user groups and flow should be the focus of our efforts going forward.

Reimagine the flow

Once the flow was decided on, we designed and tested the interfaces with users, making changes and improvements until we had achieved an acceptable click-through and conversion rate.

Once the flow was decided on, we designed and tested the interfaces with users, making changes and improvements until we had achieved an acceptable click-through and conversion rate.

Visualize and A/B test

Solution

The redesigned Auto Insurance product at NerdWallet was more modern, better information-architected, and ultimately met the goals of the user and business.

User focused

Designed primarily for users with "medium intent", allowing us to collect personal information a little later in the flow, reducing drop-offs.

Optimized flow and IA

Questions organized logically to better match user expectations, information architecture on the landing page redesigned for ease of navigation and scanning.

Raised standards

Standardized template created and added to Currency (NerdWallet design system), to be leveraged by designers across the company.

  • LANDING PAGE

    Prioritized the CTA, allowing users to find the right auto insurance offers that meets their needs. Employed clear text hierarchy, making it easy to differentiate and navigate between different page sections.

  • LEAD FLOW

    Questions organized logically to better match user expectations, with clear navigation elements in and out of the flow.

  • LANDING PAGE (BEFORE)

    Amount and format of content overwhelming, with no clear hierarchy. Also the call-to-action looked spammy, reducing click-through rates.

  • LANDING PAGE (AFTER)

    Prioritized the CTA, allowing users to find the right auto insurance offers that meets their needs. Employed clear text hierarchy, making it easy to differentiate and navigate between different page sections.

  • LEAD FLOW (BEFORE)

    First question about your home is jolting, does not match user expectations with auto insurance. No easy way to go back to previous steps, or to exit the flow.

  • LEAD FLOW (AFTER)

    Questions organized logically to better match user expectations, with clear navigation elements in and out of the flow.

Results

Results

Results

Increased conversion

A conversion rate increase about 60% over the previous experience.

Standardized template

The redesigned lead flow and landing page was added to the NerdWallet design system to be rolled out to other products across the company. This reduced tech debt and could potentially increase conversion for other similar products when used.