This article was originally posted at Designer’s Growth.

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 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.

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.

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.

This article was originally posted at Designer’s Growth.

Research & Resources‍

When you like to explore the topic in even more depth, I’ve included the researched resources. Happy learning!

• Atomic Design by Brad Frost‍
• Design Systems — A practical guide to creating design systems for digital products‍
• Design Systems 101 — NNGroup‍
• 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 History of Design Systems‍
• Design Principles — InVision‍
• ‍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

Researched Design Systems

• Carbon Design System, by IBM — Carbon Design System
• Polaris Design System, by Shopify — Shopify Polaris
• Material Design 2, by Google — Material.io
• Lightning Design System, by Salesforce — Lightning Design System
• Human Interface Guidelines, by Apple — Human Interface Guidelines
• Fluent Design, by Microsoft — Microsoft Fluent Design (Fluent UI — Get started)
• Atlassian Design System, by Atlassian — Atlassian Design System
• Mailchimp Pattern Library, by Mailchimp — Mailchimp Pattern Library
• Spectrum Design System, by Adobe — Spectrum Design System

Quick introduction

First and foremost: Hey there! My name is Liam, a UX-UI designer stationed in Amsterdam, the Netherlands. I translate business and people’s needs, problems and project, into valuable, useful design-solutions. Practicing this at Linx-IT Solutions bv, a software development company that focuses on optimizing the marketing communication processes of large retail chains.

My love for interaction, visual, UX, UI design, and the psychological and cognitive sciences behind it stretches far beyond the horizon. Especially since I get to apply these on a range of unique projects while simultaneously upgrading Linx’ UX maturity.

The challenge of a commercial environment

Since this is a B2B2C environment within the retail sector, time-to-market and revenue is of the utter most importance. One of my principles is to always strive for the perfect process. Unfortunately, practice proves different, trade-offs are made on a daily basis.

“The project should have been done yesterday!”

~ Internal joke when asking for the project deadline at the end of the briefing session.

As with many other cases, there is little to no room for direct user research. After hours of reading articles, books, cases, and papers, in order to see if there is a solution to this problem, the doubt kicked in.

It felt like I was not fully executing my profession in the way I should, nor was there room for me to learn how to perform solid, contextual fitting user research in a professional environment. Nevertheless, since creative problem solving is one of our traits, I maintained the drive and proactively kept going.

Becoming an IxDF student

While exploring the web searching for solutions, the Interaction Design Foundation (IxDF) came up a few times. This was the place to be for articles that helped me solve the smaller design process challenges within Linx. Reviewing the contents of the courses a little later, was the deciding factor to contact my CEO. Since the CEO believes in and stimulates personal- and professional development, we registered me as a student. From there on, things changed…

Once my educational plan was established, I flew through the courses. Each course providing great explanation on different aspects where doubt ruled. But most importantly, it made me secure again on how to perform good user research, and what to do when there is little to no room for it.

Highlighting the User Research, Data-Driven Design, and UX Management courses in particular. These keep on assisting me and my organisation on a daily basis. Our design and development processes are continuously being improved, thanks to this invaluable knowledge.

So, what’s next?

As we speak, the learning curve is far from over. My end-goal is to fully complete the learning paths UX Designer, UI Designer and Interaction Designer that the IxDF is offering. Parallel to the courses, reading a lot of professional literature strengthens that knowledge even more.

I highly recommend the Interaction Design Foundation for everyone who wants to learn about UX and interaction design. If you are entirely new to UX, I’d suggest you start at the basics and work your way up, since the study material is ordered around experience and difficulty level.

Thank you kindly Interaction Design Foundation and everyone who made the IxDF possible.

And to all the students: Have fun learning, It’ll be worth it!