Relaunching the huge website of a world-leading university

This is the story of how we worked with Imperial to transform its website, aligning an ambitious new strategy with its bold new brand.

Client
Imperial College London
Sector
Education
What we did
Interface design
User research
Front-end development
Digital-first branding
Accessibility
A close-up of a website with the heading "Scientific imagination for world-changing impact" in bold white text on a dark background. The word "IMPERIAL" is displayed above the heading in capital letters, emphasizing the institution. Abstract, colorful patterns resembling fluid or biological forms surround the text, adding a dynamic and modern visual element. The website features a bright green search bar below the main heading.

Imperial College London is a globally-renowned university. Its scale and impact is impressive, with 23,000 students and 8,000 staff, cutting-edge research with collaborations in 192 countries, and 284 startups launched in the last five years from its enterprise incubator.

Over time the website had grown in size and complexity. It failed to reflect the true essence of this world-changing institution. In trying to be everything to everyone, it was falling short of delivering the best user experience for each user's needs.

Imperial had a new organisational strategy. They also commissioned a rebrand from the famous branding studio, Pentagram. This was the catalyst for change. The digital team at Imperial seized the opportunity to take a fresh look at their website. They wanted to better represent Imperial’s incredible achievements, stories, people, and community.

This would be a big undertaking.

The new Imperial website is now live and looking amazing. We’ve had lots of positive feedback already, and the go-live went smoothly. It’s a big improvement and a focal point for the new Imperial brand. It’s been great working with you over the last eighteen months.
A headshot of a man with short, light blonde hair, wearing a dark blazer over a navy blue shirt. He is smiling warmly at the camera, with a bright, well-lit background that includes some greenery, creating a professional yet friendly appearance.
Dan Sprawson Director of Digital at Imperial

The Results

A toolkit for web editors to create compelling content

A collection of new components and flexible templates for use by 800 content creators.

Front-end code for an extensive set of components

All exceeding 90% Lighthouse performance scores and WCAG AA accessibility guidelines.

A new brand rolled out to over 50,000 pages

The redesign introduced a unified and striking visual language.

The Full Story

How do you gather requirements from a large and diverse set of audiences?

The website needed to engage a diverse range of key audiences, optimise commercial opportunities, showcase groundbreaking academic research and reflect Imperial’s values. That’s a tall order.

Successful products come from a deep understanding of the outcomes you wish to achieve. To get this knowledge we embarked on a four-month discovery phase investigating audience, organisational and technical requirements. This encompassed extensive research, thorough analysis, as well as active involvement from both stakeholders and users.

We facilitated dozens of workshops, carried out scores of in-depth one-to-one interviews, ran multiple surveys, and interrogated reams of data from web analytics, card sorts and an extensive site-wide content audit. We regularly shared insights with the team at Imperial and together we identified opportunities and updated project priorities.

A group of people working around a wooden table covered with design documents and printed web page layouts. A jar of snacks and a bowl of fruit are on the table, adding to the collaborative, informal atmosphere.
The Imperial team joined Clearleft in Brighton in the second half of the project, to review the latest design work and prioritise the remaining tasks.

How do you design templates and components to enable content creators to publish compelling web pages?

An often overlooked audience, but one vital to the success of this project, is internal content creators. At Imperial, 800 web editors publish content to the website. We gathered their requirements so that we could provide them with a collection of design patterns to create engaging content.

In essence, webpages are made up of a catalogue of available components. With a website of this size, we couldn’t possibly hope to design every page. Instead, we took a systemic approach to identify the components required as the building blocks for pages.

We identified page types by running a content audit. With input from content creators, we then scrutinised the anatomy of pages to create a list of current components to re-design and missing components to add to their toolkit.

A collage of 10 mixed components. Mostly typographic, the aesthetic is clean and simple.
A few more components designed on the same type, space, and colour foundations.

How do you take Pentagram's new brand and convert it for use online?

In parallel to the web project, the esteemed branding studio Pentagram led an organisational rebrand. Their brand strategy and visual identity covered everything from the signage on buildings and out-of-home advertising to staff lanyards and letterheads.

Our role was to make the distinctive new brand work for the digital estate. The website would be among the first places to use the new brand and where most people would encounter it. There was pressure to ensure the digital execution of the brand was exceptional.

We started with a phase of design exploration to get the foundations for the website right. This included creating and iterating type scales, colour combinations (ensuring colourways were accessible and beautiful), responsive page grids and logo placements.

Two screenshots of the EightShapes Contrast Grid tool showing a grid of colour combinations before and after filtering by contrast ratio. Fewer than 20% of the options passed.
27 colours in the new palette meant over 700 possible combinations. Even after rejecting those that didn’t meet our AA contrast target, there were plenty left to discuss. The EightShapes Contrast Grid was invaluable in narrowing down the options.

Working closely with Pentagram and the brand team at Imperial, we were able to show our work early and often.

As elements for the website were designed, the design language was applied and adjusted to arrive at a visually compelling digital-first incarnation of the new identity.

The relationship between Clearleft and Pentagram was fun and fruitful.

Three screenshots of web pages designed for a small viewport, showing a variety of content and components.
With a handful of styles and foundational elements we designed a set of reusable responsive components to serve many content types.

How do you modernise a website without having to start from scratch?

Our design concepts were brought to life as front-end code. Working collaboratively with developers at Imperial and Terminalfour, we created a series of flexible templates and components that seamlessly integrated into their CMS. By delivering the designs in front-end code, we were able to rigorously test their functionality, accessibility, and performance across all devices, ensuring the site met the highest standards.

A key part of this process involved modernising a decade-old codebase. We refactored much of the existing HTML and CSS, aligning them with modern standards. We also implemented Utopia – a Clearleft-developed approach to fluid responsive type and space design. This gave the site a cohesive and contemporary feel.

With a website of this scale, Imperial saved significant time and money by refactoring parts of the website, with the new design cascading into the updated components.

Imperial rightly holds accessibility and inclusivity as core principles in engaging and attracting the next generation of talent. To ensure these values were extended to the website we routinely checked and refined our code to our published standards. Prior to launch, the templates and components were meticulously validated by Imperial’s external accessibility partner Zoonou, ahead of an audit from the GDS Cabinet Office to ensure the website is accessible to everyone.

A dynamic new website fit for a prestigious organisation

Perceptions of an organisation are often formed from the quality of their website and digital outputs. Imperial has launched a sector-leading, visually compelling, and user-centric website that promotes the institution's global excellence in education and research.

The flexible templates and components enable their content creators to efficiently publish engaging web pages that showcase Imperial’s real-world impact.

Visit the website at imperial.ac.uk

More work