Intro to Design Systems
Ten different shades of blue, twenty different button styles, UI that looks like it was made when dial-up still reigned: you notice it, competitors notice it, but most importantly…customers notice it.
We all use websites that look like they haven’t been updated in decades. How do you feel when using it? How frustrated do you get trying to complete simple tasks? How does that frustration make you feel about the company?
When a web or mobile application is frankenstein-ed together over years of disparate design updates, you can tell. It feels clunky, frustrating, and far from legitimate. And why wouldn’t it! We’ve all experienced the alternative. We know what an excellent web and mobile experience looks/feels like because we interact with it everyday. Google, Airbnb, Salesforce, Uber, Apple, and many digital native companies have invested serious time and money into providing a consistent and deliberate customer experience in all of their customer facing applications….and it works.
Design Systems in use
Tech titans have radically altered the average customer’s expectations of consistency and usability in software applications.
Their applications have the feel of modernity. They exude the thoughtfulness and attention to detail that went into crafting them. Consistency communicates legitimacy and usability shepherds engagement. These two solutions are a part of the secret sauce that these tech titans use to outpace traditional, non-digital-native companies. But how do they maintain this consistent experience across their applications?
Enter design systems
A design system helps these organizations develop and maintain brand-consistent applications at a faster and cheaper rate than traditional enterprise. In the context of Design & Operations (DesignOps), a design system is a centerpiece of what allows modern digital companies to scale, innovate, and react quickly to the market.
So...what is a design system?
A design system is commonly confused with a style guide. While a style guide is valuable and can contribute lot to the consistency / usage of a brand’s visual collateral, it is a limited tool. A design system expands upon the style guide by taking those same brand considerations and applying it to a set of UI components that can be used to rapidly produce software applications.
“ A design system is a collection of reusable UI components, guided by clear standards, that can be assembled together to build any number of applications.”
Source: Invision Blog
A design system has several different stages of maturity; it can start as a small component library and progress all the way up to detailed, multi-platform, reusable code snippets accompanied by visual style guidelines.
To start, let’s break down the definition:
“Reusable UI Components”
Nothing tricky here, they are exactly what they sound like: pieces of UI (form fields, modals, dropdowns, buttons, etc) that we use everyday. These pieces serve a function. Their functions can be varied: entering information into form fields, using a dropdown for navigation, or simply clicking a button to complete an action. Independently they don’t accomplish much, but together they can be organized into a more complicated application.
You’ve probably already seen different versions of UI libraries around the web. They are just a collection of these UI components that are designed and styled ahead of time so you can copy and paste the code into your projects. A perfect example of a component library is Bootstrap.
Bootstrap has a fantastic UI component library for creating simple, responsive websites. Its components follow best-practice usability patterns for responsive web development, and it has a comprehensive library of just about any piece of UI a developer would need to implement a design. The ease and convenience of pre-coded UI components have made Bootstrap the most used front-end component library in the world.
Now that we’ve built the foundation with the component library, let’s look at the next piece of the definition:
“…guided by clear standards”
The components are just a piece of the puzzle. A properly executed design system delves deeper into the details of both the usage and purpose of the UI components. One of the best examples of a design system that excels at clear documentation and usage guidelines is one you might interact with every day: Google’s Material Design.
Material Design’s reusable UI components, coupled with fantastic documentation of correct usage (spacing, padding, sizing, usability patterns, typography, etc), allows web and mobile developers to quickly create consistent, familiar, and highly usable applications for customers.
Specifications can range from pixel-based usage guidelines all the way to in depth code specifications for how components are supposed to be implemented. The benefit of having that level of specification means that we can rapidly produce applications knowing that we are adhering to brand guidelines and respecting basic usability as well. Which brings us to the last part of the definition:
“…assembled together to build any number of applications”
One of most valuable aspects of a design system is the flexibility it gives you to experiment and innovate. The more mature a design system, the quicker applications can be created to respond to market demands. The individual parts of a design system are only useful if they are brought together to solve a business problem.
Instead of having to create a custom solution for each new application, a design system allows designers and developers to confidently experiment with solutions knowing that brand consistency and usability are not being sacrificed in the process.
It’s difficult to predict what customers will demand a year, a month, or even a week from now. A design system allows an organization to spend more time listening to what their customers want instead of worrying about small, repetitive interaction and visual design tasks. By creating a design system, you are effectively automating a process that interface designers do each time they create new interfaces to solve a problem. Designers are empowered to spend more time exploring solutions and testing assumptions. Instead of focusing on the minutia of button colors, spacing, and other details, they can focus on solving the customer’s problem instead.
Design Systems from a strategic level
The deliverables of a design system seem like they solve/modernize a ton of common problems with product development (and they certainly do)…. but in the context of DesignOps, a design system is merely a tool. DesignOps is a representation of how your organization creates digital products; creating a design system without respecting the complexity of that endeavor can lead to failure.
A design system’s tangible deliverables should be the result of a larger, investigative effort to analyze and understand how your organization creates and maintains digital products. A deeper analysis into the product development culture and processes of your organization is absolutely critical for the creation of an effective design system. If a design system is not deeply rooted in an understanding of how your organization operates culturally and operationally, it will die.
