University College London
5 months
What we did
Design research
Interface design
Front-end development
Design system
Collage of home page screenshots showing brightly coloured graphics and bold text

University College London (UCL) is a world-leading university with more than 13,000 staff, 42,000 students and over 70 academic schools and departments across 11 faculties. Its digital estate comprises hundreds of websites, many of which have evolved apart from each other over time. UCL was keen to establish a systematic design approach to unify their estate and ensure that future projects maintain a high standard of consistency and quality.

Loving the design system! It’s winning champions all over ISD and Comms & Marketing.
Samantha Fanning
Samantha Fanning Head of Digital Experience, UCL

The Results

A collaboratively created design system and process, making it easier to produce new UCL websites

A research-based solution meant key stakeholders shaped the system's design. This approach continues to drive adoption of the new tools and processes.

Over 200 new assets, resources and directories, organised and structured into a new design system website

Key components were built using Twig templating macros and added to a Storybook library to enable a smart, rapid development workflow, while maintaining compatibility with current and future tech stacks.

A new team responsible for cultivating the design system and championing UCL's new approach to digital design

The design system is a living product backed by a team to help it grow and adapt to meet the evolving needs of UCL.

The Full Story

Over the course of several website design projects, it became clear that UCL could benefit significantly from a centralised digital design system: a living source of truth showcasing and documenting the design and build of components, pages, sites, and related processes. The sheer number of products and people involved meant that establishing this would be a challenging – and extremely worthwhile – exercise. A major Drupal CMS upgrade presented an ideal opportunity to bring this to life through the new design system team and website.

Animated slideshow of branded illustrations
We illustrated a set of graphic signposts in UCL's brand colours to help guide users around the site.

How do you make a design system people want to use?

Our job was to design and organise a new library of styles, components, and guidance in a way that would attract and retain users by making their lives easier. The system needed to speak clearly to all users, from completely non-technical people to full-time developers.

Stack of 4 screenshots showing variation between design system item page types
Styles and components can be presented slightly differently depending on their content types.

Building the right thing

UCL's design style guides had always been print focused. A small digital pattern library had kept their websites looking somewhat uniform but their aesthetics and UX design had not been able to keep up with the latest developments, and there were critical gaps in the pattern library that individual schools and departments had each solved in their own ways. An audit of UCL's websites revealed a handful of commonly required styles and components that the design system team could prioritise once the system was up and running.

Screenshot of a web page with annotations showing words describing their purpose, rather than real content
An x-ray version of the "item" page type shows how the page template was designed, with each section having a clear purpose.

Know your audience(s)

Through a comprehensive series of interviews and workshops with the primary users-to-be of the new system, we came up with a set of design principles and a list of ingredients to make a proof-of-concept prototype to test and iterate. This would give us the confidence to design and build the real thing, and get it right.

Card component with a graphic showing a disorganised pile of shapes and some text welcoming non-technical users to the design system
For some of our users, this will be their first encounter with a design system.

Building confidence

Clearleft's responsibility on this project was to ensure the system was fit for purpose and set up to meet UCL's requirements. To this end we ran a pilot exercise during which the UCL team successfully designed (complete with content), built, and published a new component, validating the practical parts of the new process.

2 screenshots showing a component and its code and properties
On the item page, a component is rendered as it will be seen on a website, with its code and properties presented in a tab below.

Adoption and rollout

The outcome is a curated, manageable collection of digital styles, components and templates. These have been designed, built and documented for use throughout UCL's digital estate. The new site serves as the go-to source of up-to-date information about how design happens at UCL. In addition it's intended to become the repository for other core design-related documentation such as brand guidelines and content style guides.

UCL has started populating the system, confident it’s going to help improve its digital presence. This will provide better experiences for users interacting with UCL online and support its aim of attracting the best students, researchers, academics and staff in the world.

The work continues

Clearleft and UCL continue to work together, and we have become consumers of the system we helped to create. It's holding up well so far. A beta version of the UCL Design system is currently live and publicly available.

If you want to find out more about design systems, please have a listen to episode 1 of the Clearleft podcast.

More work