A modular design system
Providing both consistency and flexibility to showcase over 1100 degree courses.
- Client
- University College London
- Sector
- Education
- Duration
- 14 weeks
- What we did
- Design research
- User experience design
- Interface design
- Design system
Even for a world-leading university like UCL, attracting talented students to study and to undertake groundbreaking research has become increasingly competitive.
Students have sophisticated expectations for the quality of digital experiences that enable them to discover, compare and consider their options. The online prospectus plays a critical role in informing and exciting potential students before they make an application. This was a particular challenge as UCL offers over 1100 different degree courses from Aesthetic Dentistry through Space Systems Engineering to Viking and Norse Studies.
Informed by research, our solution was to provide UCL with a robust design system which had the flexibility to showcase each course in a compelling and contemporary way, and which could easily adapt to constant change within the large and diverse catalogue of options.
Embarking on this project during lockdown had unintended benefits – we met with Clearleft online on a daily basis and they became an extension of our team. They are simply brilliant to work with and their meticulous approach to UX research made it easy to put real users in front of our stakeholders and remove much of the design debate.
The Results
Connected and personalised content
Using metadata and user behaviour to surface relevant content to each user over multiple visits.
Design validated with users
Participants had extremely positive reactions to the content, design and functionality of the prototypes for the prospectus and application process.
The Full Story
How do you research the needs of a global audience?
The team at UCL provided us with detailed analytics and survey data. We wanted to supplement this useful quantitative information with a deeper understanding of how prospective students went about searching and shortlisting courses.
We carried out a series of deep-dive remote research sessions, speaking with three key groups of people across a wide range of courses and levels of study.
Potential applicants in the process of selecting a course helped us to see how they approached shortlisting and selection. Students who’d recently started at UCL provided insights into what content was most useful and persuasive. In addition, we included people who’d considered but rejected UCL, enabling us to uncover unmet needs within the current prospectus.
Interviews took us across the globe. We had conversations with students in 5 continents and 13 time zones. After 28 interviews we had clear, repeated themes for the most useful information to provide and the sequence and style in which to present it.
Our discovery phase concluded in a playback to stakeholders where we shared and discussed the strategic vision and design principles for the project.
How can you support more informed decision making over multiple visits?
The prospectus needs to support students to make informed decisions. For UCL, matching the right students to the courses that best meet their academic ambitions is more important than increasing the number of applications.
We broke the user journey into two discrete parts: the consideration of courses and the process for completing the application form.
We’d learned from research interviews that most students started by searching far and wide. They listed potential courses and liberally added more options as they became aware of them. At this initial stage, getting on their longlist required students to find high-level practical information and having a positive emotional response. Is the course available? Am I eligible for it? What are the costs? How long is it? Does this course look exciting? Can I see myself studying here?
As choices were whittled down to a shortlist students were looking to compare fewer options with much more granularity. As they got closer to making a decision, clearly-presented detailed information and points of differentiation became the hooks for engagement.
These distinct modes required a design that supported both at-a-glance information as well as layers of detail. Over many iterations, we developed page structures and a visual language to help students easily discover the information they needed for wherever they were in their decision-making process.
In addition to the core course description pages, we designed a faceted search for the catalogue, a bookmarking system for sharing and comparing courses, and a new house style for infographics.
The application process for postgraduate study at a university is complicated. The information required varies between courses with multiple branches within the form based on your inputs. In redesigning the application form we knew we wanted to help students to accurately enter their information but also introduce moments of delight and flow into the design. This approach led to a streamlined form designed to work on desktop and mobile devices.
How do you create a design that scales now and into the future?
With such a variety of courses – and new ones being added annually – we knew we needed a set of flexible design patterns to meet a wide range of different content requirements. We started by auditing, reviewing and rationalising the components needed.
In taking a systematic approach we were looking to minimise the number of coded components without compromising on the opportunities to create dynamic, exciting pages.
Building the design from the foundations up enabled us to create a relatively small library of modular parts that can be combined in an infinite number of ways. To give us confidence that the components would flex for different uses we stress-tested them with content editors across the institution.
By keeping the design elements that were working well for UCL and streamlining the visual language around them, we were able to build a concise set of modular components to accommodate a variety of content types. We designed only what we needed, reusing elements wherever possible to keep the component library lean and manageable.
How do you support editors to publish engaging content?
Designing a set of elegant and robust design patterns is only half the job. To be successful the prospectus requires the content (text, imagery, multimedia and data) to be informative and inspiring. We wanted to go a step further and help design the experience for editors to best support them in creating interesting pages.
To do this we ran a series of week-long design sprints to prototype the future content management system (CMS). Working closely with content strategists we tested out the publishing process with content editors across the university using real content and data.
The end of each sprint gave us the chance to refine the interface and guidance within the CMS to encourage and support the creation of more dynamic and compelling pages. You can read more about prototyping the content management system on our blog or listen to the story as part of an episode on prototyping from the Clearleft podcast.
Next steps
The design for the prospectus is currently being implemented for undergraduate, post-graduate and teacher training courses.
We are currently extending the design language we developed into a full design system for use in other projects across the UCL website.