Design systems: The power of collaboration
To bring a design system into practice, you need to understand its mission and challenges. This takes a lot of discovery. In this article, I will give a general overview of my reflections up to this point.
From repetition to ongoing improvement
In the world of UX design, or the creation of a digital product, teams often find themselves in the same situation of repeatedly rebuilding things that have already been designed again and again.
For example, imagine a software company continually redesigning its login page layout without establishing a standardized template, resulting in wasted time and inconsistent user experiences.
Instead of reinventing the wheel each time, why not solve these problems once and for all and then build upon those solutions for ongoing improvement?
Design systems bring solutions to one place, making them accessible to everyone involved and creating a shared platform of knowledge about the company and its products.
But where should we start? Building a design system is as complex as an organization itself, and to bringing a design system project to life is one of the biggest hurdles to overcome.
Understanding Design Systems
There are numerous slightly different concepts for design systems. Some people think a Design system is a styleguide or UI-kit (like design libraries in certain programs;) somehow it is, but it is more a quite basic one and not really effective.
When thinking about UI libraries they are mostly isolated in certain tools that are not accessible to everyone. Normally, they are just part of a Design system.
A design system is always the product of successful collaboration between designers, developers, and other teams in a very practical way.
It's a centralized collection of resources and guidelines that serve as the foundation for designing and building digital products, a knowledge base, including design guidelines, examples, components, philosophies, documentation, coding guidelines, code snippets and language. It’s usually hosted online as a public or internal website and can be an entire ecosystem. In Dan Mall's book “Design that Scales: Creating a Sustainable Design System Practise” this particular graphic (below) shows how people answered his question of how they might point to their design system — no one individual was correct, but together they all were:
The primary advantage lies in establishing a singular source of truth, ensuring that everyone of the product team (designers, developers, product managers, and other stakeholders) has the same understanding of how scenarios are to be conceptualized, developed, presented, and labeled.
Here are two of many definitions, where I find they particularly describe the concept of a design system very well:
“A design system is the official story of how your organization designs and builds digital interfaces.” Brad Frost (front end designer)
“A set of connected patterns and shared practices coherently organized to serve the purpose of a digital product” Alla Kholmatova (UX & interaction designer)
The practical implementation of a design system always requires the consideration of the specific needs it aims to address. So the first step is to define the purpose of the specific Design system. Without an understanding of the company’s unique context and requirements, the development of a design system becomes impractical.
How Design Systems Drive Consistency and Efficiency
By establishing a structured approach to design, these systems not only ensure consistency across various touch points but also streamline the entire design process, driving efficiency and innovation.
Faster Workflows in the Design and Development Process: With a design system, designers and developers can access pre-built components and standardized design patterns, reducing the time spent on repetitive tasks.
Allover Consistency in the User Interface : A design system ensures that all elements of a user interface maintain a consistent look and feel throughout the product.
Higher Quality: By providing guidelines, best practices, and quality control measures, a design system helps maintain a high standard of design and development.
Shared Terminology — For a better understanding & communication: For example, designers and developers can refer to a shared style guide when discussing typography, colors, and spacing, ensuring clear and effective communication.
One single source of truth: With a design system serving as a centralized repository for design assets, guidelines, and documentation, everyone in the organization can access the most up-to-date information.
Scalability and Flexibility: In an ever-changing digital landscape, companies need to be able to quickly respond to new requirements and technologies. A well-designed design system provides the flexibility and scalability to keep pace with the growth and changes of the company.
Better onboarding processes: New team members can quickly familiarize themselves with the design principles, patterns, and guidelines in the design system. They can refer to the design system documentation to understand the organization’s design philosophy and standards, enabling them to contribute effectively from day one.
The structural backbone: Modularity
The structure of how to build a design system naturally depends heavily on how it will be used. At the heart of a design system lies the concept of modularity. Just as a building is constructed from individual bricks, a design system breaks down complex user interfaces into smaller, reusable components.
These components,-ranging from basic elements like buttons and icons to more complex structures like navigation bars and cards, form the building blocks of design.
A very well-known model for construction is Brad Frost’s Atomic Design. Brad Frost’s Atomic Design breaks down UI elements into smaller, reusable components. The system consists of five distinct levels:
Atoms: At the most basic level, atoms are the building blocks of UI, such as buttons, input fields, and icons. These are the smallest, indivisible components that cannot be broken down further.
Molecules: Molecules are formed by combining atoms together to create simple, functional units, such as a search bar composed of an input field and a button.
Organisms: Organisms are more complex structures that combine molecules and/or atoms to form distinct sections of a UI, such as a header or a product card.
Templates: Templates provide context for how organisms fit together on a page. They represent higher-level layouts or wireframes that define the overall structure of a page.
Pages: Pages represent the final, specific instances where templates are populated with real content to create fully realized UIs. These are the actual web pages or screens that users interact with.
By organizing UI elements in this hierarchical manner, Brad Frost’s Atomic Design system encourages modular, scalable, and systematic approaches to designing and building digital products.
The setup of a design system can vary in complexity, and the organization of its individual elements often differs. However, a typical setup generally includes elements such as a foundation (typography, colors, layout, icons,…), a collection of components, a branding section, and the representation of code, always in combination with documentation.
Apart from being super effective, a design system also serves as an extensive knowledge platform, providing information about the digital product and specific knowledge about the user interface and can be expanded endlessly. Useful design systems you can use, reuse and extend.
Challenges and Adoption Strategies
A major challenge in establishing a design system within a company is the changes it brings to existing processes. It changes how people work, communicate und share the work.
Employees might be skeptical of these changes and may stick to existing workflows, making it difficult to gain acceptance for the design system.
The implementation of a design system requires time, money, and resources for development, implementation, and maintenance. A limited budget or insufficient staffing can make the implementation very complicated.
A design system requires continuous updating and maintenance to keep pace with changing requirements, technologies, and design trends. Without adequate resources and maintenance processes, the design system can become outdated and lose its effectiveness. Overcoming these challenges successfully requires a clear vision, engagement at all levels of the organization, and clear, effective communication to ensure good collaboration. True collaboration takes the most advantage.
Design systems aren’t just beneficial for designers, developers, product managers, and the rest of the team working on digital products. They’re also a win for users, customers, … people. People are used to certain patterns when navigating an app and expect the same approach for the same tasks they need to solve in a customer journey. As we all know, consistency makes your experience smoother and more intuitive.
