Autotrader

Autotrader provides the best online solutions for buying and selling new, certified pre-owned, and used vehicles. Autotrader encompasses several distinctive brands, including Autotrader, Kelley Blue Book, and Dealer.com. Isadora Agency worked alongside Autotrader to build a robust design system that supported their multi-brand ecosystem and its complex user needs.

Autotrader sought our agency’s in-depth expertise of design systems development and technical guidance to complete their design system’s documentation, which already had extensive components and variables. Our team determined that a comprehensive multi-brand design system would streamline production and development. It would also serve as a scalable resource across all existing Autotrader brands and any new brands acquired in the future. Using state-of-the-art tools, including Figma variables and Storybook, our product designers worked within Autotrader’s existing platform to accomplish this project, creating a powerful foundation for continuous innovation. The finalized design system was handed off fully ready for production, so Autotrader can immediately implement it for all brands.

A design system is best described as a shared language between design and development. Design systems are incredibly beneficial, to brands. Their functionality and efficiency help save time and money in development by making it possible to quickly design and replicate designs at scale. Teams can use the same elements repeatedly, without starting from scratch. Design systems also allow for consistent cross-platform experiences: by giving teams a singular source for components, patterns, and styles, they increase usability and improve collaboration.

Not every brand needs a design system, but those that do greatly benefit from their capabilities. For Autotrader, a larger company with several brands under its umbrella, a design system is an immensely worthwhile investment. Implementing this highly capable multi-brand design system will benefit Autotrader in the immediate future and for years to come.

Autotrader had an existing design system that was limiting and restrictive. Its base, Material UI, enforced certain styling conventions, posing a challenge to implementing customization. The Autotrader team wanted a headless component system (also known as styleless), so they could separately manage the design system’s functionality and styling. This would make design system updates and customizations fluid and efficient.

Isadora Agency’s strategy for this partnership involved defining the token architecture of the design system’s components, in order to establish consistent theming, naming conventions, and motion and accessibility across Autotrader’s brands. Our product designers generated detailed usage guidelines to ensure consistency and accessibility within the design system, creating several Figma branches to track and organize specific component updates. We also engineered foundational and advanced components using a Storybook integration. Storybook is a powerful frontend workshop for building UI components and pages in isolation. It allows design system components to be displayed in an environment that all team members can interact with, and can document the technical aspects of coded components.

Storybook codifies existing UI components into a central, well-maintained repository, eliminating the need to paste the same components into multiple projects again and again. Using Storybook, our team developed an architecture that connects directly to the token system, providing a real-time reference for states and behaviors. Autotrader’s engineers can now use this tool to view and use production-ready code, and test component functionality. They’ll benefit from integrated workflows for visual regression testing, automated accessibility auditing, and behavior validation across components.

Our team developed a component visualizer that made it possible to view how the components would look when applied to a design. It can also be used to explore the full component library, review implementation guidelines, and access documentation. As a centralized, dynamic, and up-to-date resource, it supports accelerated onboarding, cross-functional alignment, and confident implementation of consistent, well-documented patterns.

Creating the multi-brand design system began with building a library of general base tokens in Figma. This library catalogs variables—which include platform-agnostic foundations, color, spacing, grid, and typography—and shows the different brands, as well as differentiated variables for each brand. The components were built from the ground up and integrated into Storybook for live documentation. Our product designers rigorously tested the components for WCAG 2.1 accessibility compliance, edge case resilience, and responsiveness. This approach simplified development workflows, minimized design drift, and ensured consistent user experiences across platforms.

Our product designers also codified design guidelines in Figma, to ensure correct usage of each component. These guidelines include iconography, spacing, interaction behavior, motion principles, accessibility considerations, and visual examples. They established clear usage rules, do’s and don’ts, and component rationale, to eliminate confusion and simplify decision-making. These guidelines will help users create visual harmony, responsiveness, and accessibility compliance across the distinct brands’ products.

The design system included a shared repository with documentation of all components and details. Our product designers organized the documentation in Figma, and integrated embedded usage specs, annotations, and API parity, to minimize ambiguity and align the product, design, and engineering teams.

Design systems are more than compilations of design elements: they are complex, dynamic products that require significant coordination, organization, and resources. Not every brand needs a design system, but for larger brands like Autotrader, a design system is truly worth this level of time and effort. Thanks to this comprehensive product, Autotrader is poised to save time in development and design, alleviate strain on designers and developers, and boost brand recognition and cohesion.

This partnership demonstrates the immense value of in-depth expertise in development and design. A multi-brand design system cannot be created by just any agency. Our team’s extensive understanding of design systems’ detailed elements and broader capabilities made the difference for Autotrader. Knowing how to collaborate well with the Autotrader team and combine our team’s knowledge with theirs made this partnership highly productive, enjoyable, and successful.