Setting the standard for accessibility in higher ed

Imperial College London is one of the world’s major centres for research and science education. Ranked as the #2 university in the world, and consistently topping the charts for scientific institutions, Imperial’s breakthroughs have included holography, penicillin, radar, invisibility cloak prototypes, just to name a few.

But the university’s legendary past and bright future were being obstructed by its own web presence:

It was unfocused: Imperial’s brilliant science breakthroughs were being drowned out by routine web content.

It was inflexible: Hundreds of web editors were contributing to unprioritized messaging, and had no flexibility to customize the site to the needs of their own departments and sections.

And it was an obstacle: The content itself wasn’t conducive to viewing on tablets or smartphones, nor was it navigable by screen-readers or via keyboard shortcuts for visually impaired users.

A tight partnership that paired human-centered strategy and design with rigorous technical work, has resulted in a digital experience that connects future scientists like never before.

The results of Imperial’s experience redesign have led to an ongoing partnership with Domain7, encompassing continued asset development, content design, facilitation, and change management.

The W3 Web Accessibility Initiative lays out clear accessibility requirements, and standards around the world are beginning to change. Companies and institutions need to up their game to meet these standards. These AA Standards were the minimum Imperial set out to meet, which influenced colour palettes, type sizes, slideshow controls, and more.

With this vision, every design choice for the new Imperial site was made with accessibility in mind. The process of putting accessibility first changed how coding and user testing were done on the project:

“I started listening to all the pages I was creating. I’d turn on my screen reader, close my eyes and try to accomplish tasks using only my keyboard. Even though I knew the content well, hearing it was a completely different experience than seeing it.”
– Miriam Thomas, UX Lead and Front-End Developer, Domain7

With this focus, would it still be possible to develop a pleasing overall aesthetic? Could Imperial College London’s dynamic visual identity system be leveraged to find complementary colour palettes that passed colour-blindness tests?

“The colours themselves had a big job. First and foremost, they couldn’t create contrast problems that would make viewing the site difficult. Secondly, we needed to provide a broad range of completely customizable colours that each department could own and customize for their own independence. But lastly, all colours still needed to stay part of an overall Imperial ‘house’.

– Tracey Falk, Design Lead, Domain7

The colour-customizability then became the core of the CSS styling and functionality: the team established palettes of primary, secondary and accent colours. Section owners can choose a parent colour, and it automatically themes the section to suit the overall brand, while avoiding any blacklisted colour combinations. It changes all elements on the page: tabs, accordions, lists and the overall page.

For the millions who visit the website yearly, the result is a pleasing, user-centered experience: but for some, it will more than exceed expectations.

After launch, Imperial’s accessibility ranking has improved by more than 200 positions in UK higher ed accessibility rankings.

Giving all visitors a positive experience meant an incredibly rigorous QA and testing process that didn’t just check for bugs in supported, modern browsers, but even dug deeply into deprecated browsers, older devices, and one-off use cases.

Hunting for bugs often turned into a dare, to ‘find that bug.’ Since we were often looking for outdated phones to test with, it meant downloading non-standard browsers or dramatically zooming in and out to reproduce unusual bugs.

The result is a nearly bulletproof mobile and desktop experience. It’s been exhaustively analyzed from every corner and from every device. Finally, Imperial College London had a technically-sound, well-tested web experience that put its users first.

The site itself isn’t stuck using a set of static templates; the system contains a great deal of flexibility to create different content types from different pages. This matters, because to serve our external audiences well, the internal team needs to be equipped with strong, flexible tools.

Now, individual content editors/owners can choose from 18–20 distinct layouts, augmented by modular components like slideshows, tab groups, inline videos… you name it.

Like everything else in this project, designing and testing these systems was a process of very close collaboration.

Discovering true content needs

The content strategy process helped determine core needs for each department, and helped establish the framework for tremendous flexibility. With 400+ content editors, and dozens of unique departments with specific content requirements, there was the need for a totally versatile, scalable system.

Workshopped wireframes

This led to an intensive process of creating wireframes—black-and-white blueprints showing layout configurations for each key page or template. In London we workshopped these with group after group of stakeholders, receiving input and instruction until the revisions reflected the true needs of the College.

Stunning visuals & colour

A visual design process brought out the brilliance and colour of the school’s brand identity and stunning imagery, bringing the layouts to life.

Intensive user testing

As all of this research and templating and design came together, the site was tested, again, live on campus, with students, staff and faculty. During 18 tests over three days, we taught the Imperial team to conduct user tests on their own with a set of tutorials tailored to their needs. The feedback went right back into revisions to address user needs.

To reach the next generation of geniuses meant creating a truly human-centered user experience. This could only happen through close collaboration with a committed, smart client—and that would be impossible without first establishing a strong base of trust, cemented in the early days of the project.

Listening closely to real users

On campus in London, we led almost thirty separate focus groups and interviews with stakeholder groups across the university. Being in the room and hearing stories from staff, prospective students, alumni, current students and more, helped form a strong understanding of who is being served and what needs they have.

Understanding the numbers

We audited the existing site content and reviewed analytics to determine what was performing well.

Studying the external sentiment

We combed through online discussion forums to understand the sentiments and concerns of prospective students, and tracked the range of topics covered in the popular press in reference to Imperial, to understand how the College is seen publicly.

Syncing up with leadership

For an organization’s digital strategy to truly lead into the future, it must hinge on where leadership is heading. We dug into strategic plans for the coming year, the existing Viewbook, the communication guidelines, and anything that hinted at the overarching strategy for the College.

Great digital partnerships don’t just launch new projects, they change your ability to handle new challenges. They build your own capacity. The change turns you, and your organization, into change-makers.

On the heels of celebrating its centennial, we can’t wait to see where Imperial College London will go next. In the words of Imperial’s Vice-Rector Stephen Richardson: “If we’re not the best in the world, we might as well go home.”