An auto insurance landing page redesign that led to a 500% increase in click-through-rates
Conversion Optimization
Web Design
NerdWallet’s auto insurance product helped users find and compare the best coverage for their needs. The landing page had some big problems though. It ran on outdated tech that hurt SEO, made edits difficult, wasn’t mobile-friendly, and loaded too slowly.
Below, you can see what it looked like before the redesign. Or, if you really don't mind hurting your soul, go on and experience it here.
Now imagine you’re searching for auto insurance, maybe for the first time. Money’s tight, so you’re trying to get the best deal without sacrificing quality. Then you land on the mess of a page above. Would you trust it? Would you even know where to start? Me neither.
So when the Marketing team asked for a redesign to boost SEO and rankings, I saw a chance to go beyond that, to focus on making the page easier to use and match user expectation, which in turn would drive our key metric: click-through rates.
I worked with our UX researcher to better understand our main users: Balancers. Through interviews with several users, two key insights stood out to me:
Since Balancers constantly juggle financial priorities, they’re willing to spend time finding the best deals. So even though the landing page had a lot of content, that wasn’t necessarily a bad thing. What mattered was making it relevant, easy to navigate, and answering their key questions.
Most users found the page by searching for terms like "best" or "compare" auto insurance, often with a specific need, like bad credit or a certain state. This meant the page needed to be designed and written to match the user's mindset and intent when they arrive on the page.
Using research insights, I worked with the product manager and marketing team to reframe our hypothesis, making it more focused on what our users actually need and how it impacts the business. Check out the before-and-after versions below.
Audit the experience
With the team on the same page with the reframed hypothesis, I reviewed the current experience to document gaps, areas for improvements, and perhaps even things that were working well. The biggest issues? The Call-to-Action wasn’t prominent enough, navigation was confusing, and the content layout didn’t match what users expected.
Explore and iterate
To keep working partners and stakeholders aligned, I created core design anchors to guide our decisions. Once the team was on board, I explored different options for the header, layout, navigation, and content order.
Decide and Test
The header was key since it held the main Call-to-Action, so I ran a preference test to see which version worked best for users.
Simplify and Compromise
The version users liked best didn’t quite fit within NerdWallet’s design system. With limited time to finish the project, we decided to simplify the design, keeping it effective while making sure it was realistic to build within our deadline.
Build and Launch
The final redesign:
Prioritized the CTA, allowing users to find the right auto insurance offers that meets their needs.
Redesigned the table of contents, making it easy to navigate between different sections of the page
Employed clear text hierarchy, making it easy to differentiate between different page sections.
Made tables scannable
See the header section of the page below and the full redesigned landing page here.
Increase in Click-through-rates
The redesign led to a 500% increase in the Call-to-Action click-through-rates, which is a key acquisition metric. Assuming all other factors remain constant, this increase would in turn lead to an increase in revenue for the business.
Standardized template
Because of the success of the landing page, the template was added to NerdWallet's design system and rolled out across other insurance products.