Summary

What is a design system? It's a a complete toolkit for managing design at scale, providing reusable 'components' and 'patterns' along with accompanying standards and governance.

Joshua Morris (Senior Front End Developer) explains what a design system is, why you should use one, and what the University has been doing to develop its own design system.

TLDR: A design system is a complete toolkit for managing design at scale, providing reusable ‘components’ and ‘patterns’ along with accompanying standards and governance.

Recently there has been a lot of discussion about how large organisations manage digital design at scale. Many of these organisations have brand guidelines created for printed media such as leaflets and flyers.

They also usually have large digital estates comprised of thousands of pages of content, presented in various ways such as different website page layouts and applications.

Digital teams responsible for the estate often try to apply strict print guidelines to this mixture of content, in a waterfall model, with varying degrees of success. Digital teams make their way through their digital estate updating brand, and then when print guidelines are updated, they restart.

As digital teams are generally smaller, how can you efficiently roll out and maintain a consistent brand across your digital estate?

Introducing a design system – a complete toolkit for managing design at scale.

What is a design system?

It makes sense if you think of a design system as a big box of Lego. Each Lego brick represents a “component”, a pre-made and consistent piece of your user interface, such as a button or heading. Once you combine some of these bricks, you create a “pattern”, a bigger part of a webpage that is reusable, such as a page header or hero.

You can assemble the bricks however you like, but your creations are always recognisable as Lego, providing a consistent brand application.

Emmet Connolly, director of product design at Intercom, describes design systems as “a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be”.

You may think this sounds like a website or style guide. But the critical difference is that a design system also provides accompanying standards, documentation and governance about how to use each Lego brick and combination of bricks. Imagine buying a Lego car set. This set also comes with instructions and guides on how to put the pieces together.

Why use a design system?

There are many benefits to using a design system, including:

• Consistency: Ensures your estate has a consistent look, feel and brand application. Update your components and patterns centrally, applying brand changes.
• Efficiency: Saves time and money by reducing the need to recreate the same design elements. New pages and apps combine existing elements.
• Scalability: Enables website editors and external parties to build brand-compliant user experiences with less reliance on a central team for individual pages.
• Collaboration: Improves communication between stakeholders and external parties. A shared set of guidelines and components allows everyone to “assemble the Lego” and collaborate more effectively.

Senior stakeholders typically connect brand changes with a need to rebuild the entire website. But following the correct technical architecture, you can roll out brand changes from a central location using a design system without a traditional waterfall approach.

If you consider a design system as a newly built home, you wouldn’t demolish and rebuild your house to change the bedroom wall colour.

Who uses a design system?

While most prominent tech companies use design systems, governments and higher education institutions are adopting them as a proven strategy for managing design and brand application at scale.

Some popular design systems include:

• GOV.UK, Design System
• Google, Material Design System
• Microsoft, Fluent Design System
• IBM, Carbon Design System
• University of St Andrews, Design System

Each design system is presented differently, with a different look and feel. Developers of design systems utilise various tools to help with rollout, documentation and management. However, each consists of components and patterns with accompanying standards and governance.

Despite the differences, design systems should be platform-agnostic and not tied to specific technologies. They are a living document, updating and changing as a brand, best practice, and technology evolves.

Overview

A design system is a complete toolkit for managing design at scale, providing reusable ‘components’ and ‘patterns’ along with accompanying standards and governance.

Building and maintaining a design system can be a lot of work, but it’s an investment that will pay off in the long run. With the right accompanying tools and guidance, you can enable teams to build consistent, brand-compliant user experiences efficiently.

We are pleased to introduce our new University of Bristol design system, ‘Paley’, named after our first female lecturer Mary Paley Marshall, who taught at University College Bristol from 1876.

We have been developing the system for several years, and it’s being rolled out across our digital estate. Paley is already providing sector-leading performance, and we’ll be sharing our learnings on our blog in the near future, including our rollout approach that utilises the power of TerminalFour programmable layouts.