CarInsurance.com
Rebuilding a 20-year-old site and soloing its first design system
Turning 200+ inconsistent pages into a scalable design foundation that improved conversions, increased organic traffic, and changed how the team shipped product.
Company
QuinStreet
ROLE
Product Designer
Team
1 Product Manager
1 Director
6 Engineers
Duration
12 Weeks
Jun - Sept 2024
context
Twenty years of growth created twenty years of design debt
When I joined QuinStreet, CarInsurance.com had over 200 pages, dozens of calculators, and no shared design system. The site had evolved over two decades through incremental updates, business requests, and content expansion. Individual pages had been improved, but the overall experience had never been systematically redesigned.
The symptoms showed up everywhere as inconsistent UI patterns, poor mobile experiences, accessibility issues, declining engagement metrics and slow design and development workflows.
I was hired for the summer to redesign CarInsurance.com.
My 12 Week Timeline
The problem
Every page solved the same problem differently
As I explored the product, I realized most of the issues users experienced weren't isolated. A calculator looked different from an article page. One CTA behaved differently from another. Content hierarchy changed from page to page. Trust indicators appeared inconsistently. Mobile layouts followed different rules. The product felt fragmented because it was fragmented. Designers and developers faced the same issue. Building new experiences often meant recreating patterns that already existed elsewhere on the site. The more I looked, the clearer the root cause became: CarInsurance.com didn't have a page problem. It had a systems problem.
Some components from the old site
Opportunity
Redesigning the product and the process at the same time
Initially, I thought this project would be a traditional website redesign. After a week of auditing the product, I realized that redesigning 200+ pages individually would only treat the symptoms. The bigger opportunity was creating a system that could improve every page simultaneously.
That meant solving two problems in parallel:
Redesign the highest-impact user experiences.
Build the design infrastructure needed to scale future work.
The Solution
I designed CarInsurance.com’s first-ever design system, built from the ground up using Atomic Design Principles.
My goal was to bring organization and scalability to the site's structure, ensuring consistency across the many pages. This design system helped developers and future designers to easily maintain and build new pages through reusable components.
Some of the New components I designed
process
Finding 150+ opportunities for growth through a UX audit
Before designing anything, I conducted a comprehensive UX audit across the platform. I reviewed more than 200 pages, mapped recurring patterns, analyzed conversion flows, evaluated competitors, reviewed analytics, and spoke directly with users.
excerpts from the audit i presented
Competitive research
Why did other sites with the exact same information perform much better?
I compared the site with competitors like Insure.com, The Zebra, Marketwatch, and Allstate to figure out what users valued in the industry. I focused on key metrics such as usability, information clarity, mobile optimization, and accessibility.
side-by side comparisons
user research
Understanding where users were getting stuck
I complemented the audit with user interviews and usability testing. A few patterns emerged quickly.
Inconsistency in design was distracting
Users said the website felt untrustworthy and unprofessional. Lack of consistency in branding reduced trust in the website, pushing users to competitor sites.
Too "text heavy"
Users felt the site was "text heavy", overwhelmed by the dense amount of information presented without a clear hierarchy. They often scrolled past large blocks of text, and preferred to scan articles.
Calculators had usability issues, especially on mobile
Many users mentioned they abandoned the the calculators midway due to the long and complicated forms. Due to a lack of mobile optimization, calculators took up multiple screens
product strategy
Convincing the team to stop redesigning pages
After the UX audit, it became clear that redesigning individual pages wouldn't solve the underlying problem. The site had accumulated over 20 years of inconsistencies. Every page solved similar problems slightly differently. If I redesigned pages one at a time, we'd end up with a better-looking website but the same scalability issues.
The challenge was that a design system wasn't part of the original ask. The expectation was to redesign high-priority pages. Building a system first would require additional upfront investment, and there was understandable concern about slowing down delivery. To make the case, I mapped recurring patterns across the site and showed how the same UI elements were being rebuilt dozens of times. Navigation, comparison tables, calculators, trust elements, author modules, and content layouts all suffered from duplication and inconsistency.
I proposed a different approach:
Instead of redesigning 200+ pages, redesign the building blocks that create those pages.
This would allow us to:
Improve consistency across the entire site
Accelerate future design and development work
Reduce maintenance costs
Create a shared language between design and engineering
Scale future features without redesigning from scratch
After aligning with product, engineering, and leadership, we shifted from a page-first redesign to a systems-first approach.
The result was CarInsurance.com's first design system.
systems thinking
Rebuilding a 20-year-old product from the inside out using principles from Atomic Design
As patterns began emerging from the audit, I started building the site's first design system alongside the redesign itself. I used Atomic Design principles, a methodology created by Brad Frost, to create reusable building blocks that could scale across hundreds of pages.
How i applied atomic design
Sub-atomic: Establishing a style guide with colors, text, grids, and branding
Atoms: building blocks of the interface
list of all atoms
List of all molecules
List of all organisms
List of all templates
Templates are page-level structures that place organisms into layouts, defining content structure without specific content. These templates automatically updated when the design system was changed since everything was componentized.
Templates: prototypes to test design concepts and user feedback
redesigning core experiences
Redesigning 10 multi-step insurance calculators
The calculators were some of the highest-value experiences on the site, but also some of the most frustrating. User interviews consistently surfaced abandonment, especially on mobile.
One example was the Moving Calculator. The original flow relied on incomplete logic, failed to account for important variables that affect insurance rates, and forced users through a lengthy experience with little feedback.
The original design
my new design
Iteration
Designing, testing, and re-re-re designing
Nothing shipped untouched. After building prototypes using the new system, I ran six rounds of usability testing. Some ideas performed exactly as expected. Others didn't. Several components went through multiple redesigns as I balanced user feedback, SEO requirements, monetization goals, and editorial needs. One of the biggest lessons from this project was that good design isn't protecting your first idea. Here's some changes I made based on user feedback:
Users often scrolled past text heavy sections.
Infographics > Tables
Building user trust
Iteration
Meeting our business needs
I often met with the Product Manager of CarInsurance.com, to align the redesign with the needs of the editing team, development team, and monetization goals. Based on their feedback, I made several key adjustments to the design system.
Editors deserved more credit for their work
Certain elements were more important for SEO purposes than user engagement
The redesigned "Learn More" widget was overly prominent and diverted users from the page. I simplified the widget to align better with user experience goals while still meeting SEO requirements.
the original
redesigned
Re-redesigned
CarInsurance.com needed more traffic
implementation
Making the system usable beyond the redesign
A design system only creates value if people actually use it.To support adoption, I documented components, templates, responsive behavior, and implementation guidelines so engineers and future designers could build consistently without reinventing patterns. I worked closely with developers throughout implementation to ensure the system translated cleanly into production and aligned with existing technical constraints.
This was also where I partnered with product and business stakeholders to balance user experience with monetization goals. Through A/B testing and iteration, I refined high-impact elements such as CTAs, comparison modules, product cards, and lead-generation flows to improve both usability and conversion performance.
deliverables
More than CarInsurance.com's first design system
670+ reusable desktop and mobile components
10 page templates covering the site's most common experiences
10 redesigned insurance calculators
Documentation and implementation guidelines for design and engineering teams
150+ UX opportunities identified through audit and research
Branding guideline
Impact
Creating a foundation that could scale
The redesign improved the user experience immediately, but the larger impact was giving the organization a repeatable system for future growth.
13% increase in organic traffic
Improved information architecture, accessibility, and page consistency made content easier for both users and search engines to navigate.
18% increase in insurance quote requests
Reducing friction across calculators and conversion flows led to higher engagement in key business funnels.
98% faster page creation
Future designers could assemble new experiences using existing components rather than designing from scratch.
"In my six years here, this is the smoothest design-to-development handoff we've ever done."
The design system also established a shared language between design and engineering, reducing implementation ambiguity and accelerating future product work.
