Design Systems (Smashing eBooks)

by Alla Kholmatova

A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product.

“Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem.” — Christopher Alexander, A Pattern Language

A set of interconnected patterns forms the design language of your product’s interface.

When the design language is shared knowledge, you can stop focusing on the patterns themselves and instead focus more on the user.

Functional patterns are represented as concrete modules of the interface, such as a button, a header, a form element, a menu. Perceptual patterns are descriptive styles that express and communicate the personality of the product visually, such as color and typography, iconography, shapes and animations.

For example, a button is a module with a clear function: allow users to submit an action. But the typographic style in the label of the button, its shape, background color, padding, interactive states and transitions are not modules. They are styles; they describe what kind of button it is. From a front-end perspective, modules always have a basis in HTML, and perceptual patterns are typically CSS properties.

The effectiveness of a design system can be measured by how well its different parts work together to help achieve the purpose of the product.

If it takes too long to build a new area of the site because patterns have to be recreated from scratch every time, then we know our practices can be improved.

By establishing a few grounding values and principles.

design principles are shared guidelines that capture the essence of what good design means for the team, and advice on how to achieve it;

but something that offers actionable advice

Let’s take a look at a couple of examples of design principles and how they can be made more practical. Vague: “Make it clear.” Practical: “Only one number 1 priority. What do you want your users to see and do first?” Vague: “Make it simple.” Practical: “Make it unbreakable. Just like a children’s toy, make sure it is designed for exploration and impossible to mis-tap.”6 Vague: “Make it useful.” Practical: “Start with needs. If you don’t know what the user needs are, you won’t build the right thing. Do research, analyze data, talk to users. Don’t make assumptions.”7

Good design principles help to work out priority and balance, even if there are conflicting factors to consider.8

“A design system should have guidelines for: perspective, point of view, extending creative direction to everyone that decides to build something with the design system. That stuff should be baked in. Otherwise, we all might as well use Material Design and call it a day.” — Dan Mall

Airbnb’s four design principles (“Unified,” “Universal,” “Iconic,” “Conversational”) are deeply engrained in its design process: “When we design a new component, we want to make sure it addresses all four of those. If we didn’t have a set of principles it would be difficult to agree on things. We want to make sure each piece lives up to it.” — Roy Stanfield, principal interaction designer, Airbnb

Start with the Purpose Design principles must support the larger purpose of the product and help express the product’s ethos. If you aren’t sure where to start, look first at your company’s overarching values or a product vision, and then try to work out how design principles can contribute to that larger goal.

Find Shared Themes If you’re still in the process of defining your principles, a useful exercise is to ask a few team members (or everyone, depending on size of the team) to write them down individually. What, in their opinion, does good design mean for your product? How would they explain it in five sentences to a new member of the team, in a way that’s practical and easy to grasp? Ask them to find a practical example in your product’s interface and include it alongside each principle.

Focus on the Right Audience A surefire way to end up with vague design principles is to have no idea who they’re for. Are you writing for a corporate identity brochure? For the company website? A careers website? Potential partners and customers? Try writing your principles for yourself and for your colleagues, first and foremost: designers, developers, content producers, marketing professionals, domain experts — people directly involved in the creation of the product. Aim to come up with an informal agreement on what constitutes good design for your product, and offer practical guidelines for achieving it.

Patterns are the physical embodiment of the behaviors we’re trying to encourage or enable through the interface.

Create a Pattern Map To map out your customers’ needs, goals and motivations you might have done customer experience mapping2, “job to be done,”3 or a similar exercise around customer journeys. The outcomes typically feed into the early design explorations and prototypes. At this point, there’s usually a fairly clear understanding of the behaviors we want to encourage or enable in our users: learn about a course, join a course, engage in a discussion. But once we focus on the interface, sometimes we get lost in the details. We spend time making the most impressive page header, forgetting what this header is for and how it affects the user in different parts of their journey. In other words, we lose the connection between user behaviors and the exact patterns that encourage or enable those behaviors. To see how your patterns fit into a bigger picture, try to map some of your core modules to the sections of a user journey. Think about what each section is for and what behaviors it’s designed to encourage.

For FutureLearn, it was primarily focused on three areas: discovering content, learning on a course, and achieving a goal. Some of FutureLearn’s functional patterns mapped to three key stages of a user journey. Keeping this map in my mind helped me to think in families of patterns joined by a shared purpose, rather than individual pages. For example, instead of designing a course list page, I’d think of the “Discovery” area as a whole. What are the behaviors we need to encourage at this stage of the user journey? What are the patterns that can support those behaviors? Where else on the site do they exist and how do they work there? If it’s a new pattern, how does it contribute to the whole system? Thinking of all these questions is part of designing systematically.

View Patterns as Actions To understand the purpose of a pattern, try focusing on what it does rather than what you think it is. In other words, try to find an action that best describes the behavior a pattern is designed for. Describing a pattern with a verb rather than a noun can help you to broaden potential use cases for a pattern and define its purpose more accurately.

Say you’ve introduced a simple module to promote an online course. If you try to describe what it is, you might refer to it as “Image header” or “Course banner.” UI component promoting an online course on FutureLearn. But by describing a pattern in this way, you could be making it too specific to its presentation or content. You might end up limiting its use to a particular context. On the other hand, if you define it in terms of actions — from your user’s perspective as well as your own — you can uncover its purpose: “Promote a course” and “Discover a course”; and “Get inspired to join a course” and “Encourage people to join.” By focusing on the action, you connect pattern with behavior and keep it open for various use cases. What else can this pattern promote? An online discussion? A new event? The name you give it should also reflect this. In the example above, we named the module “Billboard” to reflect its action-focused, promotional function.

The purpose determines everything else that follows: the structure of the pattern, its content, its presentation. Knowing the purpose of the pattern (knowing which behaviors it’s designed to encourage or enable) can help us design and build more robust modules.

In digital products, signature moments are not always seen as a requirement, and some teams struggle to prioritize them.13 But it’s the small details that can add an additional layer of depth and meaning to the experience. In our efforts to systemize and structure design it’s important to be conscious of the details that make something feel distinct. In a design system, there always needs to be space to nurture and evolve those moments.

Good Names Communicate the Purpose The best names offer guidance or inspiration for where to use a specific pattern. It’s easy to remember there can be many minions (on a page) but only one boss. People enjoy using them and we don’t need to enforce guidelines because they come with the name. Even a few names like this can help make your vocabulary more compelling, and the team will be more likely to use it and contribute to it.

Summary In this first part of the book we’ve talked about establishing foundations for a design system. Here’s a summary of the key points. Purpose The purpose of a design system is to help achieve the purpose of the product: “Cook a healthy meal in ten minutes”; “Spread the talks as far and as wide as possible”; “The right music for every moment.” Everything in a system — from how a team operates, down to the smallest pattern — should be optimized toward that purpose. Principles Teams choose how to achieve the product’s purpose through design. Their design approach and priorities can be captured in a set of principles: “Design for first impressions”; “Appropriate over consistent”; “Timeless, not cutting edge.” The more aligned the team are on their principles, the more cohesive the patterns they create. Patterns Through the interface we aim to help people accomplish certain goals and feel a certain way: learn a new recipe; focus on writing; feel productive; feel inspired. Our design intent is rendered through design patterns. Functional patterns support user behaviors and actions: “select ingredients,” “choose a recipe,” “follow recipe steps,” “rate a recipe.” Perceptual patterns focus on how a product should feel intuitively: “utilitarian,” “newspaper-like,” “openly enthusiastic.” The purpose of the patterns needs to be thoroughly understood by the team. Only then can we make sure it is interpreted as intended by our users. Shared Language The patterns should be connecte...