Design systems at SiriusXM
Senior Designer
user research, web components, ui/ux design, visual design
In this case study I'll review how I led the launch of our component library for SiriusXM’s Creator team. I also partnered with Design System Teams across the SiriusXM organization to unify our design language with web components.
This is a high level overview of work that was completed over the course of a year.
Problem definition
As SiriusXM's creator tooling continued to evolve and offer new features, and with 20+ contributors to our apps– it became increasingly clear that we needed an improved design system with componentry in Figma that matches code.

There were a lot of problems to solve, so I grounded the initial design system discovery with these “How Might We” questions to establish priority.
Project Goal
Create a themeable component library built with web components, starting with an initial set of 16 components for the first release.
The project's scope was deliberately restricted to a single app and project initiative. The components in this phase primarily include basic elements such as buttons, lists, and basic select options. This enables us to assess its impact and evaluate cross-team communication.
  • At least 50% of components in project-specific Figma files utilize componentry
  • 50% of the coded components within the project scope leverage componentry or are integrated with their framework-specific child components.
Releases & Team Communication
We conducted a thorough audit of the app, ranking components based on their utilization. This system enables us to organize our component releases by priority. It also provides our product team with insights into upcoming components, allowing them to make suggestions aligned with forthcoming feature requirements.

As we kicked off work on our inaugural release, we introduced "Office Hours" sessions and conducted several bug bashes. These initiatives played a crucial role in fostering collaboration between the design and engineering teams.

Below, I've provided an example to illustrate the high level of themeability in the library. Right from the start, our team dedicated its efforts to ensuring that these components could seamlessly adapt to the diverse needs of multiple teams, visual styles, and client requirements.
As we build components, we decided to pivot our focus. Teams were requesting more complex components rather than components used most frequently in the app. We shifted our direction to include these product-requested flows. Below are examples of design specs created for various products.
Ui examples
Below, you'll find examples of the components in action across various feature initiatives within the creator team. The components included in our 1.0 release played a pivotal role in delivering essential features for our team.
Results and ongoing releases
A year after launch, 3 teams use the library daily, with an average of 2.5k component insertions per week. The team has received multiple requests from partner teams to contribute and we are currently working to add more components to the library.