Launching a Design System in a rapidly growing scaleup

The Results

• First design system to be rolled out at SafetyCulture
• A culture of designers and engineers working together
• 58 Components built on web and 32 on Mobile aligned to design libary
• Established a new design look and feel for SafetyCulture
• 30% adoption of components accross entire platform growing 10% YoY
• Saved many hours of time spent in engineering to design hand over

Growing pains

I was hired by SafetyCulture in 2022 with a focus to lead their design system. SafetyCulture was founded in 2012 and one of Australias start up success stories hitting the 2billion valuation mark and over X amount of customers using the platform.

By the time i joined SafetyCulture had tried many forms of "design systems" and over the years as a result of many siloed teams, aquisitions and going fast had led a fair bit of inconsistency.

When i joined the most recent effort at a design library was created by an external design contractor. This had all of the options but no alignment to what was in the app or in the code library and not a great focus on on a11y or design to engineering experience.

Engineering were also in a similar position where they had an open source UI library. Which had no standards as there was no one overseeing the library. As you can see comparing the engineering library to the design libary above there was no alignment.

Getting the Foundations right

I architeched a new design token system to ensure proper semantic use of styles accross all platforms. This enabled us to roll out dark mode to our customers and ensured engineering and design were speaking the same language at the most basic level.

Creating a new component library

I designed and built a consolidated component libary in figma that would act as the source of truth moving forward. These would serve as the building blocks of all SafetyCulture interfaces. This included over 40+ foundational components, documented and tested for accessbility and user and developer experience.

Gaining adoption

To help with the adoption, I capitalised on key business interests. One of which was the recent aquisition that was being integrated into the platform that come with it's own language, look and feel. We created an initative to align on the product cards and lists. Aligning teams accross business units, teams and departments.

It's all about people

I created a culture of designers and engineers working together to create a cohesive design system. I also created a culture of designers and engineers working together to create a cohesive design system.