Getting Started with Design Systems — Part 1

Linn Vizard
Jan 29, 2020 · 8 min read
Image for post
Image for post
Illustration by Andreea Mica.

Design systems are everywhere these days. It seems that every leading technology organization has published a design system, including Salesforce, Shopify, Airbnb, Spotify, Google, and Microsoft. Design systems are even spawning their own specialized UX and product roles.

Image for post
Image for post
An example of a design systems-focused product design role.

So, how did all of this come about? Why are design systems suddenly so popular? And what do all of the terms like UI kit, design language, and style guides actually mean? We’ve put together this comprehensive blog post series to take a deep dive into design systems. Based on internal Adobe research, interviews with 15 experts from organizations like Google, Shopify, Slack, and more, and a survey of 12 designers working on design systems, here’s our back-to-basics guide.

Image for post
Image for post
Infographic by Andreea Mica.

A brief history of design systems

While design systems are enjoying a moment in the sun, and seemingly everyone is launching and evolving theirs, they are actually not a new idea. Andrew Couldwell, a designer who has written a book on design systems, says that “design systems are really nothing new. I’ve been working with them for the best part of a decade. They’re really an evolution of brand guidelines in some ways.” Shawn Cheris, a director of experience design at Adobe, agrees. “Adobe has so many products, and the brand team has always had to work to find ways from a visual architecture standpoint to make things feel like they come from one company.”

Going even further back to the built environment, Christopher Alexander started talking about design patterns in the 1970s with the 1977 publication of his book A Pattern Language: Towns, Buildings, Construction. His ideas on reusable design pieces within architecture have been an influence on the practice for several decades. In the 70s and 80s, brand guidelines like the one for NASA or the New York City Transit Authority outline how visual identity should be expressed, and are coveted collectors items today.

Image for post
Image for post
A page from the NYC Transit Authority Standards Manual showing examples of the arrow element. Image by Standards Manual.

Into the digital age, brand and visual identity guidelines continued to inform the online presence of websites and brands. With the proliferation of digital channels like mobile apps, marketing websites, web apps, and even voice applications, organizations have realized the need for a cohesive customer experience.

Why design systems, and why now

Now, in today’s digital context, we find ourselves in a time when UX and digital product design are taking center stage. Most organizations have realized the importance of digital as a way to differentiate from, or at least keep up with, their competitors. Enterprise organizations often have several digital product design teams working on different product lines and platforms. For example, in terms of consumer facing products, Airbnb maintains a web presence, an iOS app, and an Android app. Then there are also internal applications that are not public facing to consider.

Image for post
Image for post
Airbnb payment flow on web and mobile. Image by Airbnb.

In addition, this proliferation of digital properties and products across platforms means that content velocity has dramatically increased. “The challenge of content velocity is that designers have to do more than ever before. As a designer, everything I do has to scale — across screens, platforms, and people. All of this means that being a designer today is both exciting and daunting,” says Cisco Guzman, director of product management for Adobe XD.

Design systems are a logical move for organizations that find themselves creating products across web, various platforms, and form factors. They are a natural result of design teams trying to coordinate, while also recognizing the potential to reduce the duplication of work. Design systems are also crucial when it comes to driving consistency of brand and experience across products.

What a design system consists of

While there is no “one-size-fits-all” approach to design systems, there are usually three main items that many design systems include:

Image for post
Image for post
Mailchimp’s design system’s publicly available website covering design patterns, including code snippets. Image by Mailchimp.

Why are organizations investing in design systems?

Within design teams and organizations, the case for creating design systems is a compelling one. It’s worth remembering that design systems are not an end in-and-of-themselves, they are a means to an end and a way to achieve certain outcomes. Different organizations will have different priorities, but based on our research there are some common driving forces behind investment in design systems.

A very popular case for design systems is that of consistency. The desire to have a cohesive feeling brand and experience across multiple products from the same company is brought to life by a shared design system that can be implemented and used by many teams. Often, the need for consistency is determined by an interface or UI audit that showcases the very different UI styles that exist across a brand’s product, for example all of the variations in button styles.

Efficiency is another favorite rationale for creating a design system. Reusable, repeatable components and patterns allow design and development teams to speed up their workflows. They also reduce duplication of effort, as interface elements do not need to be re-created from scratch every time. With the popularity of design sprint approaches, reusable UI component libraries also enable rapid prototyping.

Design systems can also enable smoother collaboration across an organization. With a defined vision in place for the look, feel, and experience of digital products, teams have a better sense of “what good looks like” and can aim to meet an agreed-upon bar that has been collaboratively defined. Contributing back to the design system also allows people to be part of evolving their organization’s system. In this way, design systems can act as a trojan horse for shared vision and breaking down silos.

The four stages of design system maturity

When aiming to create a design system to solve for some of these desired outcomes, teams may go through several stages or levels in getting to a robust design system. Our internal research with Adobe customers and clients has uncovered four levels of designing and developing systematically. These levels are linked to the maturity of a design system approach:

Image for post
Image for post
Source: Lindsey Wallace, Ph.D., Sr. Researcher, Adobe Design Research and Strategy.

A design system glossary of terms

At each of the above levels of designing and developing systematically, there are various elements and components of a design system that a team might be using. The design field is notorious for arguing about semantics. With the term “design systems” gaining popularity in the last few years, people might be referring to a few different things. There are also debates about what makes a true design system.

Image for post
Image for post
Examples of the elements of a design system on a spectrum from designer to developer-owned. Source: Lindsey Wallace, Ph.D., Sr. Researcher, Adobe Design Research and Strategy. Infographic by Andreea Mica.

The goal of this glossary is not to produce rigid definitions, but rather to demystify some of the terms you will come across when talking and reading about design systems. Let’s break down some terminology you might hear:

Everything old is new again

Design systems are nothing new, and represent the digital evolution of the desire to use brand standards and design patterns to create products more quickly and consistently. For large organizations, they are a natural evolution of the tools that design and development teams use to ship products.

One of the most important things to understand is that “design system” is an umbrella term that can encompass many aspects and resources. Getting clear on language, and which aspects are going to be most meaningful to your team and organization, will help in any efforts to systematize design and development.

Continue to part two: The UX Designer’s Role in Design Systems.

Thank you to all of the people who participated in research, interviews, and surveys, and shared their deep knowledge and expertise. For more on design systems, download the Adobe and Idean e-book ‘Hack the Design System.’

For more unique insights and authentic points of view on the practice, business and impact of design, visit Adobe XD Ideas.

To learn about Adobe XD, our all-in-one design and prototyping tool:

Originally published at https://xd.adobe.com.

Thinking Design

Stories and insights from the design community.

Linn Vizard

Written by

Independent Service Designer. I ❤ glitter, cats, and deadlifting. Previously @Bridgeable @UsabilityMatters. www.servicedesignpaths.com

Thinking Design

Stories and insights from the design community.

Linn Vizard

Written by

Independent Service Designer. I ❤ glitter, cats, and deadlifting. Previously @Bridgeable @UsabilityMatters. www.servicedesignpaths.com

Thinking Design

Stories and insights from the design community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store