Keep things consistent for your design and product teams.
Design systems are an increasingly popular guide for product development teams. Many organizations across various different industries are finding huge value in having this tool readily available to them.
But before making an investment in creating a design system for your own team, it’s important to know what it is and what value it will provide to your workflow.
A design system is a centralized place to access documented guidelines, design assets, components and code. Design systems focus on more than just the visual presentation, they also cover the bigger picture for the brand.
Although there are a few other common terms floating around this subject – style guide, pattern library, component library – a design system is typically more robust and will often include these individual repositories.
If you’re a UX professional, product manager, developer, or just about anyone else involved in digital products, it’s helpful to have a design system available for reference.
Design systems should contain lots of helpful content for the design and ongoing development of your product. Before we get into the why of a design system, let’s get familiar with suggested design system content.
Please note: not all design systems are the same. Your team will have individual needs so you may find that you want to add more to this list or that not all items are necessary. It’s also important to note that creating a design system takes time and is a process. It’s okay to start small.
Because design systems have become such a key part of a team’s documentation, it’s only natural that it’s a popular topic and it’s pretty easy to find helpful information and examples from popular brands. Many companies have shared their design systems and have made them public, so you’ll find a lot of great examples.
If you’re anything like me, a few popular ones that immediately come to mind are from larger companies, but many smaller teams have created great systems too. These examples from Shopify Polaris, Mailchimp, or Salesforce Lightning are certainly great inspiration.
Take a look at the Shopify’s Polaris, which includes a lot of design information and best practices for creating apps
If you’re still not convinced, or you need more collateral to convince a stakeholder, here are five reasons why design systems are vital, plus a bonus guide to running a component audit.
Getting everyone and everything on the same page is the most important way to develop this valuable tool. Design Systems are great for onboarding new team members as well as serving as a guide for the team.
The onboarding process is key to a successful project start. Learning and becoming acclimated with the brand, methodology and its design components is important at the start of any project. How is a person just getting started with the brand supposed to determine the correct components to use? Having this centralized spot to reference the design information throughout the project helps the team build consistently designed products.
Before the concept of a design system was widely known, it was not uncommon to encounter a workflow like this:
One design document was found on Dropbox, maybe another style guide PDF on a company shared site and a working prototype somewhere that developers were using as a reference for styles. Once all assets were found, they’d be inconsistent and everything became a bit blurred when determining the ‘correct’ components. It would then become obvious that a centralized system would help everyone.
There needs to be a plan in place to provide a consistent experience and that starts with the design system. Consistency is important and in most cases, it takes going through an inventory process to achieve design consistency.
There’s value in the process of taking inventory. As products grow and change over time, there are usually some legacy components that have become out-dated, and when taking inventory it’s a perfect time to address those and plan for what will happen in the future.
Components are reusable design elements that promote consistency within a UI. Having a collection of components with usage guides, makes it easy for team members to see what components should look like. The Carbon Design System by IBM has detailed information about components and their use cases
To ensure all design components are correct, a component audit is part of the process when creating a design system. Committing to this audit leads to important product conversations.
During these conversations, it’s important to discuss what already exists in the UI, as well as, any missing pieces that need to be created. During this process you’ll have a better idea of what stays, goes, or still needs to be addressed. The team needs to to agree on what the correct UI elements are and what will be included in the design system. The purpose of the audit is to get rid of the one-off situations so the correct information is added.
Thinking back to the UI audits that I’ve participated in, a few things always seem to surface: conflicting color values, CSS style, and component inconsistencies (date pickers seem to always turn up). You’ve probably heard about ‘technical debt’, well ‘design debt’ is also a very real thing.
It’s hard to monitor everything during the product development process. It’s not uncommon to find similar shades of a color. At a glance, they’re almost identical in value but slightly different enough so you don’t know which one was the original. Buttons might have a subtly different styling or color values from one place to another, date pickers may be using a variety of different solutions, or there might be duplicate CSS styles.
Products and websites evolve and change over time and there’s a good chance that along the way, there were many duplicated efforts when implementing a solution. Unless you’re creating a brand new product, it’s no surprise that there are multiple versions of the same thing that may have snuck in.
Creating a detailed inventory in your design system as a single source of truth will help you establish a baseline. Having a system where all use cases are documented, centralizes things for your team.
It’s not unusual to find many similar colors used in a product. But which one is correct?
Now that things are consistent for your team, what about your users? Design consistency is key to a unified brand that provides users with an experience that is predictable and easy to understand. When components are used consistently, they know how to better navigate and use your product.
It’s worth mentioning that when a design system has been established, it’s more likely that the team will be mindful of adding new UI patterns. There’s nothing wrong with adding new patterns, but should only be done if there is a use case for it. For example, you may find that a new pattern tests well with users. It’s important to keep the design system up-to-date so anything new should be added and documented.
Trying to do more in less time is the key to streamlining and optimizing the team’s workflow. The process of creating a design system requires a significant time investment, but it will save time in the long run.
The investment will pay off when product teams put their time and energy into creating new experiences for their users rather than trying to track down documentation while trying to find the correct component. Multiply the process of tracking down scattered information by the number of devs on the team, and that is a significant amount of time. It’s much easier just to go to the design system to find the information.
Let’s picture this, you’re looking for a card component that has a footer in it. You have some recollection that there’s one in the application already, but all you’re seeing is a basic card design. After some time searching and asking others, you aren’t able to find a current example and you design a simple footer design. It looks good and you go from there.
After some time, as you’re in the application, you come across part of it that you don’t use a lot and there it is, sure enough, there is a card with a footer design that already existed.
It’s not uncommon to uncover a duplicate component, but it is a good reminder that a design system helps prevent this and saves you valuable time. Instead of unknowingly redesigning it, the design system has it documented. This is where the inventory process (mentioned above) really becomes important because you’ll want to track down every component and make sure there are no duplicates.
Design systems reduce the number of repetitive design decisions since the team can reference design components and how to use them. The correct designs are being used according to best practices. Rather than focused on details like this, designers can focus on other parts of the design process like research, improving functionality and future design strategy.
With a more streamlined process, designers can look ahead and put their focus on solving new problems.