Launching a Design System in a rapidly growing scaleup

The Results

• First design system successfully launched at SafetyCulture
• 58 web components and 32 mobile components, aligned to a single Figma library
• Usability moved out of the top support ticket categories
• 30% platform-wide component adoption, growing 10% year-on-year
• Unified engineering teams across multiple platforms on a shared component roadmap
• Increased cross-team contribution through an established design system working group

Growing pains

SafetyCulture had hit a scale that exposed the cracks. By 2022, usability had become one of the company's top drivers of support tickets, a direct consequence of years of siloed teams building UI independently. Multiple conflicting component libraries had accumulated, engineers were shipping components in isolation, and designers were working from a Figma library that bore little resemblance to what was actually in production.

I was brought in specifically to untangle this, hired with a mandate to build and roll out SafetyCulture's first unified design system.

The most recent attempt at a design library had been built by an external contractor. It looked the part, but had little connection to the actual product. Components didn't map to what was in the app, accessibility was an afterthought, and there was no consideration for the handover experience between design and engineering.

Engineering were in a similar position, working from an open-source UI library with no governance and no ownership. Teams were shipping components in silos with no shared standards and, as the comparison above shows, zero alignment with the design library.

Getting the foundations right

Before a single component was designed, I focused on the fundamentals. I architected a new semantic design token system, establishing a shared language between design and engineering at the most basic level. This wasn't just a design decision; it directly enabled us to ship dark mode to customers and gave both sides of the team a common vocabulary to build from.

Creating a new component library

With solid foundations in place, I designed and built a consolidated component library in Figma to serve as the single source of truth. Over 40 foundational components, each documented and validated for accessibility, developer experience, and real-world usage. These became the building blocks every SafetyCulture team would work from going forward.

Gaining adoption

Adoption doesn't happen through evangelism alone. It needs to be tied to something the business actually cares about. When a recent acquisition was being integrated into the platform with its own visual language, I used it as a forcing function. We aligned teams across business units around a single approach to product cards and lists, a focused surface area with broad reach, and a proof point that the system could solve real problems at scale.

It's all about people

The hardest part of launching a design system isn't the components, it's the people. I built close relationships with key engineers and used that foundation to establish a formal design system working group, bringing designers and engineers from across the business onto a shared roadmap. The result was a shift from the system being something imposed on teams to something they actively contributed to. Adoption grew. So did the contributions.