Okay, Qub: how can companies benefit from the design system?

Design systems bring numerous benefits, from product efficiency to better collaboration. Moreover, they drive greater business results by allowing teams to spend more time solving real user problems.

UI Kit, design system, and design language — what is what, and which one does your business need?

Nick Vedenin, product designer at Qubstudio, clears things up in this interview. Enjoy your reading.

— Design System, Design Language, Design System Language, and UI kit — could you describe the main point of difference between these four?

Let’s start with a UI kit — it is a relatively simple set of files containing critical UI components like fonts, design layers, icons, and documentation.

A design system is a comprehensive, scalable, and continuously evolving collection of reusable components, behaviors, and branding. Simply, it’s a UI kit + rules + semantics.

Creating a system usually leads to creating a language alongside. That is why a design language and a design system language are both the different names of the same thing — a design system.

— What about UX guidelines — what are they, and do you present them in a design system?

UX guidelines are sets of recommendations & descriptions of how to apply design principles. Offering them in a design system is a good choice if we want to provide a positive user experience.

— Can you tell what’s the primary approach you use?

We offer atomic design as the basis — the approach that will help connect all the company’s digital products under one root. Such an approach is suitable for companies with various digital products used for similar purposes and with an almost identical target audience.

— Okay, and what are the parts of the creating process?

At first, we find out the framework our client wants to use, and in case of doubt, we offer Ant Design and Carbon. Then, we analyze the system & its products and create the scope of the components due to the business cases they cover. After, our team starts to unite the product’s elements & patterns. The last step is providing documentation —  and voilà!

— It’s clear with steps now. But how do you identify and prioritize the components?

Having realized the user journey, we review the functionality and pull the patterns out of it — that’s how we identify the components. Our team pays attention to whether the patterns solve the design problem connected with the business case, if they are related to the components, and whether it provides ideas for solving potential issues in development. The prioritization depends on whether it decides the designer’s team or the client’s. Thus, it may be of two ways:

1. When the client requests a particular prioritization of creating a design system, we set an individual plan based on the product needs.
2. Or our team begins with the Product Architecture and basic layouts, color palette, and typography, moving on to the buttons and dialogue windows. Then the work happens.

— What about the team composition? Do only designers create the design system, or is there anyone else engaged in the process? And whom should the customer involve?

There is a formula:
the ideal team for creating a design system = one interaction designer + one copywriter + one business analyst + some developers from the client’s side.

A designer takes part in online meetings,discussions with the client’s team and other design teams are involved to the work over the product. Such teamwork perfectly works in outsourcing companies as ours, but it is not the cure, and there are other team compositions too (e.g., when inhouse product design teams work over a design system).

— Are there some tips for the clients about what should be considered when creating the DS? 

My personal advice is for the client dev team to be highly open to the design one. There should be a strict and accurate plan both for the client and teams, as it is vital to understand stages and awaited results. We at Qubstudio always provide the client with such understanding, including arguments and explanations.

One more recommendation is not to be afraid of giving extra information about the very product. When our team knows its business goals, test environment, and production process, it will be easier for us to find out and avoid possible problems in different parts of the system.

— Now, we come to the value which a design system can bring to the business. Will you name a couple of benefits?

Time reduction is one of the main advantages, as thus, the product’s front-end development takes 15% less time. The time spent on the design & flow creation or updating is also reduced to 20-25%. Plus, the new features’ development, validation & testing will be much faster because the clients get a guide for these features alongside the design system.

If there are 2-3 digital products within one company and created under a common design system, the onboarding process will be faster, easier, and less “painful” for the customer. This benefit concerns the support team: the easier & quicker is onboarding — the lesser requests there are for support — the lighter is the support team’s workload.

The last but not least benefit is that with a ready-to-use design system, the client can develop their product for a long time without involving the design team. Sounds progressive, isn’t it?

— Seems like it’s a great time to make conclusions. How can you summarize the information below?

I must confess that with a design system, a business could grow as much as three times faster than competitors who don’t use a design system in product development. And at Qubstudio, we have vast experience in dealing with design systems for digital products of various industries.