Benefits of a Design System

A design system can be summarized as a list of patterns, behaviors, and elements of a determined scope. This scope can be simple as one application, or it can be big as a landscape, such as Adobe Creative Cloud Tools. A design system is applied to simplify design decisions and provide greater consistency for users when using the determined scope.

Importance of a design system

A design system is a topic that divides people who work with technology. For some, it is a safe place where they can consult and quickly, and consistently, produce a new asset. For others, it’s a nightmare of standards to be followed, with complicated and specific rules.

But as it is said, “Good design is invisible”. And in the software design world, good design isn’t created from scratch, it is built based on what has been created, taking both what worked and didn’t.

And then starts to become clear one of the reasons why a design system is so important: ensure that successes are replicated and mistakes are avoided.

Furthermore, a design system is for designers the equivalent of a framework for developers. It facilitates the creation of interfaces, reduces prototyping time, and guarantees high-quality and pixel-perfect prototypes. This impacts end users who will have a better experience when using an application, better detailed in the next section, and also developers, as they have predefined, clear, and reusable standards, allowing them to focus on other aspects such as code quality, performance, security, and so on.

Advantages of a design system for its user

At IBM it is no different, and in the case of this article example, IBM Technology CPQ Landscape, these concepts apply perfectly. Several applications are part of the IBM Technology sales process, but the user does not care about the applications themselves, but about selling hardware machines. Therefore, keeping everything aligned is extremely important, as it brings benefits for these users such as:

Consistency

Worse than having to learn to use an interface is having to learn to use an interface over and over again. Identical elements that do different things, or even globally known elements that have a completely new behavior in an application, break the user experience and make it difficult for users to accomplish their goals. This is why consistency is so important, as it allows users not to focus on the application, but on their objectives. The basis of consistency is to standardize similar elements, behaviors, and concepts, turning them into predictable information. A well-made Design System is consistent, including the flexibility of its elements.

Focus on the process

Users don’t want to learn how to use a new tool or even how to maximize their efficiency while using it. They don’t want to learn the details of the many super cool features that have been designed for them. They want to do their job and get out of your application as quickly as possible. Therefore, a well-done design system allows users to understand your application more easily because it turns the application consistent. This allows them to focus on what is important to them: the file they want to download, the form they need to fill out, the request they want to request…

Carbon for IBM Technology CPQ Patterns and Assets Library (PAL)

One of IBM’s core businesses is selling hardware, including mainframes. As you can imagine, it’s a multistep process, some more difficult than others. To ensure greater fluidity in the process, CPQ program was created, which has aligned experience as one of its pillars. The UX Scouts, under Dai Lins management, created a Patterns and Assets Library (an extension of Carbon Design System) that seeks to make this aligned experience even better for those involved in hardware sales.

It all started with Carbon, designed by IBM to create a look and feel for its various applications. As it is a wide design system, it was necessary to narrow down some points to ensure that the CPQ landscape applications were similar, preventing them from looking like isolated applications, but rather parts of the same process.

Here it is possible to notice that following the landscape PAL it was possible to obtain a similar look and feel between the applications, reaching the expected point of experience alignment. With that, behaviors and visuals can be leveraged for users' mental models:

All tools related to hardware deals have the same look and feel, simplifying usage for users that need to use multiple applications.

Due to the consistency brought by the IBM Technology CPQ PAL, users can use the different applications without having to re-learn the different elements, since tables, buttons, modals, accordions, and other elements are used in the same way.

As users progress through the process, they face new information but are already familiar with its structure. Users do not need to learn to use a new interface they already have used the elements before.

Starting a PAL for your IBM application

Considering the previous example, these steps were followed and are recommended when creating a new PAL. They are flexible and if necessary, can be replaced or adapted to a different context.

1. First, you must have an easily accessible location for this documentation. You don’t need anything complex, as complexity will drive the PAL contributors away from keeping it up to date. You can use a tool such as IBM Publisher, already available to anyone within IBM, or use well-known tools, such as PowerPoint, and store it in Box. The important thing is to use a tool that is easy to edit and that allows for easy sharing.
2. The second point is the most critical: follow Carbon. Before starting to create patterns and behaviors for your application or set of applications, you need to understand how to use Carbon.
3. If you need something that Carbon doesn’t provide a clear answer to, then you may create a new element, but without leaving the base established by Carbon. An example follows:

CPQ landscape applications have a lot of information. Therefore, for a better user experience, the width of the modals was increased in 2 columns of the 16 pre-established by Carbon, totaling 14 instead of 12. This is a Carbon adaptation, but without breaking its basic concepts.

4. After creating or adapting something from Carbon to your application or landscape, it is necessary to document the specifications of your new element or behavior very well. What is new? What are the changes? What are the available options? How to replicate it? How to adapt it to new scenarios? It is important to document as much as possible, as in the following example for modals:

Any element or behavior that needs to be consistent on IBM Technology CPQ Landscape is documented and available to all designers working on these landscape applications.

5. Finally, it’s important to remember that a Patterns and Assets Library is living documentation. It doesn’t have to be done all at once, but updated as possible. You can add new points, as well as remove or update those that no longer make sense.

Summary

A design system, or a Pattern and Assets Library, is not created to make the software creation process difficult and restricted, but to facilitate and streamline it, with components and behaviors already established, described, and componentized.

Of course, in the beginning it will take some time to create it, but later on the performance gain for designers and developers more than outweighs the initial creation time.

Contact

Tales Abdo is an Interaction Designer at IBM based in São Paulo, Brazil. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.