Design Systems 101: Level Up Your SaaS Design

What is a Design System? Definitions.

A Design System is much more than just a style guide or a visual component library. It's an evolving and collaborative ecosystem bringing together a set of rules, principles, guidelines, and centralized resources that define and document all the elements that make up a software, SaaS, or app's user experience.

In other words, it's the single source of truth for everything related to the design of your SaaS product. It ensures visual consistency, development efficiency, and a better user experience.

To better understand what a Design System is, it is also important to understand what are called Tokens, the Color System, the Type System, and the component library.

What are Tokens?

Tokens are the most basic building blocks of a Design System. They are unique, named values that represent design decisions such as colors, typography, spacing, and more. They serve as the foundation for building all other elements of the Design System. They are linked to variables, for example, a color variable in a palette, and can be primitive, semantic, or tied to specific components. Using tokens allows for better harmony within the platform and allows the Design System to evolve effectively. Read our article on Design Tokens to better understand.

What is a Color System?

The Color System defines the palette of colors used in your SaaS and the tokens associated with them. It includes brand colors, primary and secondary colors, as well as colors used for states and messages (success, error, warning). It can be wise to properly document the Color System within a style guide for better collaboration. If you're in the mood for it, read our article on Color Systems to understand its impact on the success of your SaaS product.

What is a Type System?

Similar to the Color System, the Type System defines the typographic styles used in your SaaS, including font families, font sizes, font weights, line heights, and letter spacing. It is also documented within the style guide.

The Component Library

The component library is a collection of reusable user interface components, such as buttons, forms, drop-down menus, modals, and more. These components are designed and developed once and then reused throughout the SaaS, ensuring consistency and efficiency.

Differences Between Design System and Style Guide

It’s important to distinguish a Design System from a simple Style Guide. Although often used interchangeably, Design Systems and Style Guides are distinct. Imagine a house: the Design System represents the foundations, structure, and materials, while the Style Guide is akin to the interior design choices (at merveilleUX, we love to compare UX to the field of construction).

A Design System is much more than just a document. It consists of:

• Principles and values: A common foundation that guides design decisions, such as accessibility or simplicity.
• Interface components and patterns: Buttons, forms, menus - reusable elements accompanied by their code and rules of use.
• Style Guide: Defines the visual identity (colors, typography, iconography) and writing rules (tone, style).
• Documentation and Resources: A clear and accessible repository for all stakeholders.

The Style Guide is an element of the Design System. It focuses on the visual and editorial aspects of the product:

• Visual identity: Defines the color palette, typography, iconography, logo usage, and illustration rules.
• Tone of Voice: Guides the writing style, tone, and grammar to ensure consistency in communication.

Why Implement a Design System for a SaaS?

Implementing a Design System for your SaaS represents a valuable investment on several levels.

Consistency and Uniformity

• Unified User Experience: The Design System ensures that all products and features of your SaaS have a consistent look and feel, making it easier for your users to navigate and use.
• Brand Reinforcement: A consistent visual style strengthens brand identity and creates a more professional and memorable image.
• Error Reduction: Clear and precise guidelines for UI elements reduce design and development errors.

Efficiency and Productivity

• Accelerated Development: Reusable components and clear guidelines speed up the design and development process, saving time and money.
• Improved Collaboration: The Design System provides a common language for designers and developers, facilitating communication and collaboration.
• Simplified Maintenance: Centralized and documented components make it easier to maintain and update the SaaS, as changes are automatically reflected everywhere.

Adaptability and Scalability

• Adaptation to Changes: The Design System is designed to be modular and scalable, making it easy to adapt to new needs and features of the SaaS.
• Integration of New Products: Adding new products or services is simplified, as the Design System provides a solid foundation for maintaining consistency.
• Managing Growth: The Design System helps manage the growth of the SaaS by ensuring consistency and efficiency despite increasing complexity.
• Integration of Green UX: A well-designed Design System can greatly facilitate the integration of Green UX principles by promoting digital sobriety and enabling the rapid deployment of optimizations across the entire platform.

Improved User Experience

• Better Usability: Consistent and ergonomic design improves navigation, understanding, and use of the SaaS.
• Increased Customer Satisfaction: A positive user experience enhances customer satisfaction and loyalty.
• Reduced Bounce Rate: Clear and intuitive design reduces the bounce rate and encourages users to explore the SaaS.

How to Create a Design System?

Creating a Design System is a major project that requires a methodical and collaborative approach.

1. Start with an audit and analysis of what already exists

• Inventory existing elements: Gather all existing components, styles, guidelines, and documents.
• Evaluate consistency and quality: Identify inconsistencies, weaknesses, and opportunities for improvement.
• Analyze team needs: Designers, developers, marketing teams, etc.

2. Define the Principles and Guidelines.

Architecture, component catalog, style rules: choose a structure for the Design System with different files, pages, and components depending on the size of the software.

Caution, this is not the Style Guide, which serves as documentation.

Choose and define naming conventions for your variables, tokens, and components.

Research the different plugins you can use (e.g., Tailwind CSS for colors).

If you are familiar enough with interface design software like Figma or Adobe XD, you can move on to the next step. Otherwise, don't hesitate to outsource the Design System design part.

3. Build the Design System

Once the documentation is well structured, you can start making aesthetic choices by creating primitive and semantic tokens (*).

Choose the Colors and Create the Palettes: The Color System

Choose colors carefully based on your brand's graphic charter, while adapting them for accessibility. At a minimum, you'll need black, white, shades of gray, brand colors (primary and secondary), and alert level colors (danger, warning, and success). For a SaaS, colors will be defined for surfaces (div{background-color}), borders (div{border}), texts (p{color}), and shapes (icons or SVG).

Pay Attention to Accessibility: We don't all have the same eyes. It's important to check on sites like Coolors or ContrastChecker that two colors are visually compatible, especially when writing on surfaces.

Choose the Typography

In addition to colors, also create text styles, including fonts. Start by defining variables and primitive tokens for each element that a text tag can depend on (font-family, line-height, size, weight, letter-spacing).

Next, define the text styles. For a SaaS, you will most often need "Display" styles (buttons, labels), "Heading" styles, and "Body" styles (for paragraphs). Each style can be in different sizes.

Choose the Icons

An often overlooked but crucial aspect of your Design System's consistency is the choice of icons. It's not just about finding "pretty" icons, but about selecting a style that blends seamlessly with your SaaS's visual identity. You can choose from fine line icons for subtle actions, solid icons for important buttons, or more detailed illustrations for specific cases. Popular icon libraries like Font Awesome or Material Icons offer a wide selection, but you can also opt for custom icons.

Never Forget Accessibility: Your icons should be readable and understandable by everyone, including people with visual impairments.

Choose and Define the Dimensions

Visual consistency also involves careful management of dimensions and spacing. A grid system (Grid System) is your best ally: it divides the space into columns and gutters, providing a solid structure for positioning your elements. Define a rhythmic spacing system (e.g., 4px, 8px, 16px) to ensure visual harmony.

Don't Forget Responsive Design: Dimensions must adapt to different devices (computers, tablets, mobiles).

Create and Configure the Grid

Before you jump in head first, think about what type of grid best suits your SaaS's needs. The number of columns and the width of the gutters will impact how content is organized. The goal is to create a flexible grid that can adapt to different screen sizes using techniques like flexbox or CSS grid layout.

Create the UI Components (Buttons, Tabs, Alerts, etc.).

UI components are the building blocks of your user interface. Start by identifying the essential components for your SaaS: buttons, forms, drop-down menus, modals, cards, etc. For each component, describe its different states (active, inactive, hover) and their visual impact. Accessibility is paramount: use ARIA attributes, check color contrast, etc. Illustrate each component with visual examples and code snippets to facilitate their use by developers.

4. Create Related Resources

Whether it's using a Figma project, a .pdf file, or a web page, it's important to properly document the operation and architecture of your Design System, including usage tips and style guides. You will ensure perfect harmonization and collaboration between the different members of the team and those who will join in the future.

5. Manage Maintenance and Evolution.

A Design System is never set in stone. As your interface develops, components will change, be duplicated and then adapted, and sometimes they will be "broken" (non-functional due to human design error). You will need to manage this maintenance and evolution by collaborating with developers and properly documenting changes.

Tips for a Good Design System

Building an effective Design System requires rigor and foresight. Here are some tips to guide you:

1. Lay a Solid Foundation:

• Start with the Essentials: No need to do everything at once. Focus first on the fundamentals: the graphic charter (colors, typography), the basic components (buttons, forms), and the grid. You can enrich your Design System gradually.
• Define Clear Naming: Adopt a consistent and descriptive naming convention for your variables, components, and files. This will make it easier to navigate and maintain the Design System.
• Involve Developers from the Start: The Design System is not just a designer's business. Collaboration with developers is crucial to ensure technical feasibility and consistency between design and code.

2. Be Iterative and Adaptable:

• Start Small, Evolve Gradually: Don't try to create a perfect Design System on the first try. Start with an MVP (Minimum Viable Product) and evolve it based on the needs of your SaaS and feedback from your team.
• Stay Flexible: The design world is constantly evolving. Be prepared to adapt your Design System to new trends, technologies, and user needs.
• Incorporate Feedback: The Design System is a collaborative project. Encourage feedback from your team (designers, developers, product managers) and incorporate it to continuously improve it.

3. Make Documentation a Priority:

• Clear and Concise Documentation: Good documentation is essential to ensure adoption and proper use of the Design System. Be clear, concise, and get straight to the point.
• Concrete Examples and Use Cases: Illustrate each component and rule with concrete examples and real-world use cases.

4. Don't Hesitate to Outsource:

• External Expertise: If you lack the time, resources, or in-house expertise, don't hesitate to call on external experts to assist you in creating your Design System.
• Time and Efficiency Gains: Outsourcing can save you time, give you a fresh perspective, and give you access to specialized skills.

Conclusion

Creating a Design System for a SaaS is essential to enable exponential growth. It's a strategic investment that pays off in the long run: by focusing on consistency, efficiency, and scalability, you provide your teams with the keys to better collaboration and your users with an intuitive and enjoyable experience. Remember: a Design System is a living organism that is built and refined over time. By listening to the needs of your users and incorporating feedback from your team, your Design System will become a major asset for the growth and success of your SaaS.

Unfortunately, it is an iterative process that requires rigor and expertise that some teams do not always have in-house. So sometimes, outsourcing part of your SaaS product design (including the foundations of a good Design System) can be a cost-effective and efficient solution to get back on track.

At merveilleUX, we are flexible and can collaborate with your teams to achieve your ambitions, so contact us now to discuss it.