What is a design system exactly? What are its contents? When is a design system effective? How do we apply this theory in our project and team? What is its business value and return on investment? Brace yourself and let's answer these questions!
Design systems. For people in the creative branch and product development, this should be a familiar term. But what is it exactly? What are its contents? When is a design system effective? What is its business value and return on investment?
This article is based on my own experience building design systems, and grounded by additional research through articles, conversations, books and online resources.
There isn’t a one-way method to effective design systems. Even on the internet, there isn’t a unified definition of a design system. Only tons of similarities across those definitions. So we’re going to break it down.
One of the main predecessors of digital product design is graphic design. Design was born as an offline discipline. Printed communications were leading a few decades ago. Guidelines and style guides were created for these communications. These guidelines provided insight on how a brand should be communicated, look and feel. Design consistency flourished by informing those guidelines every time designers created new communications for that same brand. Which in their turn, made a brand highly mature, trustworthy and credible.
During the mid-2000’s, referred to as Web2.0, the way designers and developers approach design changed rigorously. The dynamics of online environments were an opportunity for a modular way of thinking. Parts of online products – such as websites, apps, software and systems – could be interchangeably or independently swapped around. Templates and configurations were created for supporting reusability of these parts.
This leads us to what is now known as a Design System.
A unified definition of design systems is hard to find. They are unique for each digital product as they can serve different target audiences, purposes and value creations. As are the traditional graphic design guidelines for each brand. I’ve blended the most comprehensive definitions below. We will go in depth as the story unfolds.
A design system is a combined set of principles, functional patterns and perceptual patterns that can be used as the building blocks for design at scale. Design systems are a tool to manage and accommodate the reusability – also known as modularity – of these building blocks. Design systems create a shared language, and thus shared vision for the digital product – and the business behind the product.
Like the definition, this depends on the product and business the design system is built for. These parts should be shaped to match the customer needs, business goals and brand identity. Holistic design systems should exist out of the following core parts.
Principles are established to articulate the purpose and values of the product. Decisions should be shaped by that purpose and values. Principles should be clear, actionable and specific. Having clear principles is crucial for them to work effectively, as they function as a compass for the design direction of the product. They assist in aligning all disciplines involved. Keeping them on track, in the right direction. Contributing to that shared vision.
Digital products can exist out of many functions. Depending on the purpose of the product, functions are combined in order to create a comprehensive, valuable solution for people. Helping people to solve their problems, and meeting their desires and needs.
Functional patterns are the tangible parts of the product interface. These are regularly referred to as building blocks or the more common term, components. The modular pieces. Functional patterns are there to spark desired user behavior. They include things like: buttons, inputs, carousels, cards, tabs, navigation, forms, and similar. The purpose of these patterns are shaped by informing the principles.
When you listen to a podcast about stoicism, you might feel enlightened. Motivated to practice its philosophy. While another individual finds it uninteresting till the part in which they quit after the first 30 seconds.
Or when you are on the road with your sibling and you two spot an enormous mansion, like the one of Tony Stark. You might find it fascinating to look at the villa and a smile appears on your face. While your sibling is disgusted. They think that money can be spent on something more useful.
You percept the podcast, and the mansion. Since we are people we feel emotions when we percept things. Perceptual refers to ‘perception’. Which is defined as ‘the ability to see, hear and become aware of something through our senses’.
Perceptual patterns define the aesthetics of the product the design system is utilized for. The brand language and identity are included. Perceptual patterns include things like: typography, iconography, color, illustrations, imagery, motion, tone of voice, and similar. They are applied to functional patterns to give them a look and feel.
Naming things. An activity or thought process which you either hate or love. In order to create a shared language, you need to collaborate with the team on naming patterns. Good pattern names are based on metaphors, have a personality, and communicate the purpose of the pattern.
When a user needs to see what progress they made, in a linear flow which includes several steps, we can name such a module ‘Progression bar’ or ‘Progression steps’. These may work. Although ideally, these names should be tested with users – primarily including the users of the design system, the team, and stakeholders. By referring to the patterns by their names, their adoption amongst the team becomes easier.
As we speak, we are creating a design system for a large travel and hospitality brand at the digital agency where I’m active. Since this is an ecosystem of multiple sites, we need to ensure good maintenance in relation to the design language and development efforts.
This results in a shared understanding across stakeholders and the team. In relation to customer needs, business goals and brand identity. This is where we see the return on investment for the business.
Design Systems - A practical guide to creating design systems for digital products
What are Design Systems? - IxDF
A comprehensive guide to design systems - Invision
Design System Maturity Model - Sparkbox
Design Patterns - Shopify Polaris
Web Content Accessibility Guidelines 2.2
The Main Pillars of Effective Design Systems - XD Ideas
How to Ensure your Design System Helps to Achieve the Purpose of your Product - Nick Babich