Create better digital products efficiently with Design Systems

A design system is essentially a collection of guidelines, principles, and repeatable components that form a company’s definitive approach to designing and building digital products. When multiple teams work on different parts of a product, or entirely different products, inconsistencies in the look and behaviour of these products become inevitable over time. The adoption of a design system aims to solve this by allowing teams to create better digital products that provide users with a consistent visual and interactive experience across the whole suite.

As well as enhancing the end-user experience, the building blocks and standards in a good design system also substantially improve the lives of design and development teams, delivering a range of efficiency and productivity benefits.

Let me introduce you to some basic terms around design systems:

• Pattern Library is a set of reusable components and interactions. It is a repository of buttons, modals, and page layouts. A pattern library relies on a consistent form and look. That’s why it is strongly connected to the second part of a design system - the style guide.
• Style guide focuses mainly on style (thank you Captain Obvious!), which means that they’re a repository of colors, fonts, logos, and any other brand attributes used in product design. Style guides and pattern libraries are frequently used by designers and marketing specialists.
• Code snippet is a resource used by coders (Captain Obvious strikes again!). It’s essentially a chunk of code representing styles and patterns included in the previous two repositories.

Pattern library, style guide, code snippet - this Holy Trinity of product design makes up a design system.

The main difference between a style guide and design system is the scalability and dynamism of the latter.

While style guides are static and closed, design systems are dynamic and expandable. As opposed to handing off a style guide at certain point in time, in design systems the collaboration between designers and developers is ongoing. It bring us down to the simple conclusion: design systems support agile methodology, whereas style guides seem to make for a better match with the waterfall approach. In consequence, it allows companies to save a lot of time and money.

It is important to know that a design system is far more than just a style guide or a pattern library created at a single point in time. It is a living, breathing ecosystem that evolves with a company, building a bridge between the design and development teams, as well as the end-users. To be a complete system, it must include both a design elements library and documentation.

Design systems are usually built from scratch and are created differently, bespoke to the needs of the organization. There are, however, common pieces that are present in all successful design systems:

UI/pattern library. The largest and one of the most important elements, is a pattern library. This is made up of page templates, UI components, and reference files such as Sketch files.

Code. These are the corresponding code snippets that create an implementation of the components in the pattern library. Teams are then able to pull this code into their products from a central repository. Coding standards plus guidance on versioning, and supported browsers and devices, should also be included.

Guidelines and principles. These are the foundations and design principles, such as accessibility targets, how animations should be handled, and rules on scaling and grids.

Branding. This is similar to a traditional style guide and covers elements of brand identity such as logo usage, fonts, the use of color, visual language, and marketing materials. Publishing guidelines may also be included to cover the brand voice, along with grammar and formatting preferences.

One of the most important things you should look for when selecting an agency is their experience and expertise in building design systems. A good agency will be able to show you examples of previous projects and their outcomes.

Cost is an obvious factor, but bear in mind that cheapest may not be best. Consider aspects such as quality of work, standards of communication, and how well they understand your business.

Finally, consider your relationship with the agency. You will be working closely with them so you need to know that you’re on the same page. Choose an agency that you feel comfortable with.

Asking what a role a design system plays is important, but the value of a design system is truly seen when you ask why.

According to the enterprise UX industry report, one of the greatest challenges is lack of design consistency which leads to expensive design debt.

From the same report, we also learn that collaboration becomes more difficult as developers outnumber designers. It probably sounds familiar to you if your company has not developed a proper solution yet. A well-crafted design system serves as single source of truth and provides the following types of business value:

1. Consistency across products

Want your brand logos to be echoed through into the default user avatars of your app? Your design system will take care of that. It will outline the process that a designer should take when designing something, and the standards to which he or she must work. The end result is your user having a smooth and consistent experience through all parts of your product

2. Clear guidelines

Regardless of the role in the company, a documentation enables comprehension for everyone. If you have ever wondered how to get product managers, designers and engineers on the same page, now you know the secret.

3. Design systems create a good working environment

Using a design system means that if your wonderful designer’s creative mind to goes off into some magic world and forgets the relevant font size, he or she will know how to find it. Your designers won’t be lost. They have an up-to-date play book to refer to if something isn’t clear. This in turn increases productivity and the happiness of your designer’s creative mind.

4. More efficient production process

Similar to our first point here. Whether your design team is you, one other person, or a team of 45, ensuring that they’re all on the same page is going to make the process much smoother. It not only helps prevent errors, but shows what to do in the event of an error - be it minor or colossal.

Long story short: Make your design system proactive to avoid a problem, rather than reactive, in order to fix one.

Now let’s focus on 3 primary roles that are present while shipping a digital product.

We have product managers, designers and developers. Each of them have different requirements and expectations. Let’s take a closer look from three different perspectives.

Finished product is a contribution of entire team

For a product manager, the most important thing is to deliver a working product with all the features that the customers want. They hate moving slowly, so the less time is spent on design and development, the better and healthier for the business.

From a designer standpoint, the wish list starts from having consistent designs by keeping track of the changes when more than one designer works on the same project. Being able to make some adjustments quickly isn’t less important, though. On the other hand, they hate seeing their designs disrupted by neglectful development. Even small things matter, because the difference between an excellent and a very good product lies in the details. As the product team gets bigger, the contributions generate inconsistencies. Centralized design version control might be a remedy.

Finally, the developers expect to get thoroughly documented designs, ideally with no further changes. They don’t want to guess what the designer’s intention was. They hate moving pixels back and forth. They want to work with mockups smoothly. However, often times it’s more like a struggle than a pleasant process.

Does it sound familiar to you? There’s no silver bullet for every problem a product team faces, though. However, based on our experiences, knowledge and our customers’ successes, having a design system is worth the initial investment. A design system is supposed to address those pains and reduce the friction in the process.

Think about your product and company for a while with the following questions in mind:

• Do you agree that your product’s user interface is consistent: it shares the same design basics and patterns?
• Are you happy with the overall pace of your product’s development?
• How much time and money could you save by cutting down the time needed for design and development?
• How much time and money could you save by reducing the time needed for cleaning up design and technical debt?

It takes only 5 steps to get started:

1. Do an audit - check all the designs that you’ve made so far and try to extract basic repetitive elements.

2. Organize the elements that you’ve extracted - build all three repositories I’ve mentioned earlier and create subcategories in every repository to make everything searchable and easy to use.

3. Put all of the elements in one place, easy to access for everybody engaged in the product design process - every designer, coder, and marketing specialist involved in the process needs to have equal access to all parts of the design system simply to work effectively.

4. Sell the design system to everybody in the organization - internal communication is vital to making good use of the system. If nobody knows about it and how to use it they simply won’t.

5. Always update your repositories - evaluate your stash every once in a while and make sure that if any new elements appear they are included in your repositories