Evolving Driveway's design system to deliver a successful brand refresh

Synopsis

North star

Increase Driveway brand recognition and credibility by refreshing the Driveway brand, maturing our Design System, and launching a new home page

Program overview

I launched a design system program and orchestrated a comprehensive brand refresh in the span of 6 months, resulting in the simultaneous launch of a new home page, new brand stylesheet (CSS), and rebranded multi-channel marketing campaign.

As the lead on this multi-prong effort, I oversaw and guided the evolution of the design system, planned the first 2 brand releases in partnership with our front-end architect, and coordinated cross-functional planning and execution.

Value proposition

Driveway, the largest new-car retailer in the U.S., launched in September 2020 as Lithia Motors’ strategic move to

• support the end-to-end car ownership lifecycle, all from the convenience of your home
• gain competitive advantage over automotive eCommerce big-hitters CarMax, Cars.com, and Carvana

Team players

Supporting a distributed US-based team with 8 squads, my role was Product Design Manager + Design Program Manager, reporting to the Director of Experience Design (XD).

I staffed the first dedicated Design System Designer, Melinda L., without whom this large undertaking would not have been possible.

In addition, I closely collaborated with a broad cross-functional team:

• 1 Lead Front-end Architect
• 2 Brand Designers
• 8 Lead + Senior Product Designers
• 8 squads
• 6 Product Managers
• ~4 Delivery Leads

Key results

• Driveway’s new brand launched on December 1, 2021
  • Driveway.com, already sporting the new type system, launched with a limited new color palette
  • The new home page and marketing collateral launched with the full new color palette and new type system
• Exceeded December 2021 transaction volume target by 32% (source)
• Driveway.com reached 1MM monthly unique visitors (MUVs) within 3 months of the brand launch

The Journey

Preparing for brand growth

In mid 2021, the Driveway Product team observed an uptick in unique page views and expected this trend to grow significantly over the coming months.

Since Driveway was still new to the automotive eCommerce space, many of these customers would land on the Driveway homepage with limited knowledge of the brand and value proposition.

Experience objective

Driving growth at the speed of brand recognition

As Product and Design, we determined it’s important that we enable these new users to quickly:

• Understand the value of our offering and intuitively flow into the appropriate funnel (buy, sell, or trade-in)
• Get answers to any questions they may have about the brand or their experience through self-service

In order to keep people engaged on Driveway.com, we wanted our brand and homepage to feel exciting and captivating, with a wow factor that distinguished us from competitors.

Early sparks of the brand refresh

Our Director of Experience Design (XD), along with our new Marketing Director, made the business case for a brand refresh.

Our Director of XD tapped 2 key senior designers, a product designer and a brand designer, to craft a more sophisticated visual identity and elevate Driveway’s brand style. They began with visual exploration, drawing on Driveway’s mission, vision, and brand story.

Driveway’s senior product designers and lead brand designer worked together closely to refine the brand vision and visual language necessary to mature Driveway’s brand presence.

I engaged with the effort as these 2 designers honed the brand direction, seeking feedback from other product designers.

Lighting the way by evolving the design system

Pressure-testing the brand direction in UI

Next came the challenge of applying the brand direction to the UI across all of Driveway.com, including the top of the funnel, user accounts, and the field inspector mobile app.

As a handful of product designers explored how best to embody the refreshed visual identity from molecule up to page templates, our Design System Designer began to update type and color styles in Figma.

Working in tandem, the Marketing team and content designers worked to refine the brand voice.

Meanwhile, I prepared to drive collaboration and alignment of design decisions across the XD team.

Standing up a design system guild

Rebranding efforts, especially when executed internally, can sometimes feel like driving up a winding mountain road through a thick night fog.

I organized a weekly Design System Guild to shine the fog lights on the meandering course.

The purpose of the guild was twofold:

• Ensure product designer representation and involvement across all 8 squads
• Use the forum to build consensus on design system decisions

The format was a hybrid between show-and-tell and internal creative review, with constructive criticism leading to coalescing choices for visual hierarchy, button styles, drop shadows, etc.

Keeping partners informed and at ease

As designers became increasingly excited about the brand refresh, they started referring to the initiative as Brand 2.woah.

With this excitement bubbling over into standups and PDE ceremonies, product managers and delivery leads began to wonder how their near-term backlogs would be impacted by the brand refresh.

To increase shared understanding and decrease anxiety around the unknowns, I took a multi-prong approach:

1. Provided updates during the biweekly sync between lead product designers and the front-end engineers who contributed code to the design system
2. Documented the initiative’s high-level scope, approach, and milestones in Confluence
3. Created and socialized 2 visual explainer artifacts
   1. Pitstops: a one-page explainer of the brand refresh phases
   2. Release goal posts: an accompanying one-page “menu” of the recommended approach to implementing Driveway’s new color palette in forthcoming product releases

Release planning

The scope of my responsibility in guiding brand refresh quickly expanded from coordinating the XD team and design system efforts to orchestrating cross-functional release planning.

Behind the scenes, I met weekly with the Lead Front-end Architect to collaboratively define the technical scope of the first 2 releases of Brand 2.woah.

Problem-solving for the first 2 releases

In our discussions, we covered and aligned on several key considerations:

1. The front-end architecture pertaining to typography and color
2. Which parts of the affected code were federated versus squad-owned
3. How to communicate the work to PMs, Delivery Leads, and Engineers

From these discussions, we identified 2 key sources of moderate technical complexity:

1. Our code base contained 6 sources of CSS color styles
2. Many design system components were squad-owned

Mitigating risk by minimizing complexity

To address the complexity of implementing a new color palette, we decided on 2 solutions:

1. Our first release of Brand 2.woah would be typography only. This would ensure an easy win: reducing risk of the first release and building good faith with our partners and stakeholders.
2. We would take a phased approach to rolling out the new color palette. While the homepage would lead with the full color palette, all other digital real estate would swap only the primary and secondary colors.

Coordinating cross-functional planning and execution

Planning for each release involved high-touch cross-functional coordination in the following respects:

• Design System pressure testing: Our Design System Designer, Melinda L., led the way with frequent feedback and pressure-testing from lead and senior product designers. She first created the new type and color styles and later methodically updated each design system component in Figma to reflect the new brand.
• Designing with the new Figma components: Designers began to use the new components in their designs. I led an an XD all-hands to explain the objective, constraints, and need to accept some design debt in the process. After fielding questions and concerns, designers got to work—and did amazing work.
• Planning the implementation: Meanwhile, Product Managers and Delivery Leads planned for both the implementation and QA at the story and task levels.
• Collaborative QA: As we prepared for release, at least one designer from each squad owned visual QA and created tickets for the engineers. Those designers paired with engineers as necessary to ensure the desired implementation.
• Release readiness: Last but not least, everyone committed to each release date.

We intentionally planned for the official launch date of Brand 2.woah to coincide with the high-visibility launch of a new, in-house search engine and new experience for finding a new car on Driveway.com.

As the planning intensified, I benefited from the incredibly supportive partnership of the Product Manager and Delivery Lead for the Homepage and Global Experience (Will H. and Eric M.).

A smooth launch

On December 1, 2021, we released Driveway’s new brand on Driveway.com with the flip of a feature flag. Though I was no longer part of the company, I was invited to silently observe the release, which pushed to `/main` without a hitch.

That same day, Marketing unveiled their new collateral, and the subsequent demand generation campaign included billboards and commercials on both cable TV and YouTube.

Program impact

Design system drove a successful launch

By orchestrating the evolution of the design system and partnering with cross-functional leaders, I ensured that the design system successfully paved the way for implementation of the brand refresh across all of Driveway.com

Launch of redesigned homepage

We launched Brand 2.woah’s redesigned homepage as the first touchpoint with the new visual identity and design system assets. I oversaw the research and redesign process, which my team of researchers and designers executed.

Monthly transaction volume

• Exceeded December 2021 transaction volume target by 32%: 1650 transaction compared to the expected 1250 (source)
• By end of June 2022, Driveway had reached 4,300 monthly shop and sell transactions (source)

Increase in monthly unique visitors (MUVs)

This effort led to a significant increase in monthly unique visitors and enhanced the overall user experience: Driveway.com reached 1MM MUVs in Feb 2022

Brand durability

In addition, Marketing continues to use the new visual identity for its collateral and campaigns, including its TV and Youtube campaigns.