Our Process
Design System
Like a brand book, a design system is a collection of guidelines and standard elements (components) for designing and developing a digital product.
It addresses the questions and concerns of all those involved in producing a digital product. It streamlines design and development work, allowing teams to focus on more complex design problems.
UX/UI designers, graphic designers, product owners, product managers, business analysts, programmers, and content writers use design systems.
The importance of a design system
Using a design system becomes advisable when two products bear the same brand name (e.g., a website and an app).
It's simply essential for large organizations that own and develop a dozen or more digital products.
Its absence will severely influence the competitiveness of new products (the time and cost of their production may even be several times higher).
It also significantly improves the design and development workflow.
When will you need a design system?
The use of a design system is recommended when you start to notice in your company one of the following situations:
- UI developers implement UI components contrary to the design prepared by UI designers.
- User interface developers spend more time or the same amount of time on similar tasks.
- You don't test the quality and conversion of UI elements.
- You feel that the results of the design and development process in your project or organization are chaotic.
- You're expanding the team, and new team members will soon arrive.
- You want to organize or take the development process to the next level.
- Your company doesn't have DesignOps procedures.
The implementation of a design system in your organization will solve any of these listed problems.
Who uses design systems?
Despite stereotypes, design systems aren't a large expense, and the effort required by the organization can be compared to the work needed to implement an ISO standard. So, it doesn't matter whether your business is big, small, or very small; you can afford to create a design system.
The creation of a design system is a company decision, and then it becomes a process implemented into the work organization.
The best proof of the usefulness of design systems is the fact that all major players in the IT and Design industry have one.
The most popular design systems
Material Design System
Google developed the Material Design System, a collection of resources that is undoubtedly among the most popular and reputable. This system contains useful component sets in the UI and UX design processes. It also provides an array of implementations for the Android system, Flutter Framework, and widely understood web design.
Human Interface Guidelines
Human Interface Guidelines, created by Apple, is a comprehensive tool for creating digital products for iOS devices. It's a treasury of components and collections of best practices that allow a developer and a design team to create applications for every Apple platform, including visionOS.
Atlassian Design System
Atlassian uses its design system to create a smooth and intuitive user experience. This system mainly focuses on developing various user interfaces and includes guidelines regarding design and programming.
Carbon Design System
Carbon Design System is the work of the IT technology company IBM. Their design system encompasses code snippets, design tools, materials, and guidelines regarding user interface design. It also emphasizes communication with the community and the implementation of its recommendations.
Base Design System
Base is a design system created by Uber, which specializes in providing transportation services through its mobile application. It is an open-source toolkit for React components. Base also offers support for screen readers and is optimized to work on devices with a poor Internet connection.
DHL Design
DHL is one of the leaders in the logistics industry specializing in parcel transportation. DHL's design system concentrates on a consistent connection of brands under the company: DHL, DHL Group, and Deutsche Post Brands. In the description of the system, you can find, among others, the differences between these three brands and how to properly design elements to maintain consistency with the brand identity.
Ant Design System
Ant Group is an affiliate company of Alibaba Group. The group provides financial services and is the owner of the largest mobile payment platform — Alipay. The design system they developed aims to support product designers and allow them to deliver a better user experience.
Audi Design System
A design system developed by Audi, a German automotive manufacturer, was created to be a single source of truth, consisting of all the components and guidelines useful for product development. The goal of this system is to make the work of the product team more efficient and improve the onboarding process of new employees.
U.S. Web Design System
Did you know that the government of the United States has its own design system? We neither.
The government website, among other things, says that the design system was a foundation for websites such as NASA Glenn Research Center, the National Institute of Health Library, and the U.S. Department of Veterans Affairs. The system, in general, aims to make website creation more efficient for desktop and mobile devices.
Do you want to create a Design System?
What is a design system in UX?
Regardless of the form of presentation (e.g., on a dedicated website), the design system is a collection of the following elements:
- Descriptions of best practices
- Guidelines
- Design principles
- Rules
- Instructions
- Definitions
- Recommendations
- Methods of implementation
- Ready-made libraries
- Reusable components
- Design tokens
Among the most elementary components of a design system are rules regarding the following:
- Color scheme (tones, shades, gradients)
- Logotypes, trust marks
- Graphic elements (e.g., icons, pattern library)
- Navigation
- Rules for creating menus, interfaces, forms
- Website templates, subpages, screens (also in the programming sense)
- Grid systems
- Typography (font families and how they're used in different types of text and different contexts)
- Size of elements and their relation (e.g., proportion, distance)
By organizing information, a design system becomes a document that functions as a Single Source of Truth (SSOT).
This is of great importance because it excludes any arbitrariness or personal preferences.
It makes a project immune to changes resulting from introducing a new employee to the team or mutual misunderstandings of the goals and needs of specialists working on a project.
Breakdown of design system elements
We've listed the building blocks of design systems. Now, let's describe them in more detail.
Style guide
Style guides are implementation guidelines for interface design and other design components. They include visual references and design principles that make the design process more efficient. Typical style guides consist of branding elements such as color palettes, logos, typography, etc. They also contain rules regarding tone of voice and language.
Component library
Component libraries contain reusable UI elements such as buttons or input fields. Their goal is to make user interface design more consistent. Component libraries also speed up the UI design process because all the elements are ready-made and ready to go.
A component library usually consists of the following:
- Component name
- Description
- Attributes
- State
- Code snippets
- Front-end and back-end frameworks
Component names and descriptions are used to avoid miscommunication between designers and developers and to explain what a particular design element is supposed to be used for and how.
Attributes and the state of a component describe how the design elements can be customized and adapted. They tell you what size, color, or shape a particular component can have and in what contexts.
Code snippets are code fragments used for component implementation; sometimes, they're ready-made fragments that only require copying and pasting.
Front-end and back-end frameworks are meant to help with the component implementation and avoid debugging.
Pattern library
Pattern libraries are collections of groups of UI elements, for example, a contact form layout built from individual components. Similarly to component libraries, they're meant to speed up the design and make the website or other digital products more consistent. They also make it easier to structure content and make it more readable.
Accessibility guidelines
Offering accessibility features is crucial if you don't want to alienate a portion of the user base. Therefore, including accessibility guidelines in a design system ensures that your designs will be accessible to people with disabilities. This section of the design system should describe the use of color contrast, typography, spacing, alternative navigation methods that don't require the use of a keyboard, and more.
Design tokens
Design tokens are one of the greatest advantages of design systems. They eliminate the need to use hex codes or pixel values to define the appearance of a particular element.
Let's say that you want to define a design element, so you give it the following name: "primary_color_border" and assign it a particular shade of blue. Then, whenever you or your team want to use it, you don't have to enter the specific value of the color, only the name.
Additionally, design tokens make it easier to change the specifications of components because the only thing designers need to do is change the definition of the token, and the design automatically updates.
Design tokens ensure that the visual elements stay consistent regardless of changes. They may prove particularly useful if you plan to create a robust design system.
Application of design system
Various components of a design system can be used in different contexts and configurations.
Advanced, most detailed design systems also consider combinations of individual elements that are allowed, acceptable, and unacceptable.
In this sense, a design system differs from simple style guides or pattern libraries.
A design system is created for internal and external company needs (e.g., development, optimization, or product integration).
Customer benefits
It gives customers and users the knowledge to recognize a brand quickly, without problems.
It fits into their expectations and habits. Furthermore, it activates knowledge about using acquired products while consuming other brands' products.
A product family's visual (e.g., branding of a product and brand) and functional (e.g., way of working) consistency also increase user satisfaction.
The well-known design principle applies here—people like things that they already know best. It's not surprising.
Familiar products are predictable and perceived as safe. Moreover, the positive emotional reactions triggered in the past by another brand's product give the new product much trust and sympathy from the start.
A design system supports such attitudes and provides a clear suggestion for the brain. Our brains are very fond of pleasantly associated repetitions.
Internal benefits for organizations
For companies, this means major time, work, and money savings. The clarity provided by an implemented design system reduces uncertainty and the need to inform about changes and confirm and consult them constantly.
A team works within a common reference point, a common set of rules applicable to all specialists.
In the case of product development by external organizations, a design system also prevents unwanted changes.
Design systems enable companies to replicate design work quickly and at a scale, which is the primary purpose of reusable components. The team can then focus on new interface elements or other parts of the design.
Moreover, ready-to-use UI components allow user interface designers and developers to concentrate more on the functionality and optimization of the entire design instead of the visual appearance. This gains even more significance when your team works on a big project involving multiple screens. In such a case, an effective design system will allow you to properly optimize workflows, improve the user journey, and establish clear information architecture.
Design systems make cross-functional teams' communication more efficient and effective. They don't have to waste time discussing the appearance and functions of a given component because everything is meticulously designed. Additionally, they reduce the possibility of miscommunication.
Design systems are mainly (but not exclusively) helpful for large organizations that focus on various products under their brand. They make the product more visually consistent and ensure that all the teams and departments follow the same design principles and recommendations without constant communication. Moreover, design systems make it easier to manage potential redesigns and rebrands.
Effective design systems also allow faster onboarding of new employees and can be valuable learning tools for less experienced team members.
The most important advantages of a design system include:
- Psychological effects — sense of order, control, predictability, meaning, and purpose
- Ability to test and continuously optimize
- Lower development costs
- Reduction of optimization costs and implementation of new products
- Chaos control — more straightforward, more effective project management
- Visual and functional consistency
- Savings of time and work
- Increase in productivity
- Improved communication by using the same definitions and patterns
- Positive user experience
- Development through optimization (iteration) instead of revolution (working from scratch on each element)
- Scalability of elements
- Faster implementation of new employees
- A consistent, stable, recognizable brand identity (common style provided by a style guide) is what will distinguish it on the market
- Repeated use of individual elements
- Common perspective and a shared knowledge source among stakeholders
A design system is a tool that should be developed and optimized in parallel with product changes, user needs, and the brand itself.
An iterative method of development is both less costly and much more flexible.
A design system created by such a method can adapt to changing market conditions and user needs much faster.
Before you create a design system
Design systems have an abundance of benefits that not only positively affect the company but also customers and users. However, some disadvantages need to be mentioned because being aware of them will help you adapt the design of a design system in a way that most suits your business.
The more robust the design system, the more maintenance it demands. Maintaining a comprehensive design system can be time-consuming and resource-intensive, so keep that in mind while developing it.
Team members may struggle to navigate a design system at the start. The initial difficulty will fade with time, and more senior members can educate new talent on how to move within it. Ultimately, it will shorten the onboarding process.
After the design team's development, your business may encounter an issue with design stagnancy. You may feel like the design system limits your creativity and ability to come up with novel ideas. That doesn't have to be the case. You only need to remember to keep your team motivated and inspired and remind them that the design system doesn't prohibit the creation of new ideas.
The same goes for exploration and research. Having standardized components and market-proven practices doesn't mean there is no place for innovation. Alternative ways and approaches should always be explored and tested not only because they will make your product unique but also because you may stumble upon ideas that can improve standardized solutions, regardless of whether you will improve them in terms of design or functionality.
Creating design systems
Creating a comprehensive design system requires a great deal of meticulousness. On the other hand, it is impossible to avoid systematic updating.
Work on a design system should begin by preparing a list of the most common and frequently repeated components. You should review them, check consistency, describe the rules, and identify acceptable exceptions at this stage.
Pursuing comprehensiveness and continuously revising it is the primary method of working on a design system.
Equally important are nomenclature issues, clarity, and unambiguity of used terms. Therefore, it's very important to provide definitions in every questionable case.
It's also worth paying close attention to the relations between the various elements (for example, between the typographic scale and the interface).
We describe in detail what we do when designing design systems on our service description page.
A design system should operate on the logic of cause and effect, considering the advantages and disadvantages of given uses and connections. Any graphic elements that play an informational or instructional role (icons) should be tested before being added to a library.
The legibility of their role and the information and instructions they convey should be the same regardless of the context of their use.
For example, the same icon used on a website and mobile app may have different legibility levels.
Three ways to create design systems
According to the Nielsen Norman Group, there are three ways to use and create design systems.
The first two approaches to creating and using design systems are to adopt or adapt existing ones. Your organization can adopt many open-source design systems to minimize costs and simultaneously keep your designs on a high level. For example, you can use systems like Material Design, Lightning (Salesforce), or Spectrum (Adobe). Naturally, adopting an existing design system may result in lower brand recognizability.
If you want to differentiate your product from the competition, you must adapt and customize the design system to fit your needs. This will increase implementation time but allow the team to add touches to make the brand more recognizable.
The last approach is to create a design system from scratch. This solution gives you the most flexibility and customization options, resulting in a unique and identifiable brand. Creating a custom design system takes the most time, effort, and money. Therefore, you should carefully consider whether to embark on this journey. Design systems are meant for companies that know that future design work will grow in quantity and that having ready-made and reusable components will ease the burden.
Competencies of the design system team
The design system team should include UX and UI designers, front-end developers, UX researchers, UX writers, business analysts, and QA engineers. Of course, this list is not a must-have, but you will need more specialists as your design system grows.
What kind of competencies should the design system team have?
Design system team members should be able to think systematically, understand complex structures and connections between various elements, and break them down into smaller, more manageable parts.
Design systems should be user and customer-focused; therefore, employees should reflect this mindset. This ability will allow them to create components that meet user expectations and needs.
It should go without saying that the design system team must know how to communicate efficiently and effectively. They must be able to voice their opinions and give feedback. Design system development is collaborative work and can't be created if the team doesn't know how to communicate its thoughts. This skill also comes in handy at the beginning of design system creation when you try to convince stakeholders that creating a unified system is a good idea.
You need people who know what they're best at and where their skills will shine the brightest. This leads to rapid development and design and allows team members to solve problems quickly. They know when to step in and help.
Remember, and don't forget!
Creating a design system is a typical "work in progress." Hence, it isn't possible to develop its final version.
A near-complete version may emerge within a certain time, but it's still capable of modification. Therefore, each design system must be regularly and cyclically updated.
Regular reviews of the design system will also allow it to be future-proof. This means that the guidelines and components within it will stay relevant, and the system will be continuously improved according to team members' feedback.