Supernova design system
Supernova is Matterport's design system. What initially started as the cleanup and reorganization of a couple of antiquated component libraries turned into a journey to develop a system of reusable styles, components, and patterns for all web products at Matterport.
- Every designer uses Supernova to kickoff each project
- As of 2024, all dev teams use Supernova
- Increased eng releases by 72% reduction in 2023
Challenge
Lack of a system meant that our products felt disjointed. Users had confusing experiences when going from one product surface to another. And, our engineers were building all UI elements bespoke for their products. It was inefficient and a poor use of everyone’s time.
The Supernova effort was comprised of anywhere from three to five engineers and one designer dedicating any free time they might have, and myself.
The amount of work designers at Matterport had and still have on their plates at any given time, versus the amount of time they have, isn’t ideal. As a result, certain things, like, file hygiene, or, trying to design reusable components, can fall by the wayside.
There were some component and style libraries in disparate parts of our Figma organization. Additionally, teams maintained their own libraries in their own ways and didn’t talk to any of the other teams. This resulted in both no source of truth for components and very a lack of consistency across common components.
Solution
Matterport had gone through a small brand refresh about a year or two before I joined. As part of that work, a type scale and color palette were already in place. For Supernova, we took these styles, solidified a few other visual design fundamentals (elevation, shape, spacing), and organized them into a library called Foundations. Working with engineering, we also tokenized these styles so designers could easily refer to them when handing off designs to engineers.
Working with a designer external to Matterport, we created a new product iconography system along with guidelines for how designers might create their own icons to fit within the system.
Given the lack of consistency with our core components (e.g., buttons, dividers, form fields, etc.), my manager and I determined putting together a component library that consolidated all these styles into something the entire design team could support and use would be an extremely high ROI for us.
And finally, in an effort to make some of this work easily accessible and more visible, we hosted our components on Storybook. Here, people can interact with the actual, final versions of the components.
What's next
Without a dedicated team, design systems are always going to be uphill battles. They are products, and, in theory, their development should work like a product team. At the beginning of 2023, due to limited resources, the company needed to tighten the belt on certain initiatives. Supernova lives on in maintenance mode but is still used every single day across the company.
