AXLE: AutoTrader's design system

CROSS-FUNCTIONAL LEADERSHIP, DESIGN SYSTEMS, DESIGN OPERATIONS

Role
Assoc. Design Director
Timeline
18 months
Reporting to
Director of Design
Key partners
CMO ยท CDO

The Challenge

Five surfaces, a fragmented visual language

AutoTrader's product experience was fragmented across five surfaces: iOS, Android, web, and both consumer and employer brand, each evolving with its own visual language. That inconsistency risked eroding consumer trust and brand credibility. The timing coincided with a company-wide brand refresh, an initiative I also played a key contributing role in, making this the moment to solve both problems together rather than in isolation.

AutoTrader mobile experience, before and after

My role

A cross-functional mandate

I led the creation of AXLE, AutoTrader's design system, from concept to company-wide adoption over 18 months, leading a team of seven designers. I personally shaped the look of the refreshed interface and had significant influence over the designers on the marketing team during the brand refresh. I reported to the Director of Design, working with the Chief Digital and Marketing Officers to secure buy-in and investment, and with the heads of marketing, engineering, product, QA, and delivery to bring the system into daily workflows.

A slide from the executive presentation, outlining how the initiative would create value across marketing, digital, and HR departments.

the process

  1. 01
    Diagnosed the current state

    I ran stakeholder interviews, a benchmarking survey, and a full audit of existing tools and processes, placing AutoTrader clearly on the "inconsistent" end of a four-stage design system maturity model.

  2. 02
    Made the business case

    I took that diagnosis to the CDO, using the maturity model and the underlying data to secure the mandate and budget for a company-wide system.

  3. 03
    Built a coalition, not a mandate

    I assembled Change Leaders across engineering, marketing, product, QA, delivery and design. I facilitated the cross-functional collaboration and led charge on the design front.

  4. 04
    Rolled it out in stages

    Foundational components shipped and were adopted first, while more contested pieces moved through facilitated debate in parallel, so the system built momentum instead of waiting for a single big launch.

  5. 05
    Protected it through a reorg

    AXLE was most at risk when AutoTrader restructured its delivery process company-wide. Early on it looked like extra work to developers already absorbing that change, and it took sustained rigor and collaboration with the delivery team to keep it a shared priority.

THE JUDGMENT CALL

A style guide can't fix a broken workflow.

I started with workflow, not visuals, because a style guide doesn't hold if teams still operate in disconnected processes. I reworked handoff and QA so components were built in the flow of everyday work, by contributors across teams, instead of in a design silo and handed down. That distributed ownership is what got adoption across every platform and gave the initiative the momentum to survive the reorg.

Components were built and centralized in the flow of everyday product work, not in a silo, across web, iOS, and Android simultaneously. This screenshot shows how developer handoff was structured so components could be accessed as part of a connected system, not in isolation.

The outcome

Built to last

AXLE has been adopted company-wide and remains in active use today, the standard new product and marketing work is built on, five years after launch. That staying power came from sustained internal promotion, presenting AXLE across teams, onboarding new contributors, and championing its everyday use, not just the system itself.

AXLE components were organized using atomic design: atoms, molecules, and organisms building into a coherent system.
A printed brochure created to introduce AXLE and the brand refresh internally, giving teams a tangible reference alongside the digital system.
Codified brand attributes that guided both the visual direction of the brand refresh and the UI design system.

Selected work

think tank training centre

AI for speed, judgment for direction

Confident output, careful review: lessons from directing Claude on a quick home page redesign.

  • AI-Assisted design
  • Design leadership

translink

Helping Metro Vancouver find its way

A global navigation system for everyone, from riders to businesses bidding on public contracts.

  • Information architecture
  • Usability testing
  • Public sector