Design Systems 101
A quick primer on a modular approach to digital design
If you are thinking about creating an ecommerce website, mobile app or any other digital experience, a design system is a critical component that's often overlooked. In this article, we'll talk about what a design system is, what the benefits of one are, and how to create one.
What's a design system?
Let's start with the basics and define what we mean by a design system. The short explanation is that a design system is a set of components (buttons, the navigation, input fields) and guidelines that your organization uses when making digital products. It is a consistent system, so every product produced by your organization, whether it is a website, mobile app or kiosk, looks and functions the same. With consistency, your products work better, they're faster and easier to build, and your customers understand how to interact with your company, because once they learn a set of rules, it can be applied everyone. And, a strong design system articulates and communicates your brand to the world. Done correctly, the design system is consistent with everything the brand puts out in the world, whether it is a print brochure, TV ad or packaging. The brand is one coherent universe, with everything working together in harmony.
For example, if you have a button on a web page, that button should look and feel the same, no matter what web page it is on, or if a button also appears on an app. People then learn how to quickly recognize the button and how it feels when pressing it, and the user gains confidence in a brand when that feeling also happens every other time they see and click on a button. Similarly, every article on a content site should be consistent with every other article. Users then learn what to expect from an article on the site, and how to interact with it. The name of the game is consistency.
With consistency, a design system becomes a set of building blocks that designers and developers can mix-and-match to create great products. Instead of spending time rethinking, or recoding, buttons and forms or charts again and again, the wheel is only invented once and reused repeatedly. With less repetitive work, they're more time to focus on solving real users needs with a great experience.
And, design systems let us avoid situations like this—a big mess of random graphical elements, created an ad-hoc basis, resulting nothing but user confusion and wasted code:
Design systems provide several benefits to a digital initiative:
1. Efficiency
The primary benefit of a design system is efficiency. Take a very simple component... let's say a button. While it only takes a designer, let's say, one minute to create one, if we multiply that by 10x per day and 150 days per year, that's 25 hours just creating that same button over and over. Now apply this to not only buttons but checkboxes, search fields, and a million other things. You'll quickly notice that a lot of work can be repetitive, resulting in lost productivity. Design systems allow for the rapid prototyping of new ideas using existing, production-ready components. They allow teams to reuse designs and code, freeing individuals to focus their creative energy on new problems. While the initial work load of creating a design system may be bigger, because you have to spend the time designing each component, working out all the kinks, and then coding it, the long-term payoff is better. Just like compound interest, the earlier you create one, the larger the benefits will be.
2. Scale
Previously, the only way to scale productivity was to hire more people. More bodies doing work. But a design system allows us to be more efficient (as previously stated) and we're able to scale productivity without the complexity of hiring. It allows us to reuse components and work faster.
What's obvious to anyone that's ever worked on a project with multiple designers is that every new designer wants to put their mark on the work. Which means, paradoxically, without a design system, adding more designers generates diminishing returns, because each new designer wants to create something new. But with a design system in place there are certain things that can never change. That means designer energy is focused on creating truly new things by combining components. The result: every new designer means a constant increase in overall project productivity.
3. Onboarding
When you do add more members to the team, whether they're designers, developers or project managers, having a solid design system in place helps onboarding and lowers the learning curve. Let's compare a design system to a game of football. Since there are rules, new players and spectators can easily enjoy playing and watching the game. If there were no rules, game strategy, or player positions, the game couldn't flow as beautifully or be enjoyable to watch. The same applies for having a design system in place. With a design system, new hires can hit the ground running more easily because there's less room for ambiguity and confusion.
4. Better Software
Design systems allow companies to build better software more efficiently, because the same benefits accorded to efficiency, scale, and onboarding for designers also applies to developers. With a design system, a single piece of code can be utilized across many parts of the digital experience, eliminating the need to build the same component again and again. And if that piece of the design needs to change, it can be changed on one place and it automatically applies to all pages. In fact, the best design systems use code as the source of truth, so there's no variance between design intent and technical implementation.
5. Consistency
The previous benefits were related to internal operations; design systems also garners massive benefits from an end-user perspective. First and foremost to this is consistency.
A consistent experience allows the user to learn a certain set of rules about how an experience should function, and then apply it to the entire experience. That makes users more effective in using the product and completing their tasks.
Consistency becomes particularly important when products are build over a long period of time. As the product evolves, design needs change. With a coherent system in place, it becomes easier for designers to smartly evolve it to meet ongoing needs. This minimizes the chances that product changes break things, creating more consistency and usability problems.
6. Trust
When creating user experiences, trust an often overlooked variable. We focus on things like conversion and pleasurable experiences, but forget about the first step in the hierarchy of needs; we can't create a pleasurable experience unless we first make sure it's functional, reliable, and usable: in short, trusted. Inconsistent design sends a signal to users that there's something wrong with the experience; it isn't trustworthy. And if people don't trust an experience, they'll abandon it.
7. Accessibility
Designers have a love-hate relationship with accessibility. It is confusing that some of the color-contrast options are not accessible when our eyes tell us something completely different. It can be a struggle to understand how large a tap area actually should be. And screen readers create added challenges. But: Accessibility is important. It cannot be ignored.
Accessible design creates a better web for everyone. In many countries, making physical stores and services accessible to those with impaired vision, hearing, or mobility is a legal requirement. Slowly, this is making its way to the digital world as well. When Joe Biden was inaugurated, the White House published their commitment to a more accessible web.
A design system makes it easier to create accessible components from the very beginning. Re-using the well-researched, accessible color combinations is not only consistent, but it helps us in making accessible products.
8. Usability
As previously stated, trust comes from knowing what to expect. Better usability comes from repetition, as is often said, "familiarity breeds usability". With well-constructed systems, it's easier to solve a usability challenge once, make it repeatable, and then focus energy on the next one.
Creating Design Systems
While there are many approaches to building a design system, we believe the following process, called Atomic Design, is most effective for most organizations and digital initiative.
Atomic design is not a linear process. It's a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Atomic design is patterned after the natural world, where atomic elements combine to form molecules, and these molecules can combine further to form relatively complex organisms. Atomic design is a methodology composed of five stages that work together to create user interface design systems in a more deliberate and hierarchical manner.
The five stages of atomic design are:
Atoms
Molecules
Organisms
Templates
Pages
While we're not using all of the five stages in creating the design system below, you'll see we're using some of the same terminology to define the different steps. Let's dive into our design system process!
1. Define purpose and needs
First of all, we need to define the purpose of our design system and what needs we have internally. As with any solution, we need to start by understanding what problem we are trying to solve. I cannot stress enough that it's important that this discussion is meant for both design and engineering. A design system that only lives in Figma won't allow you to scale at full effect. Define a naming and file structure that works for everyone involved. Setting these pillars is the foundation of the system we're building.
2. Set tokens; color and typography
Start by defining the typography and colors that your brand uses. Set a type scale that works well, that's flexible, but is limited enough so it's clear when to use what. By setting our type and colors first, we can use these styles in all of our components and link them to the style library. That way, if we ever want to change colors or type, it'll automatically update in all of our components.
3. Define spacing and layout
It's easier to create components if we know what grid system they will live in. Setting the layout and grid spacing initially helps us a lot. We tend to use a grid system of 8px that is set up by intervals of, well 8px meaning spacing is 4px (0.5x), 8px (base), 16px (2x), 24px (3x), 48px (6x), etc.
4. Define shapes
Now it's time to get a little bit more visual and define shape settings, i.e. Are we using rounded shapes or sharp edges?
Now we have the essentials of our design system in place, naming structure, tokens, spacing and shapes. It's time to build our first component!
5. Build out first atoms
We'll start with the smallest components (i.e. atoms). They are made out of the pieces that we've just defined; shapes, text, and color. This could be something basic as a button or an input field. Atoms are components that can't be broken down any further without ceasing to be functional.
6. Build out molecules
Using our first atoms, we can piece together multiple atoms together to create a molecule. Molecules are relatively simple groups of UI elements functioning together as a unit. Think of a molecule as something that's a little bit more advanced yet still pretty easy to define. This could be a product card that includes an image, a button, and a text description or a search field that has two atoms combined - an input field and a button.
7. Build out organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. This could be a navigation that includes a search molecule, a login section, and navigation items.
8. Combine organisms into templates
Templates are a type of page or screen in your digital experience, and done correctly, a template is nothing more than a specific set of organisms arranged in a particular layout on a page. Work to create consistent templates for similar pages or screens on the site; so our principles of consistency are reinforced, and developers can build more pages with less code.
9. Populate templates to create pages
Finally, create final pages in your digital experience by populating templates with content that's relevant to a specific page. The principles of consistency and the embracing of a system should be similarly applied to content: photography and illustration should be of a consistent, defined style; animations should work the same way; copy should be written by following a set of editorial guidelines. While the actual content and pages are technically not part of the design system (they're the things the design system is used to build), it's important the design system is thoroughly tested with real content to ensure the system works as intended.
10. Document
Often overlooked or disregarded due to lack of time, documentation collects how the components are built and how they should be used. This is one of the most important pieces of a design system. Without good documentation, it's not a system; it's just a collection of components. Agree on the documentation within both design and engineering teams so there's a shared belief and understanding of the system.