Designer's Growth

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.

The History of Design Systems

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.

The Definition of a Design System

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.

The landing page of a fictional Design System.

The Core Contents of a Design System

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 – Design Direction and Shared Vision

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.

An example of a component documentation page - aslo known as a functional pattern.

Functional Patterns – How People Interact with the Product

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.

An example of a style documentation page - also known as a perceptual pattern.

Perceptual Patterns – Aesthetics, Look and Feel

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.

Shared Language – Team Alignment and Shared Understanding

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.

How We Apply this Theory in our Project and Team

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.

We defined principles to be the guiding values and purpose of the product. They are utilized as a starting point for all our design activities, as they align with the values the brand wants to communicate towards their customers.
Our perceptual patterns created in Figma translate into CSS styles, wrapped in Design Tokens. In our case, our design tokens translate to CSS variables. Which ensures that the design language is on brand, consistent across sites, and can be easily maintained by the entire team. This creates shared language as design tokens make abstract CSS clear and concrete for everyone.
The functional patterns are divided into individual Figma pages, which map precisely to the front-end Storybook environment. Improving find- and discoverability. Matching the conceptual models of our team.
All building blocks are strengthened by documentation, with concrete usage examples. This makes sure that patterns aren’t misused and stay on brand.

Return on Investment – Design Systems Accelerate and Impact Business

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.

Increases scalability for the business – All characteristics of the product are captured in the design system. Innovative solutions become easier to explore, test and develop, thanks to the modularity. Which increases the possibilities for businesses to scale.
Maintains brand credibility and product consistency – Design systems reinforce the credibility of your brand. Making it trustworthy and recognizable. It also reduces the cognitive load with customers when interacting with the product. Reducing the learning curve, and contributing to the retention of your users.
Aligns business goals with customer needs – Teams and stakeholders stay focused on the business’s vision, mission and values. Parallel to their focus on solving customer pain points, problems and needs.
Efficient cross-functional collaboration – Effective design systems foster collaboration among team members, resulting in better decision-making, faster feedback, and a more efficient workflow. It also helps to minimize misunderstandings, resulting in products of higher quality.

Key Takeaways

History – Derived from brand graphic guidelines, transformed for web compatibility. Focused on modularity of patterns and building blocks.
Principles – The guiding principles which create design direction and a shared vision for the product.
Functional patterns – Including the interaction patterns used to create the product.
Perceptual patterns – The aesthetics, look and feel of the product.
Shared language – Creating a shared understanding and aligns the team and stakeholders, by naming patterns and building blocks collaboratively.
Return on investment – Increases scalability for the business, maintains brand credibility and product consistency, aligns business goals with customer needs, and results in efficient cross-functional collaboration.