What Are Design Systems?
A design system is a library of reusable digital components with clear standards and specifications that enables designers and developers to assemble websites and other applications with consistent characteristics across a wide range of platforms. Like Lego blocks, the components in a design system are assemblable in a myriad of ways, and yet deliver a consistent look and feel to a suite of digital products.
Design systems have been an ingredient in software design since before the advent of the web, but the term has only gained currency within the last decade, popularized by web designer and consultant Brad Frost in his popular 2016 book Atomic Design. Noteworthy design systems include Salesforce’s Lightning system, Adobe’s Spectrum, and the Global Experience Language (GEL) system used by the BBC across its many digital properties.
Why Design Systems Matter
Developing and maintaining a design system is a lot of work at the outset. However, doing so pays off in the long run in a number of key ways. Here are six advantages of adopting design systems for large organizations:
- Consistency – design systems ensure consistency in visual elements across multiple websites and platforms, which helps build trust among users when switching between digital properties.
- Efficiency – with a design system in place, design elements only need to be created once and then used in multiple settings.
- Scalability – design systems makes expanding to new sites and platforms easier by enabling the repurposing of design elements.
- Collaboration – design systems encourage (and are indeed predicated on) collaboration between designers, developers, content creators, and others involved in maintaining a digital presence.
- Maintenance and updates – when housed in a platform like Pattern Lab or Storybook, design system elements only have to be maintained and updated in one place for the updates to appear across all digital assets.
- Accessibility – design systems are conducive to accessible design by allowing elements to be fine-tuned for accessibility in one central place before being exported to all platforms.
Why They’re Hard
With all the above-mentioned advantages of design systems, one might wonder why not more large organizations use them. The truth, however, is that design systems are challenging to create and, for many organizations, difficult to maintain.
As previously mentioned, despite the many advantages in the long run, creating and implementing a design system represents a greater upfront cost in both time and money for an organization. It also requires a degree of centralized decision-making about what design elements to use across all platforms that may be difficult for many organizations with complex governance structures to facilitate.
Once a design system has been created, it needs to be maintained, and this requires a high degree of commitment. Changes in the technology environment and internal workflow have the potential to disrupt design system use, and there will always be the temptation for developers to just edit individual websites directly rather than working through the design system. For some, a design system may be seen as an unwelcome obstacle to creative problem solving.
The main reason why not more large organizations implement design systems (or successfully maintain them) is one of governance. At the end of the day, somebody needs to own the system and serve as its gatekeeper – ideally a design person – and many organizations lack such clarity in their structure and foresight in resource management. Organizations that create design systems but fail to maintain them typically do so because the system has no clear owner.
How We Help
At Chapter Three, we have considerable experience helping organizations of various types implement or expand design systems.
One such recent example is the work we did for the United Nations Development Programme (UNDP), for whom we designed and built a new online hub for their Human Development Reports Office (HDRO). The HDRO recently launched a design system that we helped them create, a process that involved migrating thousands of pages and files and restructuring the site's information architecture to create a streamlined content strategy that unified reports, blog posts, and news items using a revamped taxonomy.
Other clients for whom we helped establish design systems include the City and County of San Francisco and the Judicial Council of California (JCC). In the case of SF.gov, we advised them on how to use a design system effectively, exploring font usage, how to accommodate multiple languages, and how to maintain the desired look and feel across multiple sites. The JCC is a challenging organization from a design system perspective, as it encompasses 65 different court sites, each with its own demands, but the system we helped them build has proven to be a beacon for redesigning and replatforming its entire online presence.
Design systems: they’re challenging but when maintained they offer tremendous benefits. If you’re a large, multi-site organization looking to revamp your web presence and interested in implementing a design system, we’d love to hear from you. Contact us today and find out how we can help streamline your web design processes.