Could your business benefit from a Design System?

What are design systems and why are they such a big deal in the world of digital services? Would your business benefit from having one?  We'll get you up to speed on the topic.

These days, most companies’ products exist in an increasingly colourful collection of different platforms, operated by an ever-changing set of people with different areas of expertise.Even in simpler cases, a company might have an application, a website and a set of marketing materials. Bigger companies might have to incorporate a dizzying amount of services built and maintained by a large staff.

So how does one manage to keep all this together without descending into madness and chaos?

‍Design systems are here to help.

What are design systems?

Simply put, design systems are a collection of reusable components combined with clear instructions on how to use them in various situations. These components can be anything from visual assets and color palettes to UI components – or even things like recommended tone of voice for various situations.Ideally, a design system works in such a way that everyone working on the project will be able to easily create new content while being sure that everything stays consistent to the users and is easy to maintain.

Each design system is different because the goal is always to create the most consistent, fluid and easily maintainable system for the project at hand.

A great design system always features flexible and easily scalable documentation that let everyone in on not only how to do things, but also why they are done in a certain way in this particular company.

In the words of Github’s Diana Mounter, design systems are characterized by “rules, constraints, and principles, implemented by design and code”. Watch her eye-opening talk on the topic below:

What can design systems include?

Each design system is different because the goal is always to create the most consistent, fluid and easily maintainable system for the project at hand. But of course, there are certain high-level elements that most design systems have in common.

‍Visual language includes things like style, typography, the correct use of colour palette, layout, illustrations etc. The documentation should include clear instructions on how and when these should be applied in the product, and how they should be handled in different mediums.

Example: IBM's Design Language

‍Voice and tone for both the overall design and specific situations greatly dictate the feeling the users are left with. Does the vibe need to be formal or playful? In both visual design and copy texts, consistency is vital – regardless of whether you have 10 or 100 people working on the content.

Example: Mailchimp's Voice And Tone

‍Components are usually user interface elements, that can be used in different parts of the product. In web-based products, this might mean copying a few lines of HTML to implement the component. When the basics are documented well enough, the team can utilize the components and rest easy knowing that everything is done using the same logic.

Example: Google's Material Design components

‍Patterns define how common interaction patterns should work in your product. An example of this would be the way errors are displayed to the user.

Example: Google's Material Design patterns

“Having a shared Design System creates transparency so that everyone in the organization can see how design operates and what its intended direction is. Also, briefing new partners is more efficient, since the relevant content is readily available and it does not need to be created over and over again in an ad-hoc manner.

Design system needs to become an integral part of the working practices. This way, the team can work more efficiently and the Design System does not end up being an isolated documentation effort – which is typically doomed to become outdated and obsolete very quickly.”

— Mikko Ahlström, Suunto Oy

So why is this awesome?

Benefits you might experience when using a design system:

• Increase in efficiency and consistency on all fronts
• New team members can hit the ground running
• Designers are more aware of the common patterns when making changes - making it unnecessary to re-invent the wheel on a daily basis.
• Content creators writing and publishing new stuff are speaking with a common tone of voice.
• Front-end developers do not have to deal with spaghetti HTML that is implemented differently with each instance.

A design system is also a great overview of your product elements, and it builds a more holistic view of how everything is connected.

It's not all (consistently coloured) sunshine and rainbows

Building a working design system also requires understanding its weaknesses.A design system is not:

• A silver bullet for making consistently great designs. A design system makes designing consistent products easier.
• A magical solution to the company's internal chaos. It might take the guesswork out of simple things and make focusing on bigger problems easier.
• Necessarily always right. A design system must be constantly updated and it should be questioned, whenever its guidelines are correct or not.
  ‍

Building a working design system takes time and patience, and most of all: utilizing it must be built into the company's culture. This can take time. A design system that is not actively used or maintained is not a very good investment.

Building a truly useful design system

A design system should also be built considering the organization and the individuals using it, so mapping out the biggest problems as the starting point is a good way to go. Building a design system can be incremental, or it can be a huge undertaking that involves a lot of people.

Building a working design system takes time and patience, and most of all: utilizing it must be built into the company's culture.

It is crucial to remember that the goal is not to build a design system and then forget about it. Rather, the mission is to find practical solutions to practical problems - and document the solutions well enough for them to be useful later as well.

However you decide to do it, design systems benefit from being built by a team that understands all of its aspects and how to combine it as a whole. This is true whether you decide to build one with your existing employees, hire new talent or hire a company to help you do so.

‍Do you need a design system – or need help deciding if you need one? Drop us a line!

‍We created a design system for Hesburger – check out the case here.