Creating An Amazing SaaS Design System

SaaS design systems
ashmichf via Twenty20

At a Glance

Ensuring a superior user experience is essential for every SaaS enterprise, and it is possible only with the help of an interactive SaaS design system. There are various steps involved in creating a SaaS design system that must be followed to achieve desired outcomes. The creation of a SaaS design system requires the developers to strike the perfect balance between different UI/UX elements to ensure a seamless user experience.

Here’s a simple truth: you can’t innovate on products without first innovating the way you build them.

Alex Schleifer, Airbnb

Evernote is one of the most popular online platforms to perfectly help users organize their notes, to-do lists, projects, and website pages. The site has an authority score of 83 out of 100 as per SEM rush. By generating more than 440,000 organic visitors and 220,000+ referring domains, the SaaS enterprise has established a strong presence in the industry. What has Evernote done that allowed it to gain much traction with the users? Well, it created an impressive design system that resonates with the customers. Bright colors, intuitive design, crisp content, immersive graphics, and minimal text make the copy speak for itself. Just one glance at the home page conveys all the important information that the prospective customers seek; for instance, the top section houses an easy-to-follow call for the customers asking them to sign-up for free. When it comes to a SaaS product, an excellent UI/UX design can go a long way in helping the enterprise expand the reach of its offerings.

In the product roadmap, designing occupies a very crucial part. But what does the design system mean? Many of us might think that creating an eye-catchy user interface is all that designers have to do. The design system and its contains are extremely broad and, most importantly, continuously evolving. Rather than just saying that designing or SaaS design systems is an excellent UI toolkit, a given framework, or component library, SaaS design systems can be best described as a sum of all the constituents. Every product needs to give a personal or unique touch that will strongly convey a message to its target audience, but before hopping into that, let us have a glimpse of the basics.

What is a Design System?

A dynamic visual design which is mainly what people expect of a UI designer, has an enormous role in creating a good product design that will engage with the customers. A design system team’s main responsibility is to come up with a product design that has good composition and, most importantly, it tells you many things about the SaaS product only by looking at it. There are certain sets of rules that every design system team must follow to develop a great product design. Creating a good design system should resonate with the company’s mission, have cohesion with the target customers, and a rough idea of how your product should look.

How to create a design system?

After a few years of experience, every designer creates their own unwritten set of rules that they prefer to follow. But there is a fundamental or base rule for building a good design system that goes straight right into the designer’s inventory. Let us look at some of the basic points that should be highlighted and remembered while building a SaaS design system.

1. Pick your color palette:

The first thing that comes into even a layman’s mind when speaking of a good design is colors and lots of it. A visually engaging design catches a user’s attention but makes sure you do not make it way too intimidating. The first step you should take towards building a good design system is picking up your primary brand color followed by a secondary brand color. In your SaaS product, there should be options like fail, success, on hold, transit, delivered, etc., according to the type of your product. For basic purposes, put red and green to convey a positive or negative message.  Your product also requires many shades of grey for borders, backgrounds, dividers, etc. After you have finalized the colors, you can add more than one shade of your color palette to bring some variation and to match the background color at some stages.

2. Shadow effect:

The shadow effect is one of the most widely used designing elements in UI. But many designers try to insert shadow effects even when it is unnecessary, which makes the UI very inconsistent. So, first, you need to take a step back and look, which are the elements in your UI that need a shadow effect or complement the other designs. According to Colm Tuite, a leading product designer in the SaaS market, there are four important sections where shadow effects compliment the overall product design. They are: –

  • A subtle shadow can be used to raise the interactive components.
  • A shadow effect can be used when the user is hovering at a specific section or a tab.
  • A dropdown or popover shadow effect can be applied, which is quite common in almost all SaaS UIs.
  • A distant shadow can be applied for modal components.

3. Type scale:

 A uniform type scale is very important for your UI, which will add proportionality to a great extent. You should fix the type scale for every page and further divide it according to each page’s elements. For example, your design system should select a fixed font size for every tab’s body section. There should be a specific font size for the heading, bigger size for the title, a bigger and bold font for any pricing tag, a comparatively smaller size than the heading for sub-heading, etc. Large font size should be chosen for section titles and highlight the fonts if there is any free trial or price offer.

4. Border radius:

You will need a perfect radius value for rounding corners. The correct way of assigning a border-radius value is to pick a small radius for small components like any tags or checkboxes. The medium components, like any buttons that a user should hover at, should have a medium border-radius. In the case of models and similar larger components, the designer should go for a large border-radius.

5. Spacing scale:

Whitespace is the most extensively used style property for any UI design. No matter where you are adding some space, be it between different items in the section tab or options in the dropdown menu, whitespace is essential. But, the whitespace in your UI should be measured and not added arbitrarily. Designing your UI, prefer 8dp increments and then you can increase the value for you every single component and build a proper layout for the UI.

6. Letter spacing:

Along with font size, suitable letter spacing should be chosen to properly fit the big headings and not make them look way too clumsy. Simultaneously, you can increase the letter spacing for sub-headings or other components with smaller font sizes, but everything should be consistent and proportional.

All these components together constitute the global style palette. This means your next task is to build the component library, and when you are picking up styles, fonts, colors, etc., for each component, you should select it from the global style palette you created. Nothing extra should be added directly into the component library in terms of styling.

Read more stories