Design systems at SiriusXM

Role

Senior Designer

Skills

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.

How might we give eng + design the same components and language?
How might we provide clarity to all teams around our shared components and styles?

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.

Metrics

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.

Challenges

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.