As designers and developers, we’re often asked how to approach design systems—and when to consider using them. And like many aspects of user experience design, the answer will depend on the specific scenario at hand. That being said, there are a few ways to tell whether your organization needs to invest in creating a design system. Let’s review some of the most common ones.
You’re finding inconsistencies
The larger your website or digital product, the more likely it is that you’ll find inconsistencies. Over time, as different designers and developers add on to the product, they may not have the precise attributes of each element documented or top of mind.
One small variation of an element like a button can become two, and so on until it feels like a complete audit is needed to reign in these rogue variations. Worse yet, a designer could inadvertently deliver a screen with varying elements, and a developer could consider this an intentional decision and codify it into production.
Regardless of the cause, the result is always the same. Your site or product now has inconsistent approaches to its elements—from buttons, text, and heading treatments to form fields and links.
In this context, a design system provides a single set of rules for all your elements and their respective states that can be vetted and referenced by the entire product team. There’s also the added bonus of having your brand guidelines be followed more closely, and with less deviation.
ADK Senior Experience Designer Michael Connors explains the approach and mind shift this way:
“You can always build an application from scratch. You can sit down with a blank screen and just start writing code. Or you can sit down with a blank canvas in Figma and just start making buttons and other elements.
Think of it in terms of systematizing whatever application or product you’re building, and start to break it down into its fundamental components. By combining those components together to make more complex components, you’re ultimately working toward the creation of a very deep, reusable library.”
You’re evolving & iterating quickly
Agility and iteration have become common mantras of digital product design. In cases where product teams need to iterate and adjust quickly, it is beneficial to have a single source of truth for the treatment of interface elements. Without a true design system, designers and developers must rely on their shared Figma/Sketch files and trust both parties have the same understanding on how the interface should work.
In this case, a design system serves as a centralized reference point for interface elements. Any necessary changes can be implemented in a way that ripples through the system, informing the developers which attributes are the correct ones to reference.
Theoretically, a global adjustment to a color, input style, or text treatment could be mocked up, reviewed, and committed into the design system relatively quickly, with front-end changes following fast behind. In this regard, a design system can increase speed-to-market design iterations.
However, it’s important to note that design systems are an investment with a considerable ramp-up period. In the case of a recent design system we completed for a corporate client, they didn’t necessarily need a clean-up of some of their UI. What they needed was a central repository or library with a set of instructions that could be used company-wide. Something that ensured consistency.
Now, the client’s design system has owners for the instructions that can be accessed by copywriters, technical writers, and developers. It features multiple code libraries, which are owned and maintained, and it’s built for the long term. Any true, mature design system should be built for the indefinite future.
You have more than one digital property
These days, most companies have multiple digital properties: websites, web & mobile apps, etc. Without a design system to inform how the UI ties together, teams are left referencing multiple properties in the hopes that they’ll achieve parity between elements. This problem will only grow as your company houses more sites and offers more products.
The value of a design system for multiple digital properties is that it offers one central repository for all interface elements and rules, and is available as code snippets for use by developers to ensure continuity from one digital property to another.
You’re acquiring another company (or being acquired)
Whether your company has been acquired or your company is doing the acquiring, it’s likely the acquired company’s branding, design, assets, and components won’t adhere to or necessarily match the new parent organization’s brand guidelines.
In some cases—like Instagram and its parent company, Facebook/Meta—the parent company will let the acquired product continue operating without applying significant design changes. Essentially, the parent company finds the business attractive for various reasons and future opportunities and leaves the brand and interface intact to operate independently. A user could sign in before and after the acquisition and never notice a difference.
Logistically, things are far more complicated when a parent company requires an integration of features for the acquired one. As such, it’s actually the perfect opportunity to start building a design system.
Knowing that a product or website is not inherently aligned with the new parent property means you’ll likely be focusing on a good deal of UI refactoring. What better time to bring all of your properties into alignment with a single design system? Stepping back and reevaluating at these key stages can make integrations feel more natural and meaningful.
You have more designers & developers joining your team
A design system is necessitated by more than one person owning the interface and front-end code. A small team might develop a good rhythm and process without a design system, but the larger the team gets or the more properties they become responsible for, the harder it becomes to ensure consistency.
A design system can support a growing design & development team by providing that single source of truth for visual treatment and the behavior of common elements. In addition, as a design system is owned by multiple people, it can serve as a process-oriented way to vet new or redesigned elements before they make their way into the shared system.
That said, small teams shouldn’t feel daunted by the task of building a full design system right away. If your team is starting to grow but you don’t have the resources to commit to a design system just yet, start with a UI Kit and some annotations.
Senior ADK Experience Designer Alex Endsley says,
“An early design system could technically be a UI kit at its smallest scale, with more mature systems evolving and encompassing all of a company’s brand and product assets.”
In this case, a team could share a centralized Figma or Sketch design library with each UI component centralized and documented and consider building toward a fully developed design system over time.
Conclusion
We’ve explored a few telltale signs that it might be time for your organization to consider adopting a design system, and I’m sure there are probably even more out there. The benefits of a well-structured and maintained system help drive alignment, and consistency, and can bring teams together around a shared understanding.
But as we know, creating a design system doesn’t happen overnight and takes proper planning and resources to develop and maintain. Give yourself and your team the time and attention they’ll need to do it right, and you’ll reap the benefits for years to come.