CONTENT CLARITY
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).
WHAT IS A DESIGN SYSTEM?
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
BENEFITS
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.
CHALLENGES
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.
CONCLUSION
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 KAY (