How Carvana fuels consistency and scale

As the fastest-growing online used car retailer, Carvana has proven that speed doesn’t have to come at the expense of best-in-class customer service. Since its founding in 2012, it’s helped over one million customers buy, sell, and finance cars online. Carvana’s 40-person design systems team is critical to unlocking scale and making design excellence a standard across the 10,000 person company. A well-timed move to Figma has allowed the team to maintain a design system that meets rigorous design standards, keeps up with a growing brand, and supports better handoffs between designers and developers.

Achieving speed and scale with a single source of truth

In 2019, Carvana’s growth hit an inflection point, illuminating the need for a design platform that could lay the foundation for scaling up. Their existing design system was scattered across a PDF-based UI kit, Principle, and Sketch, and they needed a centralized and connected source of truth that engineering and design teams could reference. As Hudson Paine, Senior Product Designer at Carvana, recalls, “Everything was copy and paste. A 5% change that occurs 15 times ends up being astronomically different from the first component you started with. There was no source of truth, no libraries: everything was everywhere.”

That’s when the team moved the design system to Figma, a decision that was pivotal and perfectly timed. The Covid-19 pandemic prompted sky-rocketing car sales, and the switch allowed Carvana to meet demand by establishing a unified source of truth and “reducing any friction that would have been there, had the team been on [previous design tools],” says Hudson.

Driving consistency and collaboration with variables

Carvana’s growth was a double-edged sword. While it brought thousands of new customers, the challenge was maintaining a high bar of design quality across a growing product ecosystem. Inconsistencies in color palettes, spacing, type styles, and corner radii crept into the designs.

When variables were first introduced at Config with the ability to apply reusable values to all kinds of design properties, Carvana saw an opportunity to address those problems. Hudson says, “These inconsistencies have been revolutionized by our use of variables, especially number variables, which allow us to build consistent spacing and corner radii into our designs.”

For the design team, the ability to define the values of their variables brings a new level of pixel-perfect accuracy and efficiency to the process. And while there was an initial learning curve with setting up variables, Hudson says the gains far outweigh the cost: “We end up with much more polished designs at the end of the day, which means we’re sending fewer things back. In the long term, variables will increase our efficiency because our designers have fewer and fewer revisions to make.”

Merging lanes with new business

As Carvana expands into new areas of the industry, variables also enable the design team to quickly introduce new themes. After Carvana acquired ADESA, the national car auction business, the process of redesigning it to fit within the larger ecosystem and design language was as easy as “flipping a switch,” says Hudson. Runming Dai, a product designer on Carvana’s design systems team, used variables to set up an additional theme for ADESA, and Joyce Park, a Carvana product designer, instantaneously converted designs to the new branding.

Without variables, the process would have required rebuilding Carvana’s component library with new styling—easily at least a full month’s worth of work. Theming, as supported by variables, provides a single source of truth for component structure and functionality, allowing the design team to update the ADESA library in less than a week and build design comprehensives for ADESA three times faster than usual.

Building connections between design and development

With Figma, the collaboration between design and engineering teams at Carvana is better than ever. As Hudson says, “Figma enables us to be more connected, to get designs even closer to what they’d look like on the development side, to move closer to one-to-one, which is always the goal.” Since the team uses variables to define their tokens, those are also shared with developers. By reusing components and pulling style tokens directly from the design system, developers are building design comps dramatically faster, and with more consistency.

The design systems team’s main priority is empowering designers and developers with the information they need. With Figma, they’re on the road to success. Hudson sums it up: “We can attribute many of our design system’s efficiency and performance advantages to Figma itself. Without it, it wouldn’t be possible to build and distribute a design system as robust as ours.”