Establishing a Single Source of Truth: OneSignal’s Journey with Supernova

OneSignal stands out as an innovator in the communications space, and with growth comes new challenges. The team at OneSignal faced a pivotal one: creating and managing a unified design system. We talked to Lee Munroe, Head of Design, and Charles Kantz, Senior Design Engineer & Design System Lead, to explore how OneSignal’s partnership with Supernova revolutionized their design processes, injecting efficiency and consistency into their product development lifecycle.

The pre-Supernova era: A fragmented design landscape

Reflecting on the early days at OneSignal, Lee describes a scenario familiar to many fast-growing tech companies. "When I joined OneSignal five years ago, there was no design system, just a component library and some Sketch mockups," he explains. This lack of a cohesive design system led to inefficient workflows, inconsistent user experiences, and a stunted creative process, posing significant hurdles for designers and developers.

To better suit their needs, the OneSignal team migrated to Figma to create and manage their designs and Storybook to manage and even document their code.“I started putting together something resembling a design system in Figma. As the team grew, that design system was even more important to have to make sure our designers were aligned to make sure our language was consistent," Lee reflects.

“A design system isn't just a Figma file; it's more comprehensive, with documentation tying together Figma and front-end components.” -  Lee Munroe, Head of Design

Charles added that they tried to use Storybook for documentation with Addon Docs but found that it was a very costly and slow process to load, taking about two minutes to get Storybook to run locally. It was also clunky and high effort to create. Charles elaborates, “I needed to go through the PR process to update that documentation and build components for the documentation, so I was building a component library for documentation in Storybook to document components.”

The team decided that they needed something more. As Lee notes, “A design system isn't just a Figma file; it's more comprehensive, with documentation tying together Figma and front-end components.” 

Enter Supernova.

Integrating Supernova into the OneSignal workflow

The adoption of Supernova marked a transformative moment for OneSignal. In discussing the decision, Charles highlights the platform's integration capabilities as a game-changer. "We needed central documentation due to team growth and chose Supernova for its Figma and Storybook integration," Charles says, emphasizing the importance of a tool that seamlessly blends design and development.

The tangible benefits of integrating Supernova were immediately evident. "It's hard to quantify, but it's in the realm of hours or possibly a full day or two," Charles estimates, discussing the time saved per project. These efficiency gains not only streamlined their design process but also accelerated their overall product development cycle.

Enabling seamless design collaboration through documentation

With Supernova, OneSignal was able to create a centralized, accessible design system named Beam. This system became a vital resource for both designers and developers. The reduction in back-and-forth queries, as Charles notes, is a testament to Supernova's efficacy. "Documented design decisions in Supernova have provided clear answers," he adds, highlighting how Supernova fostered a more cohesive and efficient workflow. “It's just like a one-stop shop for all the information that you need.”

The wider organization at OneSignal has also shared their appreciation for the new documentation site, with teams complimenting the organization and ease of use.

“Really great work on the docs and layout of the Beam system. I’ve never seen design system work so well laid out.” — VP at OneSignal

Streamlining onboarding and improving team cohesion

The benefits of Supernova extended beyond just design and development efficiencies. The comprehensive documentation within Supernova played a crucial role in onboarding new team members. "The documentation completes the story of the design system," Charles points out, illustrating how Supernova facilitated a quicker and more effective integration of new hires into the OneSignal design philosophy.

Previously, the process was a manual, personal introduction to the design system led by Charles, which typically took about an hour per session, a couple of times each week. This approach was not only resource-intensive but also depended heavily on the availability and knowledge of specific individuals, making it less scalable and potentially inconsistent. 

With the adoption of Supernova, OneSignal was able to transition to a more streamlined onboarding process. The new documentation site helps orient new members with a comprehensive starting point covering all the key learnings, giving Charles more time to answer specific questions.

Measuring success for the Beam design system

Beam’s success is not just anecdotal but is backed by both qualitative and quantitative data. The team runs quarterly surveys to get feedback about the design system. This ongoing feedback loop ensures that Beam continues to evolve and adapt, aligning with the team's needs and the company's broader objectives.

They also make use of Supernova's Google Analytics integration which "helps us keep track of just how often they're being used.” With an eye on adoption and user satisfaction, the team makes sure Beam's users are getting the best possible experience.

Next steps for Beam

Looking to the future, OneSignal is not resting on its wins. Charles reveals exciting developments on the horizon, "We plan to integrate features on Supernova that allow design token changes in Figma to generate code PRs." This next step signifies deepening the integration between design and code, promising to streamline their processes further and bolster efficiency.

Advice for future adopters

For those on the brink of adopting a design system, the advice from OneSignal is clear and actionable. “Understand when you need documentation, find tools to streamline the effort, and integrate it into your team's process,” Charles advises. 

“We finally have the holy grail of design systems when we added Supernova." - Lee Munroe, Head of Design

"Documentation brings everything together,” adds Lee. “I remember telling Charles after we announced at All Hands that we finally have the holy grail of design systems when we added Supernova. The three things work in tandem: There’s Figma, there’s React components, and then there’s Supernova documentation that brings it all together.”

OneSignal's journey with Supernova is only the beginning, and it offers a roadmap for companies seeking to harness the power of a unified design system. By leveraging Supernova, OneSignal has not only streamlined its design and development processes but also cultivated a culture of innovation, collaboration, and efficiency. Supernova is your ideal design system partner.