A toolkit for web editors to create compelling content
A collection of new components and flexible templates for use by 800 content creators.
- Client
- Imperial College London
- Sector
- Education
- What we did
- User experience design
- Front-end development
- Digital–first branding
- User research
Imperial is a leading University. Its scale and impact is impressive, with 23,000 students and 8,000 staff, cutting-edge research with projects and 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.
The Results
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.
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.
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.
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.
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