Design Systems for SaaS Products: Everything You Need to Know

Design Systems are the best way to build and scale a SaaS product, fast. It allows your team to focus on the most important issues and it helps your organization save precious time and money.

We get asked about the value of setting up a Design System and how it affects the work of product teams in SaaS companies. So after a few months gathering questions and feedback from our clients and our team of design strategists, I finally decided to put it all together in an article. So without further ado, here’s what you need to know about Design Systems for SaaS Products.

What is a Design System?

Design Systems are collections of modular, reusable, components, and patterns.

They are based on the two cornerstone concepts of the industrial revolution: modularity and standardization.

Modularity and standardization are the reason why factories, taking advantage of economies of scale, are able to scale their production to mass-market levels.

‍

It makes sense to produce many units of a limited number of pieces that you can arrange in different ways. There’s less operational complexity, your workers and machines specialize and become more efficient, and reparations are much more simple to do.

There are nearly infinite examples of modularity and standardization in the physical world, LEGO being my all-time favorite. But what does LEGO have to do with Design Systems and building SaaS products?

Pretty much everything, actually.

Two of the LEGO characters I keep on my desk. Yes, I’m a grown-up.

Just like a set of LEGO bricks, a Design System for SaaS Products will provide your team with a certain number of components with shared characteristics. Those components can be arranged and swapped to build new features that weren’t even on the map when the system was created.

Why are Design Systems Important for SAAS Products?

A Design System helps your SaaS company achieve mainly three things:

Consistency: Lack of consistency introduces bugs and user experience issues that are time-consuming and costly. A Design Systems provides predetermined, reusable assets and patterns that your product team can drop into the product without having to create them from scratch every time.

Speed: A lot of the time invested in creating building features goes into thinking about layouts, look-and-feel, and behaviors. Having all of that predetermined, and shared across your product team, saves them a ton of effort and allows them to build faster. An added benefit is that they can use all the extra time and brainpower to solve higher-order problems in the experience instead of spending most of their sprints doing repetitive, mechanical work.

Scalability: Having the ability to create new pages and features without worrying about consistency makes it easier to grow your product team. With a Design System in place, there’s less back on forth on basic questions about layouts and looks and that creates shorter onboarding times and less “rookie mistakes”.

A big portion of a developer’s time is wasted fixing mistakes that could have been resolved during the design phase. Many of those mistakes are due to be inconsistencies.

Who in the Team Can Use it?

Everyone, really.

A lot of people think Design Systems for SaaS products are made only for designers. But the reality is that developers have been using modular, reusable components for a long time, and designers –at least in tech–, have just begun to catch up.

A Design System for SaaS products that includes developers can manifest in the form of code simple snippets or more sophisticated as frontend frameworks. In all cases, they provide devs with pre-approved, reusable code templates they can combine quickly create new pages and features or to refactor old ones.

Design Systems Across the Organization

Obviously it’s the designers and developers the ones that get the most value our of Design Systems but everyone in your organization can benefit from them. From the Marketing folks to people in Finance.

The reason being, in order to have a cohesive, internal brand, everyone in your organization has to stick to some guidelines on how to present and share their work both internally and externally. As an example, Marketing can make use of in-brand, social media post templates for a unified web presence. And finances can benefit from properly formatted quarterly reports that highlight the key insights in the data.

If you attend a board meeting and the slide deck is properly branded, it gives all members context and a sense of belonging. It then helps them absorb the information better, improving the quality of their contribution to the discussions.

How Does a Design System Help Design and Development Work Better Together?

Having a shared system for naming things improves product discussions between designers and developers.

By using the same language, they can be more specific about the things they are referring to in their written and spoken communications. This creates a massive advantage when working to solve user experience challenges or fixing front-end issues.

What is Stack Mirroring and How Does it Relate to Design Systems for SAAS Products?

Stack Mirroring is the practice of matching the naming, hierarchy, and structure principles of design and front-end components and libraries. It helps designers and developers collaborate better by providing a shared language for the architecture of the SaaS product.

‍

How We at Wandr Implement Design Systems for SAAS Products at Companies Regardless of Size and Composition?

As usual, the first step is to start with the user.

We start by understanding how users interact with the current product so we can identify navigation patterns and workflows.

The second step is to inventorize all existing components. It’s important to see the level of inconsistency and complexity of the current system. It also helps us to identify redundant elements to potentially unify and simplify them.

Once we have a complete inventory of everything, we proceed to create the Design System, either by updating the old components and patterns or by creating new ones. This may or may not include a brand refresh. All designs take into consideration our initial research with the product’s users.

Scaling with vs Scaling Without Design Systems

It’s not impossible to scale without a proper Design System. But it’s orders of magnitude more difficult, time-consuming, and expensive.

When you do not have a proper Design System for your SaaS product, your designers and developers have to make dozens of micro-decisions every time they set out to build a new feature. If you know anything about building products, you know that not two developers code in the exact same way. And that applies to designers as well.

A micro-decision could be, centering a paragraph instead of flushing it to the left. Or using a different hue of blue because they felt like it. They may seem harmless at first, but the effects quickly compound, snowballing into a legacy Frankenstein SaaS product that haunts your users at night.

Is it Possible to Calculate How Much Time a Design System Saves an Organization?

Yes and no. The amount of time your organization saves by setting up a Design System is a function of how many people use it, how often, and how complex your product or suite of products are.

As a general rule, the more complex your product is, the greater value your organization will get from setting in place a Design System, in the form of greater speed and fewer design and dev costs.

Some Examples of Famous Design Systems

Perhaps the most recognizable Design System out there is Google Material Design. It was one of the first ones to be shared publicly, it allowed Google to unify the look and feel of their web products, and it has helped countless development teams create a more consistent experience for the Android platform.

There are many more here’s a short list of our favorite ones at WANDR.

• IBM Carbon
• Apple Human Interface Guidelines
• Shopify Polaris

What we like about these Design Systems is how comprehensive, detailed, and multi-platform they are. If you want to familiarize yourself with other public examples of Design Systems, make sure you visit Adele.

Design System vs Style Guide. What’s the Difference?

Style guides are part of Design Systems.

The main difference between Design Systems and Style Guides is the number of scenarios they cover. A Style Guide is only a set of guidelines for the visual aspects of the brand. Whereas a Design System has that but also includes naming conventions, usability patterns, multi-device behavior, font-pairing rules, animations (if applicable), and, in some cases, code snippets for frameworks like React.

Of course, if your Style Guide has all that, then you may very well call it a Design System, but Style Guides is a term that’s most commonly associated with visual and marketing design and not so much with building software.

Organizing a Design System for SAAS Products

This is a debatable topic because it really depends on how your team will be using the system. There are two main ways to organize them.

The most popular way to organize Design System components if by following the Atomic Design philosophy where everything is organized like Russian nesting dolls, from less to greater complexity.

There are some issues with Atomic Design, particularly when having to decide whether something should be a molecule or an organism. I’ve written before on how to deal with this situation here.

The other way is to organize your system based on platform or use. This is how the Dropbox Design Team and Figma (our design tool of choice) do it.

You could also combine both methods by breaking all components down into categories associated to each platform, and then further organize them following the atomic approach. At the end of the day, the smartest thing to do is to talk to your team (the main users of the system) to understand how they will be using it and optimize it for their workflows. This hybrid approach is what we follow at WANDR.

What Format Does a Design System for SAAS products have

The format of your SaaS Design System will be based on how it will be used by your team. Some of our clients prefer PDFs while others like to work directly with Figma. Internally, we use a combination of Figma, Airtable, and Notion for our Design System.

Here are a few things to consider when choosing a format depending on who’s going to be using it:

1. Level of technical knowledge: Designers, developers, or both? Do you need non-technical people to use it as well e.g. Marketing or Finance?
2. Level of privacy required: Do you need to keep everything in-house or do you work with a lot of freelancers? Would it be OK to make it public for easy sharing or do you prefer it to be invite-only?
3. Medium: Do you need to provide print copies of the system? Or is your team going to work with it online exclusively?

Success Cases

We have helped several SaaS companies successfully implement Design Systems in their organization. Here are a few success stories:

Tribyl: We created a comprehensive system for them that helped their dev team keep up with highly aggressive production timelines. Design stopped being a bottleneck and allowed them to create and code new features in weeks instead of months. Read more about it here.

Zoe Financial: We helped Zoe create a Design System that covered their landing page, marketing newsletters, customer onboarding flows, and internal SaaS platform. Once the system was in place, it was quickly adopted by various departments which allowed them to unify their image and project a more reliable and trustworthy brand, highly important traits for fintech companies. Read more about it here.

Conclusion

Design Systems are the best way to build a scalable and consistent SaaS product, fast. It allows your team to focus on the most important issues and it helps your organization save precious time and money. Yet it can be a daunting task to create them from scratch without a proper process and good knowledge of how the build them.

If you’re interested in learning more about how we build successful Design Systems, make sure to get in touch with our team.