University of Leeds is a large organisation. With over 39,000 students, over 9,000 staff and a web presence consisting of more than 1,500 websites visited by millions of people, our biggest challenges come precisely from this impressive scale. Every design component, every snippet of code, every plugin that we create needs to be stable enough to be rolled out across hundreds of websites.
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 of Design Systems are Google Material Design built in 2014, Carbon Design System by IBM (2015) and GOV.UK Design System (2018).
What is a Design System?
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, design system includes branding elements, colours, typography and tone of voice.
At the same time, design system is much more comprehensive than a style guide, because it is interactive, includes code and can therefore address all the cross-browser and responsive issues in a way that a static style guide simply cannot do.
Design system is also somewhat similar to a CSS framework such as Bootstrap, except it isn’t bland. Design system is styled to reflect the organisation’s brand and identity from the get-go, whereas Bootstrap-based websites require an additional layer of branding on top of Bootstrap code. Whilst 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 the 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 of a Design System
1. Consistency
For ultra-large organisations like 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 size organisations also find themselves in a situation where 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 in their nature is tedious and dull. It is unlikely to be adopted, or even read, resulting in user experience that is inconsistent and fragmented.
2. Reduced waste
In addition to better user experience, there are efficiencies to be made from introducing design system into the development workflow. Design system allows for better re-use and iterative development of design patterns. It prevents organisations from throwing away all the code redesign after redesign.
3. Better content modelling
Design system helps organisations to move away from page-based content modelling and ‘pixel pushing’ into a more sustainable way of creating content for a range of devices and uses. Design system makes it clear from the start that the design components will not look the same on different screens and devices, and discourages marketing teams from fixating on configurations of their choice. It reinforces better abstraction of content from the presentation layer, something that increasingly popular headless webcontent management systems encourage as well.
Challenges
Whilst design systems have many benefits, implementing a design system in a large organisation is not easy. Key challenges to be aware of are:
- Getting everyone on board and establishing ongoing effective communication with other teams;
- Implementing the same design system across a number of digital projects with potentially different technologies under the hood;
- Design and front-end team can become a bottleneck for fixes and improvements that the rest of organisation relies on.
Conclusion
Design systems are made up of design components, code, rules and guidelines. They help large organisations to achieve a cohesive, consistent look-and-feel across a number 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 the 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