Leading the vAuto Design System

Problem

As vAuto's product suite expanded, inconsistencies in UI emerged, with developers sometimes implementing UI without alignment, creating a disjointed experience. The existing component library (CoxKit) lacked UX guidance. The CX/CoxKit UI was too prescriptive. This led to redundant development efforts and scalability issues.

My Role

As the Design System Lead, I took ownership of everything from early research to final implementation. My responsibilities included:

• Defining strategy

• Building the design language

• Aligning cross-functional teams

• Leading the system's rollout into a high-visibility product
  
  

I also acted as a mentor, guiding engineers in UX best practices and helping them interpret design into production-ready components.

Goals of New Design System

Unify User Experience
Create a consistent and cohesive user experience across vAuto products.

Increase Efficiency
Streamline design and development workflows.

Enhance Scalability
Provide a scalable foundation for future growth.

Modernize Core Product
Apply the design system to modernize the ProfitTime application.

Drive Business Goals
Support business objectives, such as increasing ProfitTime adoption.

Phase 1: Design System Creation

The first part of my work was to build the CDS from the ground up.

Initial Research

The first part of Phase 1 was about diving deep to understand vAuto’s fragmented ecosystem. Through targeted research, I uncovered the scope of inconsistencies and team frustrations, setting the stage for a unified design system.

• UI Inventories: Audited vAuto products to catalog UI elements and patterns, revealing how teams were independently creating their own versions, leading to visual fragmentation.

• Stakeholder Interviews: Conducted interviews with designers, developers, and product managers, uncovering shared pain points: duplicated efforts, unclear standards, and inconsistent brand expression.

• Heuristic Evaluation: Evaluated vAuto interfaces against usability principles, identifying areas of non-conformance and potential user friction.

Visual Language Definition

Color Palette: Defining a primary and secondary color palette that aligned with the vAuto brand and met accessibility requirements.

Typography System: Establishing a clear hierarchy of typefaces, sizes, and styles to ensure readability and consistency.

Spacing System: Creating a consistent spacing system to ensure visual harmony and rhythm across all interfaces.

Component Library Creation

Developing a Sketch library of reusable UI components (e.g., buttons, forms, navigation elements, cards) with detailed specifications for their behavior, states (e.g., hover, active, disabled), and variations.

Ensuring that each component was designed to be both flexible and extensible, allowing for customization to meet specific product needs while maintaining overall consistency.

Interaction Pattern Guidelines

Documenting common user flows and interaction patterns (e.g., navigation, form submission, data display) to ensure a predictable and intuitive user experience.

Creating guidelines for animation and transitions to enhance usability and provide visual feedback.

Design & Development of the Design System

Documentation & Tools

Initially, we used Nuclino (free version) for collaborative style guide and documentation development with stakeholders. This allowed for easy PDF sharing on our SharePoint UX page. Recognizing the need for a more dynamic and developer-centric solution as the design system matured, we transitioned to Storybook in Phase 2.

Key Tools & Evolution:

• Nuclino: Facilitated early-stage collaboration and documentation accessible via PDF.

• Sketch: Our primary tool for UI component design.

• Storybook: Implemented in Phase 2 as the component library for engineers, providing interactive documentation and code examples, bridging the design-development gap.

Phase 2: Design System Implementation

ProfitTime Modernization (Project Zenith)

ProfitTime was the moment of truth.

It was a large, legacy product with a lot of technical debt and a huge user base. We had to modernize the entire interface while redesigning some of the user workflows to ProfitTime. It was a challenge, but it was also very satisfying to see the design system come to life in a real product. Every updated screen felt like proof that we were building something that worked not just in theory, but in practice.

Team

• Myself as UX/UI Design Lead: Directed the design updates, documented inconsistencies and presented in engineering sprint planning, worked with Software Lead to guide and build out the Storybook components library based on the new design system.

• Product Manager

• Software Lead

• Engineering Director

• Engineering Architect

• 7 Offshore Developers

• 1 Offshore Product Manager

Planning

• Created mocks and prototypes for key screens and patterns.

• Conducted design discovery sessions with Product and Engineering.

• Leveraged existing UI patterns and styles from the Common Design System to expedite prototype creation.

• Documented user experience issues to track and improve designs in future iterations.

• Defined UX process and reviews.

Legacy product before redesign

After modernization with new design system

Implementation

I oversaw the redesign of ProfitTime, making sure every screen and component was updated to use the design system.

• Restyled various screens and features, including the Appraisal Screen, Vehicle Workbook Screens, and Modals.

• Completed and reviewed approximately 70 stories in Q1 and 50 stories in Q4.

• Translated designs and provided assets and guidance to the development team.

Working with Engineers

• Provided designs and guidance in a timely manner.

• Streamlined communication and development lifecycle, especially with the offshore team.

• Introduced Storybook deployments for reviewing styling and UX.

• Used Rally as the primary tool for the software development lifecycle.

• Provided UI patterns and styles from the Common Design System.

• Investigated and adjusted CSS to simplify interactions and reduce development time.

• Addressed UX issues and provided guidance during implementation.

Results

50%

Increase in Dealership Adoption

YOY across 4 years

Standardizing component use and improving team collaboration

40+ page

UI kit and design library

"The UI is beautiful. I'm going through it now."

—Subaru of Las Vegas 2/15/22

"That looks really, really good. When does that turn on?"

—Nissan Hudson 02/25/22

What set this project apart?

This project reinforced the importance of combining vision with execution. Creating a design system is one thing, getting people to adopt and trust it is another. I learned that the most successful systems are built with the people who will use them.

Listening to developers during component reviews and running usability tests on documentation helped refine the system in ways I hadn’t anticipated. It also taught me how to communicate design in a language that resonates with business leaders, ultimately helping shift the organization's mindset toward a more user-centered and scalable approach.

Building upon the foundation of the vAuto design system, I later contributed to the broader Cox Automotive design system initiative by creating and delivering over 90 guidance images.

This effort aimed to promote consistent design principles and component usage across the entire organization, further emphasizing the scalability and long-term vision for unified user experiences.

Final thoughts