‘Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.’ — Alex Schleifer, VP of Design at Airbnb
So, here’s a provocative question for you: Do you know how your products are made?
If you've ever searched for a design system online, you've likely encountered a flood of websites discussing it. Some portray it as a magical solution, while others reduce it to a collection of components meant to impress clients and showcase professionalism. It’s easy to see why some may dismiss the concept as hype, often stemming from a lack of understanding. Without a clear grasp of what a design system truly is, it's difficult to appreciate its value.
What is a Design System?
Let’s begin by breaking down the term. First, what is design?
In my essay Design Decoded, I define design in a business context as a structured process that creates a systematic plan of thought and action to solve problems and achieve a goal, serving an organisation’s purposes and positively impacting people’s lives.
And what is a system?
The term system comes from the Latin systēma, meaning a whole concept made up of several parts or members—a composition. With this in mind, we can agree with InVision’s definition: ‘A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.’ A design system has structure, meaning, and concepts—a cohesive set of elements that function as a unified family.
But does having a style guide or pattern library mean you have a design system? Not quite, though it’s a necessary foundation for building one. Is it just a bunch of rules? Not at all. Strictly enforcing consistency might not result in the best experience for users and could hinder adoption. A design system must balance consistency with flexibility. Each brand must determine what works best for them.
Consider cars: ‘Cars have different profiles and varied features to better accommodate different use cases, and each holds a slightly different identity. However, there are common traits between them, such as the grille shape, body lines, door handles, and instrumentation,’ says Ken Skistimas, Product Designer Manager at Facebook. These common traits are part of a system. Marco Suarez, Product Designer at InVision, adds, ‘Understanding not only the what but the why behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.’
A design system isn’t a new concept, despite its growing prominence in the digital world. Industrial designers have long used systems. Think of physical products like clothes, appliances, and furniture—these often belong to a ‘product family.’ When you buy products from the same collection, similarities in shapes, buttons, colours, and materials indicate they were created within a design system, ensuring consistency and identity.
Why Do We Need a Design System?
Digital design (product design) is still in its early stages, and we’re constantly learning. Just when we think we’ve figured something out, new competitors, technologies, and team expansions challenge our processes. It’s a fascinating and complex environment, and like industrial design, we need something organised, adaptable, and capable of evolving as we do.
Over the years working with digital products, I’ve observed one of the biggest challenges: maintaining consistency. Without a clear guide, teams can easily lose their way, leading to disjointed user interfaces and, consequently, user experiences that frustrate both creators and users. Think of a design system as the story of how your organisation brings products to life. What’s the story your organisation tells?
Dealing with Complexity
To manage complexity, a design system needs a shared language—a vocabulary everyone on the team uses. When creating a design system, keep in mind its broad audience. If it’s too vague or too technical, it might discourage people from other departments like marketing and sales. A good design system should be clear, inviting, and easy to use, helping everyone understand its importance. As Elizabeth McGuane, the Content Strategy Lead at Intercom, puts it, this is about ‘using the same language from code to customer.’ It’s a compelling perspective!
Words matter. Take a common scenario: a designer refers to an element as an ‘icon,’ an engineer calls it a ‘button,’ and the support team describes it as a ‘symbol.’ If designers, engineers, and the support team all use different terms to describe the same thing, communication breaks down, productivity suffers, and the product’s success is impacted. To avoid this, take a cue from Airbnb, where specific names were assigned to parts of their app within the design system, leading to smoother communication and more aligned workflows. A robust system facilitates interdisciplinary collaboration, enabling designers to engage in coding and engineers to participate in design.
Ultimately, the foundation of a design system is ensuring your brand is applied consistently across all projects. This is where Brand Identity comes in, as I’ll discuss in my essay The Role of Design in Shaping Brands. Consistency across all channels and products reinforces brand identity, just like Apple, whose ethos is reflected in every aspect of their brand, from commercials to customer service. This ethos—combined with all the guidelines and libraries—is what a design system is.
How Do We Build a Design System?
A Matter of Time
As Dennis Crowley wisely said: ‘The hard part is building the machine that builds the product.’ Building a design system takes time and involves several steps. Here’s a practical guide:
- Conduct a Visual Audit: The first step is to audit your current design. This helps identify problems and assess the time and resources needed.
- Create a Visual Design Language: This is the heart of your design system, comprising four main categories: colour, typography, sizing and spacing, and imagery.
- Develop a UI/Pattern Library: Clean up existing components and create new ones where necessary. This library will serve as your system’s backbone.
- Document Each Component: Proper documentation is essential to elevate a pattern library into a true design system. Clear guidelines help streamline implementation and ensure a cohesive, scalable system.
I can’t stress enough the critical importance of thorough documentation. While some team members may view documentation as tedious or unnecessary, skipping this step almost always leads to inefficiencies and confusion down the line. Without proper documentation, workflows can slow down, turning a streamlined process into a chaotic one. Teams may waste valuable time searching for code snippets or making simple changes, like updating a button's colour. This inefficiency can easily transform what is meant to be an Agile process into a FrAgile one, riddled with breakdowns and delays. Investing in documentation now will save you much greater headaches in the future, preventing miscommunication and keeping your development process running smoothly.
The Takeaway
Completing these steps doesn’t mean you immediately have a fully operational design system. Building a true design system takes time, sometimes years, depending on the product and organisation. However, starting with a pattern library is already a significant step forward.
As the Chinese proverb goes, ‘A journey of a thousand miles begins with a single step.’