We worked with UCL to improve the user experience of its many disparate websites by introducing a new systematic approach to their design and build process. Our aim was to make it less daunting and more efficient for staff to create new sites and pages, now and into the future.
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.
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.
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.
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.
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.
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.
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.
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.