The importance of a design system and how it saves your organisation both time and money

Consisting in design systems is among a lot of things components. Components can be a smaller, independent part, like a button or a form field, or a bigger one combining several components, like a hero or a footer.

Common for all components is that they not only show or describe how something should look — they are the components, with HTML, CSS and JavaScript that the developers use. The point with this is that the content can be reused over and over again in the development of new product or services within the brand. Not only does this save time, it also creates a continuity between different platforms and creates quality assurance for all deliveries.

The design system is the only source of truth
One major effect of a design system is that you can be assured that the user is always in focus. There is no room for anyone in a team to change something for its own discretion, which can be the case when the design phase is underway.

How does one showcase the behaviour of an interactive element? How does the navigation or different sets of tabs behave on different screen sizes? This is the type of questions that that gives the brand its digital look and feel. If you do this right, the brand will look and behave the same over all devices and the user experience will never be comprised.

The design system is build upon the principles and guidelines that control the brand. The modules are reusable over and over again to assure the same experience across all web pages, digital tools, apps and PWA:s.

To achieve maximal efficiency from this way of working you need to adopt long-term thinking. That’s why it is important that its the design system you always collect your building blocks from.

To always work from the design system might sound pretty obvious in theory, but in real life this is often a challenge. The larger organisation, the more power is needed to establish this way of working, and to motivate everyone involved to follow it.

Coherent design and functions
Coherency is key for both creating great user experience and to come across as a straightforward professional company. A few aesthetic differences between your app and your website is all it takes for a potential customer to start doubting your competence, and a few inconsistencies in functionality ruins the user experience. A design system with a library of coherent components will prevent that. This efficiently ensures that you get the same crisp expression across all your digital touch points today as well as tomorrow when you are entering new markets or offer new services. In that way, the design system helps to deliver cohesive and scalable features in a way that’s efficient for both design and development.

One example of this is Google’s range of products, who all look and feel the same although they do different things.

How do others do it?
To work component based with both visual design and front end development is not something new. But in later years this type of visual system thinking has been boosted by the likes of companies such as Google, who were early with publishing their design system Material design. Shopify, IBM and Atlassian are other companies who have implemented their own system.

5 benefits of a design system
Let’s break it down shall we.

1. You build it once, but you benefit from it forever.
2. Quality and continuity assurance with coherency all over your companies product range.
3. You can work agile and the component library can scale at any rate.
4. The brand is connected through all digital channels and products.
5. Your organisation will save time and money.

Want to read more on how we created a design system and several digital tools for our client Velove? Click here.

My name is Pontus Brenner and I work as a Product Designer at the digital studio Humblebee. There me and my colleague work with brands such as Polestar, Stena Recycling and Mölnlycke. Do you think a design system something that is could benefit your organisation, or just curious about the subject? If so, let’s have a chat.

Find out more at https://designsystem.humblebee.se/