How the Masala Design System saves time for our users

OVERVIEW

After working on the Masala Design System for a few years, I realized that quantifying the impact of having a mature design system in your organization can be tricky. Hence, I decided to run a simple experiment to at least figure out how much time the designers are saving in designing a pre-defined screen. Let's dive into this fascinating experiment of how the Masala Design System is helping its users save a significant amount of time.

THE CHALLENGE OF MEASURING IMPACT

The premise of building the design system at Innovaccer was to have a very high degree of reusability and consequently have consistency in the user interface. The significance of reusability lies in the fact that the absence of it only wastes precious time in building the same things again and again.

Also, attaching a monetary value to individual design system components, such as a button, can be difficult. While capturing the exact financial savings may be elusive, we can certainly measure the time saved. After all, for any organization, time saved is ultimately money saved.

But how do you accurately measure the time saved by the designers and developers? This is where things get tricky. While analytics in tools like Figma provide insights into components usage, they do not provide a comprehensive measure of the overall time saved by a designer. However, the primary metric that we can use to measure impact is the time saved when comparing design system usage versus non-usage. There could be other measurable Key Performance Indicators (KPIs) as well such as -

1. Efficiency - How quickly the team can build features, modules, and products. Basically to go to market time.

2. Code Quality - Evaluating code complexity and the number of lines of code.

THE FUN EXPERIMENT: SPEED TEST

To measure the time saved while using a design system, I embarked on a fun and enlightening experiment - codenamed "Speed Test". I carefully selected 5 designers to participate based on their proficiency in Figma, familiarity with the design system, and their tenure in our company. The objective was to measure the time it takes for a designer to create a single screen using the design system versus not using it.

SETTING THE STAGE

I picked an actual screen from one of our products so that the result could be as relatable as it could be. A lot of our products rely heavily on tables, so I figured it would be apt to have a screen with a table in it. The task was to replicate this screen without using the design system vs. using a design system. I also asked the designers to replicate the screen in their day-to-day working environment i.e. from their desk and use a monitor if they want to.

ASSUMPTIONS AND LIMITATIONS

To streamline the experiment without compromising its essence, I made a few assumptions and addressed some limitations:

1. Prior Knowledge: Recognizing that designers often iterate on screens in real-world scenarios, the assumption was that they had a clear understanding of what they were designing. They were also allowed to copy-paste content and text styles. Consequently, the final measured time excludes these time-taking tasks.

2. Usage of Design System Components: I requested that the designers, within the time constraints, at least use atomic-level components from the design system, such as a button, avatar, etc.. However, they were not allowed to use complex components like tables. Designing an entire screen without leveraging any design system component would have taken significantly longer - potentially over an hour. Thus, the final measured time excluded the creation of such components from scratch. While measuring the impact in its entirety could reveal a significant time-saving figure, it was not practical due to the time limitations.

RESULTS

CONCLUSION

With an approximate average time saved of 23 minutes per such screen, our designers are reaping the benefits of the Masala Design System. Imagine if I had not accounted for the limitations mentioned earlier - the time saved could have potentially reached a staggering 40 minutes for each such screen designed. This fun experiment serves as a testament to the time-saving power of our design system, which has been in use for more than 4 years now. This efficiency extends beyond designers alone, benefiting developers as well. It has undoubtedly saved countless hours within the organization, making a tangible impact that can now be backed with some fun numbers.

// KEEP MAKING