Information Today, Inc. Corporate Site KMWorld CRM Media Streaming Media Faulkner Speech Technology DBTA/Unisphere
Other ITI Websites
American Library Directory Boardwalk Empire Database Trends and Applications DestinationCRM Faulkner Information Services Fulltext Sources Online InfoToday Europe KMWorld Literary Market Place Plexus Publishing Smart Customer Service Speech Technology Streaming Media Streaming Media Europe Streaming Media Producer Unisphere Research

Vendors: For commercial reprints in print or digital form, contact LaShawn Fugate (

Magazines > Information Today > June 2021

Back Index Forward
Information Today
Vol. 38 No. 5 — June 2021
Insights on Content

Design Systems: Benefits and Challenges
by Marianne Kay

The University of Leeds in the U.K. is an ultra-large organization. With more than 39,000 students, 9,000-plus staffers, and a web presence consisting of more than 1,500 websites that are visited by millions of people, our biggest challenges come precisely from this impressive scale. Every design component, every snippet of code, and every plug-in that we create needs to be stable enough to be rolled out across hundreds of websites.

Historically, many university websites went through redesigns every 5–7 years, with most of the branding and code built from scratch each time a redesign project took place. User experience across the university web presence was fragmented. It was defined by the priorities and decisions of the faculties and departments that were managing their web presence. In an effort to standardize the vast university web presence, university-wide branding guidelines and templates were developed. This made different university websites more consistent in terms of look and feel, but there was still work to do.

In 2020, in order to establish a more effective process for managing design and code for the university websites, work on the University of Leeds’ design system started. “Design system” is a relatively new concept. Some of the well-known examples are Google’s Material Design (built in 2014), IBM’s Carbon Design System (2015), and the GOV.UK Design System (2018).


A design system is a set of repeatable, reusable components and rules that can be rolled out across a number of websites and digital products. Just like a style guide, it includes branding elements, colors, typography, and tone. At the same time, it is much more comprehensive than a style guide, because it is interactive and includes code. Therefore, a design system can address all of the cross-browser and responsive issues in a way that a static style guide simply cannot do.

A design system is also somewhat similar to a CSS framework such as Bootstrap, except it isn’t bland. A design system is styled to reflect the organization’s brand and identity from the get-go, whereas Bootstrap-based websites require an additional layer of branding on top of the code. While Bootstrap can work well for smaller projects, having two layers of styling makes the codebase bloated and unsustainable relatively quickly. In essence, the idea behind a design system is to adopt the best parts of the following concepts:

  • Style guide
  • Template
  • Responsive patterns
  • CSS framework
  • Rules and guidance for content editors


The following are three benefits of a design system.

#1: Consistency

For large organizations such as the University of Leeds, using a design system to enforce consistency is the only sustainable way to achieve a cohesive user experience. However, more and more small-to-medium organizations also find themselves in a situation in which transitioning to a design system becomes an essential step to further growth. Using a static style guide document to describe design components that are interactive is tedious and dull. It is unlikely to be adopted, or even read, resulting in a user experience that is inconsistent and fragmented.

#2: Reduced Waste

In addition to a better user experience, there are efficiencies to be created from introducing a design system into the development workflow. A design system allows for better reuse and iterative development of design patterns. It prevents organizations from throwing away all of the code, redesign after redesign.

#3: Better Content Modeling

Design systems help organizations move away from page-based content modeling and pixel pushing into a more sustainable way of creating content for a range of devices and uses. They make it clear from the start that the design components will not look the same on different screens and devices, and they discourage marketing teams from fixating on configurations of their choice. They reinforce better abstraction of content from the presentation layer—something that increasingly popular headless web CMSs encourage, as well.


While design systems have many benefits, implementing one in a large organization is not easy. The following are key challenges to be aware of:

  • It’s vital to get everyone on board and establish ongoing effective communication with other teams.
  • It’s difficult to implement the same design system across a number of digital projects with potentially different technologies under the hood.
  • The design and front-end team can become a bottleneck for fixes and improvements that the rest of organization relies on.


Design systems are made up of design components, code, rules, and guidelines. They help large organizations achieve a cohesive, consistent look and feel across a number of websites. Design systems are more effective than old-school style guides and CSS frameworks; they speed up the development process and evolve in line with technology trends and changing business requirements. Effective design systems rely on clear communication—it’s not enough to develop and publish a design component; it needs to be released in a way that welcomes feedback and continuous improvement.

Marianne KayMARIANNE KAY ( currently leads a WCM team at the University of Leeds in the U.K. Prior to this, she led web CMS projects in large organizations, advised web CMS software vendors on product strategy and marketing, and worked with digital agencies specializing in WCM implementations.Send your comments about this article to or tweet us (@ITINewsBreaks).