Google Queries, Railwaymen Responds #2 - Design system

Time for another part of the "Google Queries, Railwaymen Responds" series. In the previous article, the theme was the Ruby on Rails framework. This time I decided to go to a different area of Railwaymen's activity and chose a topic closer to our UX/UI experts. The term is design system and all the secrets that this concept hides in it. For assistance in preparing the text this time, we asked Sylwia Forysińska (Senior UX/UI Designer & Team Leader at Railwaymen), for whom design-related topics are a passion.

What is the design system?

Before we get into the meanders related to the issue of design systems, it is worth clarifying first what the term refers to. Design system is an example of a tool used by designers and developers to create consistent and easily recognizable user interface designs. It includes defined rules, components, styles and all kinds of guidelines that define the appearance, operation and interactions of interface elements in an application or on a website. The design system also ensures visual and functional coherence between design elements. This solution is conducive to the work of designers and the development team, as it affects the timing of tasks, ease of scaling, as well as usability quality.

The goals of the design system

The role of the design system is to maintain consistency and efficiency in product design and development. The system itself can be described as a set of tools. It provides reusable components, standardizes patterns and guidelines, and guarantees consistency across platforms. These are not all of its advantages, as the design system is also responsible for performance and supports scalability with product evolution and development.

It is worth considering that design systems are important in promoting usability, brand identity, collaboration, accessibility and maintenance. They make it possible to use intuitive interfaces or undertake any integration. In a large picture, design systems contribute in the pursuit of a product's success and at the same time are responsible for its development during the various stages of its life cycle.

What are the benefits of a design system?

Sylwia, Senior UX/UI Designer & Team Leader

There are many benefits of using a design system. Here are the most important of them, mentioned by Therese Fessenden in the article "Design Systems 101".

- Design (and development) work can be created and replicated quickly and at scale.
- It alleviates strain on design resources to focus on larger, more complex problems.
- It creates a unified language within and between cross functional teams.
- It creates visual consistency across products, channels, and (potentially siloed) departments.
- It can serve as an educational tool and reference for junior-level designers and content contributors. 

What makes design systems unique?

Sylwia, Senior UX/UI Designer & Team Leader

Design systems play a crucial role in promoting efficiency, consistency, scalability, and collaboration in the design and development process, ultimately enhancing the quality and effectiveness of digital products and experiences.

Consistency: Design systems maintain a unified brand identity and user experience by providing a single source of truth for design elements and guidelines across platforms and products.

Efficiency: Design systems streamline the design process with reusable components and templates, saving time and effort on repetitive tasks.

Scalability: Design systems scale seamlessly as products and teams grow, fostering collaboration and innovation at scale.

Flexibility: Design systems promote modular design, allowing for easy customization and adaptation to specific user needs. Components and patterns can be tailored to specific use cases and user needs while ensuring consistency and coherence across the system.

Accessibility:   Design systems often prioritize accessibility by incorporating inclusive design principles and best practices. By providing accessible components and guidelines, they help ensure that digital products are usable and enjoyable for all users, regardless of their abilities.

Brand alignment: Design systems align design decisions with brand values, reinforcing brand recognition and trust.

Streamlined maintenance: Design systems centralize assets and documentation for easy maintenance and updates.

Improved collaboration: Design systems facilitate cross-disciplinary collaboration and communication among team members.

Who benefits from the design system?

The benefits of design systems are primarily obtained by designers, who can create consistent user experiences through streamlined workflows and consistent design elements. Beneficiaries also include developers, who can leverage reusable components and templates to streamline applicable development processes. Additionally, product managers value the design system's ability to maintain brand consistency across platforms and products. As you can see, the cross-section of users who benefit from implementing a design system is much broader than a single profession.

Why use a design system?

Design systems are crucial because they support efficiency, consistency, scalability, collaboration and quality throughout the design and development process. By streamlining workflows and reducing redundancy, design systems help save designers and developers time and resources. They guarantee brand consistency and improve the overall user experience through a unified source of truth for design elements and guidelines. Additionally, design systems facilitate collaboration between teams and allow products to scale seamlessly as they evolve. As a result, users can enjoy a better digital experience.

What is design system language?

Design system language is a set of rules, guidelines, and visual elements that collectively form a unified design system. It includes guidelines for typography, color palettes, iconography, imagery, spacing, layouts, and tone of voice. The purpose of such a language is to establish a consistent visual and verbal identity for a product or brand across all components and interactions. A well-defined design system language enhances brand consistency, improves user experience, and streamlines the design and implementation process.

What is design language vs design system?

Sylwia, Senior UX/UI Designer & Team Leader

A design system is a comprehensive collection of design elements, patterns, and guidelines used for consistent user experiences across digital products. It includes reusable components and documentation, promoting efficiency and consistency.

A design language is the set of principles and aesthetics that define the overall look and feel of a product or brand. It includes visual elements like color, typography, and imagery, guiding the product's identity and user experience.

In essence, a design system provides the tools for consistent design implementation, while a design language sets the visual direction and brand identity.

However, my favorite definition is the one prepared by Maximilian Speicher

design language = pattern/component library + rules + semantics

design system = pattern/component library + rules + semantics + UX guidelines

What signals the need for a design system implementation

Sylwia, Senior UX/UI Designer & Team Leader

Several signals may indicate the need for implementing a design system within an organization:

Inconsistency in Design: Variations in design across platforms or teams can confuse users and dilute brand identity.

Redundant Work: Repeated creation of similar components suggests inefficiency. A design system offers reusable elements.

Scattered Design Assets: If design assets, such as UI components, patterns, and styles, are scattered across various documents, repositories, or teams, it becomes challenging to maintain consistency and coordination. A system centralizes assets for easy access.

Collaboration Issues:  Difficulty in collaboration between designers, developers, and other stakeholders due to differing design interpretations or workflows may suggest the need for a design system. A design system provides a common language for teams.

Growth Challenges:  As organizations grow or expand their product offerings, maintaining design consistency becomes increasingly challenging. A design system can scale with the organization, providing guidelines and assets that accommodate growth and diversity.

Accessibility and Compliance Needs: If there is a growing emphasis on accessibility standards or regulatory compliance requirements, implementing a design system with accessibility features and guidelines becomes essential to ensure inclusivity and legal compliance.

Frequent Design Changes: Frequent design changes across products are difficult to manage without a centralized system

Customer Feedback or User Testing Results: Feedback from users or usability testing sessions indicating confusion, inconsistency, or dissatisfaction with the design may highlight the need for a more cohesive and user-centric approach facilitated by a design system.

Alignment with Brand Identity: Strengthening brand identity across digital touchpoints requires alignment with design decisions through a system.

Overall, the decision to implement a design system should be driven by organizational needs, such as improving efficiency, consistency, collaboration, scalability, and user experience, while considering factors such as growth, complexity, and regulatory requirements.

What suggests the need of implementing a design system?

The need to implement a design system is often dictated when there are inconsistencies in design elements across different product realizations or digital platforms. Any such instance of inconsistency can lead to a fragmented user experience eroding brand identity and trust. In addition, spending too much time recreating common elements and resolving design discrepancies can lead to reduced productivity and affect slower development. In such a situation, a design system provides a centralized repository of reusable components, design guidelines and best practices, ensuring consistency and coherence in user interface and experience.

As digital products and assemblies scale, it becomes increasingly difficult to maintain consistency in design. Design systems solve this challenge by providing scalable solutions that adapt to changing requirements and accommodate product and team growth. By fostering collaboration and streamlining the design and development process, design systems enable teams to deliver high-quality digital experiences efficiently and effectively.

How to build a UX design system?

Sylwia, Senior UX/UI Designer & Team Leader

Building a UX design system involves several steps to ensure its effectiveness, scalability, and alignment with organizational goals. The approach may vary in detail depending on the complexity of the product, the size of the team, or the amount of legacy distributed resources. Here are the key steps to build a UX design system:

Define the Purpose and Scope

Start by defining what you aim to achieve with your design system. This includes understanding the needs of your users and your business objectives. Determine the scope of your design system, considering which products and platforms it will serve.

Audit Existing Designs (Research and Analysis)

Conduct an audit of your existing products to identify inconsistencies, repeated patterns, and elements that work well. This audit helps you understand what needs to be standardized and what can be improved. 

Establish Design Principles

Define a set of design principles that reflect your brand’s values and vision. These principles should guide the design decisions within the system and ensure consistency across all products.

Develop UI Components and Patterns

Start creating the building blocks of your design system:

UI Components: These are reusable elements like buttons, inputs, cards, and more. Ensure they are versatile and cover a range of use cases.
Patterns: Document how these components can be combined to form common interfaces, like forms, navigation, or dashboards.

Define Design Tokens

Design tokens are the visual design atoms of the system — spacing, color, typography, etc. They help maintain visual consistency across different platforms and technologies.

Document Guidelines and Best Practices

Create comprehensive guidelines for using the design system. This includes how to use components, design tokens, and patterns. Guidelines should also cover best practices for accessibility, responsiveness, and internationalization.

Build Prototypes and Templates: 

Create prototypes and templates that showcase the usage of components and patterns within real-world contexts. These prototypes serve as examples for designers and developers and demonstrate how to implement the design system in practice.

Build a Shared Library

Develop a shared library (often in tools like Sketch, Figma, or Adobe XD) that designers can use to pull components and tokens directly into their designs. This promotes consistency and speeds up the design process.

Integrate with Development

Collaborate with developers to implement these components in code. Use technologies like Storybook to create a living documentation where developers can see and copy the correct implementation of component.

Educate and Advocate

Conduct workshops and training sessions for designers, developers, and product managers. The more they understand and are involved with the design system, the more effectively they can use it.

Maintain and Evolve

A design system is never complete; it needs to evolve with your product and technology landscape. Regularly update the system based on user feedback and new requirements.

Measure Impact

Establish metrics to measure the effectiveness of your design system. This could include the speed of development, consistency in user experience, or user satisfaction.

By following these steps, you can build a robust design system that enhances design consistency, improves productivity, and provides a harmonious user experience across all products.

Design system examples that you should know

Sylwia, Senior UX/UI Designer & Team Leader

Several well-known design systems have been widely adopted across various industries. Some notable examples include:

Material Design (Google): Developed by Google, Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Used across Google's products and services, such as Android, Gmail, and Google Maps, it provides a consistent experience.

Apple Human Interface Guidelines: This design system is used for designing apps for all Apple platforms, including iOS, macOS, watchOS, and tvOS. It provides detailed guidelines for the design of intuitive and stylistically consistent interfaces.

IBM Carbon Design System: Carbon is IBM’s open-source design system for products and digital experiences. It combines guidelines, design kits, and components, offering detailed documentation on creating intuitive and cohesive interfaces.

Atlassian Design System: Used for Atlassian's suite of products like Jira and Trello, this system provides guidelines, components, and patterns to help create clear and coherent interfaces, focusing on collaboration and productivity tools.

Adobe Spectrum: Spectrum ensures coherent interfaces across Adobe's suite of tools, promoting consistency across its creative software while emphasizing aesthetics, functionality, and accessibility.

Polaris Design System (Shopify): Polaris is Shopify’s design system, helping designers and developers create a cohesive and accessible user experience across Shopify’s platform. It includes style guides, design patterns, and reusable components that adhere to best practices in user interface design, emphasizing consistency and quality in Shopify's ecosystem.

Bootstrap: Bootstrap is a widely used open-source toolkit for developing with HTML, CSS, and JS. Originally developed by Twitter, Bootstrap provides a responsive grid system, extensive pre-built components, and powerful plugins based on jQuery. It's designed to facilitate the development of dynamic websites and web applications.

Conclusion

As you can see design system can be a key tool in the work of designers and developers, which supports the creation of consistent and easily recognizable user interfaces. At the same time, it contributes to maintaining visual and functional consistency between design elements. Such activities are reflected in the efficiency of employees and the entire development team, thus facilitating scalability and usability and reducing the time to complete tasks.

If you want to find out how the various design systems look like in our projects then we invite you to review our Case Studies, in which you will not only see the results of our work, but also the process of its implementation.

CHECK OUT OUR CASE STUDIES

Thank you for visiting our Google Queries, Railwaymen Responds article series. Feel free to check out our previous text about Ruby on Rails.

CHECK OUT OUR PREVIOUS ARTICLE