CarInsurance.com
Rebuilding a 20-year-old site and its first design system
I created a scalable design system for CarInsurance.com, redesigning over 200 pages and creating 670+ components. This redesign improved mobile optimization, accessibility, and usability, and simplified future workflow.
Company
Quinstreet
ROLE
Solo Product Designer
EXPERTISE
Redesign
Design System
Duration
June 2024 -
September 2024
Context
Background
QuinStreet, a mid-sized online performance marketing company, owns various insurance websites. CarInsurance.com, a flagship site, was facing usability and scalability issues and a drop in KPIs. I was hired to improve it.
Team
1x Project Manager, 1x Director, 6x Developers
12 Week Timeline
The Problem
CarInsurance.com had been built and rebuilt for over 20 years without a consistent design strategy.
The result was a chaotic site with 200+ pages, inconsistent components, and no unified style guide. Users found the site cluttered, hard to navigate, and struggled to prioritize important information. Additionally, the site suffered from limited mobile optimization, poor accessibility, and a lack of user trust due to disjointed design elements.
Some components from the old site
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
1. Research and Discovery
1.1 Finding 150+ areas of growth through a UX Audit
1.2 Competitive Analysis
I compared the site with competitors like Insure.com, The Zebra, Marketwatch, and Allstate to highlight what users valued in the industry. I focused on key metrics such as usability, information clarity, mobile optimization, and accessibility.
Same market niche, also owned by Quinstreet
Recently modernized
Mobile-friendly responsive design
Utilizes modern design elements like micro-interactions, follows design principles of hierarchy, balance, and emphasis
1.3 User Research
To align with the needs of the site's audience, I led user research sessions, focusing on identifying common frustrations and goals of CarInsurance.com users. I conducted interviews and surveys to gather qualitative and quantitative data about user behavior, focusing on mobile users.
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
2. Define
2.1 Problem Statement
How might we…
Redesign CarInsurance.com, focusing on improving user engagement while incorporating design principles of hierarchy and prioritizing a mobile-first approach?
2.2 Goals
After consulting a director at QuinStreet, I set clear goals for the redesign:
Create a Unified Design System
Build an Atomic Design System with desktop and mobile components that scales easily and maintains visual consistency across the entire site.
Improve Mobile Usability
For larger components, especially calculators, design mobile-first. Create separate desktop and mobile versions and use cases for all components.
Boost User Trust
Increase trust in the site by improving accessibility, visual consistency, and overall usability. Avoid deceptive UX practices and creating user friction.
Simple, Minimalistic, Future-Proof
While I was eager to get creative with this redesign, I decided to prioritize simplicity over all else. We might not have the resources to re-do this every few years, so designs should be as timeless as possible.
3.1 Following Atomic Design Principles
To complete the initial redesign, I followed Atomic Design, a methodology created by Brad Frost, for building CarInsurance.com’s design system. I could ensure consistency, scalability, and reusability across 200+ pages by breaking down the interface into its smallest elements.
Here’s how I applied Atomic Design:
3.2 Sub-atomic: Style Guide
Sub Atoms
These are the foundational design tokens and guidelines that define the basic styling of the UI components.
Colors
After discusions with the Director of Financial Media at Quinstreet, we decided that we didn't want to make any big changes to the branding of CarInsurance.com.
I later added more accent colors as the need arose.
Text Styles
As for text styles, the font was also to remain the same. I consolidated all of the text on the website into 7 text styles, to ensure consistency across the board.
Layout
I created grid styles on Figma and set a few base rules with examples of use-cases.
3.3 Atoms
Next, I began building "atoms". Atoms are the basic building blocks of the interface, the smallest functional components. These allowed me to design consistently at the modular level.
3.4 Molecules
Molecules are combinations of atoms functioning together as a unit. I used these to build out
3.5 Organisms and Redesigning 10 Multi-Step Calculators
Organisms are relatively complex components composed of groups of molecules and/or atoms.
Each of the 10 multi-step calculators was an iterative design process of its own. For example, I completely redesigned this Moving Calculator due to faulty logic. The original calculator doesn't account for various factors that affect insurance rates.
The original design
my new design
The new calculator accounts for various factors, and provides the user with an additional screen that shows annual rates by company in both cities.
3.6 Templates
Templates are page-level structures that place organisms into layouts, defining content structure without specific content. I built templates of common pages on the website using the design system to see how the new components looked within a page.
4. Testing and Re-re-redesigning
4.1 User Testing
After I created high-fidelity prototypes of the website using the design system, I conducted 6 rounds of user testing in the form of user interviews. I watched user organically interact with the site, as they would in a real-life scenario, and prompted them to share their thoughts. Here were some of the insights gained.
Users often scrolled past text heavy sections.
I re-designed lower-performing elements, such as FAQs and Conversations with Experts, to encourage user interaction and break up blocks of text.
Infographics > Tables
Users showed a preference for summarized information over lengthy tables. After reviewing pages filled with tables, they wanted key details in a more digestible format. To address this, I designed a new element—Product Cards—that provide a concise summary of insurance company information, improving clarity.
Building user trust
Users still felt as if the site could be more trustworthy. I created elements that emphasized our qualifications and methodology.
4.2 Meeting Business Needs
I often consulted 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
Articles often have multiple authors and collaborators, but typically only author profiles are displayed. I added the option to view multiple authors and collaborators, without using up too much real estate.
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. Pictured is the original, the redesigned, and the re-re-redesigned.
CarInsurance.com needed more traffic
To attract more visitors, I created templates for a series of eye-catching, sharable infographics designed to be spread online that could be integrated into the site and drive traffic to CarInsurance.com.
The Contact Us feature was going unused
I re-designed the feature and broke it up into multiple screens.
5. Implementation and Handoff
5.1 Documentation, Documentation, Documentation
An important part of building a successful design system is comprehensive documentation. I made sure that clear guidelines accompanied each component and template on how to use them. The documentation covered:
Use Cases: Explained when and where to use each component, including variations for desktop and mobile.
Design Rules: Included design constraints, such as padding, margin, and alignment, to ensure consistency across the site.
Code Handoff: I ensured that all design files were developer-friendly, with clear annotations and Figma design tokens.
This documentation helped improve the UX maturity at QuinStreet, as many team members were not previously familiar with design systems. It also made future updates and scalability much easier, as new pages or sections could be created using pre-defined components.
5.2 A/B Testing & Monetization Elements
I also conducted A/B testing on several monetization elements across the site. This involved testing different design variations of CTAs, form placements, and product cards to maximize user engagement and conversion. For example:
Tested different button placements, sizes, and copy to see what drove the most engagement.
Redesigned elements such as banners and product cards to increase user trust and optimize for click-through rates.
The results from these tests helped inform final design decisions. Not only was the user experience improved but also the site's ability to generate revenue.
5.3 Deliverables
I delivered a component library with 670+ desktop and mobile assets, reducing page design time by 98%, from 2 hours to just 2 minutes.
My Takeaways
A good design system creates exponential growth
I drastically reduced design time and improved team productivity by building a scalable, efficient design system. While it did take a lot of time and effort to set up, this well-constructed system will lead to long-term growth for CarInsurance.com.
Happy users —> happy businesses
I found common ground within business and user needs by balancing user experience with business goals, such as SEO and content strategy. Making sure that both sides are met without sacrificing the integrity of either is a delicate balance, and it leads to a more sustainable and profitable product.
Prioritizing tasks, some projects are never complete
Speaking with users helped me determine which features and changes drive the most impact. I organized all of the possible changes by priority, which made things more efficient.