Building a Design System for a legacy brand.
I led the vision and strategy to build our Valvoline’s first design system & scaled it 2X by publishing two extension libraries to support 3 core business pillars: Store Operations, Inventory & Supply Chain, Cusotmer Experience.
In my tenure at Valvoline, we significantly upleveled design craft, reduced agency dependence & web development costs by $1M+, improved process efficiency through product design to unlock $3M+/year in savings, and enabled customers to self-serve thus planning to eliminate support for pricing & service history related calls
2023-2025
50+
Challenge
Historically, Valvoline relied on multiple design agencies rather than an in-house design team, collaborating with various engineering groups to develop business products. This approach led to frequent agency handoffs, resulting in inconsistent design styles, duplicated research efforts, and a lack of a unified UX strategy.
Results
By developing a design system and establishing governance around its usage, we achieved a projected 35% reduction in design and front-end development costs, along with over $1 million in annual savings on third-party POS and content management systems.
Eliminated the need for costly third-party software (for Canadian & other international markets)
Standardizing the POS helped with data capture across brands, thus improving financial reporting accuracy.
$1M+
Savings on design & development
~35%
Projected engineering savings
3
Brands supported
Approach
As an acting Head of Design, my responsiblity as a leader was to lead the vision and strategy to build Valvoline’s first design system. I led a team of 3 digital designers (1 UX, 2 visual) that collaborated with 30+ stakeholders that include engineers, product managers & marketing.
Overall my team used atomic design system principles to build out 20+ components used in 6 products across 4 verticals & 3 brands. My team scaled the design system by 3X by publishing two extension libraries.
Understand company landscape
brand, technology, service & priorities.
Create a new visual language
Elevate craft & FE development standards.
Productize the design system
Create a roadmap for design & development
Create resources for collaboration
Governance of components, code & usage guidelines.
Introduce new extension libraries
Support all use cases, brands & products.
Design Principles
The key UX challenge was developing a design language and system flexible enough to adapt to any brand’s guidelines within our digital products.
We followed an iterative process overall to create foundations. The components were designed to work across all the identified dimensions such as environment, brand, and product.
Accessible
Making something accessible is giving someone agency to accomplish, regardless of their ability, environment, or role.
Cohesive
Build components that are interoperable between products, devices, environments, brands, data sources, complexity & users.
Interoperable
Creating visually & functionally consistent products will simplify the tasks of creating & using the product.
Building the plane while flying it
The framework we used to build our designed system was inspired by the atomic design system pioneered by Brad Frost.
Due to lack of dedicated capacity, my strategy was to productize the design system & build a component roadmap based on the prioritzed products. Each component in the design library had variants, user stories, acceptance criteria, specs & guidelines.
The design system was built by allocating dedicated capacity within each sprint and partnering closely with front-end engineers to create reusable UI components. Components were first deployed to Storybook and later integrated into our GitHub monorepo, allowing the system to scale across brands without delaying product delivery.
Learnings
Focus on Products that Matters Most
Digital transformation spans multiple years, understand and prioritize core, high-impact products first.
Is this product critical to business operations or customer experience?
Where does it sit on the transformation roadmap?
Aligning with business goals ensures meaningful design impact.
What you build today, should scale tomorrow
Start with a style guide or basic Figma library.
Monitor recurring design patterns across all products.
Keep component libraries lean: fewer variants, clearer usage rules.
Plan scalability from day one.
Governance is the Backbone
We treated our Design System as a Product.
Create a single source of truth owned by a core team.
Use extension libraries for flexibility.
Involve stakeholders via public forums.
Governance is critical, especially when components embed logic & business rules.