Throughout this article, I will use the term design system, but you may have also heard the terms pattern library and style guide. All these terms can have different meanings to different people. In the context of this article, a design system is a collection of reusable patterns that can be used to build web pages.
My job as a web developer has transitioned over the years from building websites to building design systems that build websites. The final product is still the same, but there is a new layer to the process: the design system.
Design systems have become the hot new trend in web development. It seems like either everyone has one or is telling you to get one—with good reason. Design systems solve the problem of inconsistencies in large-scale websites. They become a one-stop-shop for reusable patterns, branding guidelines, and a single source of truth for project teams.
But, for all the benefits of design systems, there are also some very real challenges anyone embarking on a new design system should be aware of. Learn from these common challenges to make your move to a design system smoother.
Not Planning Your Design System Hurts
The planning process for a design system is involved. There are a lot of decisions that have to be made early on. Unfortunately, it’s hard to give all areas of planning the attention they deserve. In the beginning, some efforts may appear to be less important than other areas of a design system, like communicating branding and building components, when really they might have a larger impact on the overall project. Things like CSS architecture, naming conventions, and utility systems are closely tied to all areas of a design system and can be hard to change later on down the road.
How to Avoid This Challenge
It’s best to lay the groundwork for all systems, large and small, early on instead of trying to work them in after the system has been built. Remind yourself and others that deciding on and maintaining a system from the start is easier than having to completely refactor something later that was hastily thrown together.
Prebuilt Systems Are Difficult to Customize. Custom Systems Take More Time Upfront.
When building a design system, you can build something from scratch, or you can take advantage of a prebuilt system like Pattern Lab, Fabricator, or Drizzle. Prebuilt systems are great for quickly getting a project up and running, but they come with limitations. If you want to customize things you might find yourself spending too much time making a prebuilt system work for your project and spend less time building the actual patterns. This may even lead you to scrapping a prebuilt system to build your own pattern library platform.
How to Avoid This Challenge
Deciding what kind of design system you need early on can help you determine whether a prebuilt system or a custom one is right for you before you start building—it will save you a lot of wasted time and effort.
Design Systems Turn Bad Without Regular Maintenance
Design systems aren’t something you quickly throw together and then never touch again. They become a permanent part of your website that needs to be maintained and updated regularly, and someone has to own that work. A single person or an entire team might be tasked to maintain a design system. Those people will also become the evangelists and teachers for the system in addition to its maintainers. Without this team, an outdated design system can become an obstacle that you find yourself working against.
How to Avoid This Challenge
This means a portion of time and budget will have to be allocated just for the design system well beyond the initial creation—and the amount of time and budget allocated will impact the scope and capabilities of the system. Determining what you can devote to a design system up front can prevent overbuilding a system that can’t be properly maintained.
Losing Perspective
Usually, you view a website as a series of pages because that’s the end product. But when you throw a design system into the mix, you stop seeing your website as pages but as series of components. This change in mindset can lead to a variety of the following issues.
Incohesive Patterns
You don’t get to see how things work together until they finally live on a page with each other. By building patterns in a compartmentalized way, you might find yourself creating a system of components that look great on their own, but visually, the patterns might not look right side-by-side, or technically, they might not be built in a way that they can live side-by-side.
Unwieldy Components
It can be difficult to enforce how things work together in a system of reusable components. While a benefit of design systems is that it is easy to add reusable patterns to pages, an unfortunate side effect is that you lose some control in determining where and how that pattern gets used. Patterns developed for a specific use might wind up getting used in a way they weren’t intended. Reusable components are a key benefit of a design system, but they also have the potential for negative effects.
Poor Performance and Accessibility
When you build patterns out of the flow of the rest of the page, performance and accessibility can suffer. Accessibility friendly features like tab order can wind up being forgotten in the scheme of things, and rules and guidelines around performance are easily overlooked.
How to Avoid This Challenge
Developing and documenting a process for adding new patterns can help alleviate these issues. For each stage of development, create a checklist of requirements:
Has the pattern been approved by a designer?
Has the pattern been tested in the appropriate browsers?
Has the pattern been tested on a page with content?
Have all required assets been minified?
Are the required aria labels in place?
Have use cases and restrictions been well documented?
In addition to having checklists, someone on a design system team needs to take ownership of both enforcing the requirements and making sure that the process to validate a pattern stays up-to-date.
The Design System Isn’t Adopted
The larger the organization, the more challenging the adoption of a design system can be. When there are a lot of moving pieces to a website (or an organization’s collection of many websites), taking the time to refactor those pieces into a new design system can be a daunting task. There might be confusion or resistance from managers, designers, developers, or other stakeholders that don’t understand its value.
How to Avoid This Challenge
In all honesty, the larger the organization, the larger the need for them to have a design system. There are many ways a design system can benefit an organization, but each set of stakeholders is going to have unique sets of concerns. Understanding those concerns up front helps you to answer questions and share the benefits that individual stakeholders care about the most. Education is paramount.
Awareness is Key
Regardless of the project or approach, being aware of potential challenges is the first step to overcoming them. This is not an exhaustive list of challenges with design systems, but in my experience, these are many of the most common ones. However, they’re not reasons to avoid design systems altogether. Every project is different and requires its own set of solutions. Be aware of the potential challenges and go for it.
