Tune
Client
SiriusXM
Services
Design Systems, HTML, CSS, Javascript
2025+
Introduction
Over the years, SiriusXM has expanded its portfolio by acquiring multiple music services and apps, including its own SXM app, the Stitcher app, the Pandora Ad tooling, Simplecast web app, and Adswizz. As our teams grew and new features were introduced, it became increasingly clear that we needed a more robust design system—one with Figma components that aligned seamlessly with our codebase. With over 20 designers contributing across multiple apps, maintaining consistency and efficiency became a growing challenge.
While working on the Design Ops Team, I took on a new role to lead and establish a design system that would better support our web design and engineering teams.
Project goals
Simple components approved by all teams and tailored to meet each team’s unique specifications.
Themeable components that can adapt to various visual languages
Built-in AA accessibility compliance at the component level
Regular team processes & communication including releases, office hours, and automated testing
Build components and patterns using CSS only where possible, and built web components to make work in multiple js language a breeze
We conducted a thorough audit of our apps, ranking components based on their utilization and their position in upcoming team roadmaps. This enabled us to organize our component releases by priority. We created a release schedule, which provided our product teams with insights into upcoming components, allowing them to make suggestions aligned with forthcoming feature requirements. I introduced key processes to refine our workflows and encourage a more strategic approach to design system adoption.
I established a clear governance framework to build trust and transparency between those maintaining the system and those using it. This also included regular office hours to foster team collaboration.
Also, I introduced a structured contribution process helped designers stay engaged with the system while enabling them to shape its evolution through proposed patterns and components. This not only strengthened trust but also encouraged adoption.
To ensure consistency, accessibility, and versatility, I implemented a structured review process for new components. Each submission adhered to predefined principles and accessibility standards, ensuring seamless integration into Figma.
Acting as the bridge between design and engineering, I ensured that component variables were automated and compatible across multiple JS frameworks. I also managed our team’s Storybook & Knapsack documentation site, aligning component specs with engineering requirements for quick implementation.
Collaborators
Mike Pouncy (Engineering Systems)
Salomé Mortazavi (Design Operations)