Setting the standard for accessibility in higher ed

  • Client Location London, UK
  • Industry Higher ed, university
  • Client Since 2013-12-10
  • Available Links Imperial.ac.uk

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.

Opening the door for all types of genius

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 possibleto 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.

“We don't know where the next Stephen Hawking is going to come from, or where our next brilliant breakthroughs will emerge. But the world must welcome brilliant minds to the table. Accessibility must take the lead.”

Pamela Agar, Digital Lead, Imperial College London

Making colour customization easy was essential, not just to meet the needs of the many departments—but to keep each colour theme passing accessibility requirements.

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.

“For visitors with visual impairments, this site will be that little part of their day when they are able to say, ‘I was respected.’ This is giving people a small and unexpected piece of joy during their web experience.”

Tyler Frans, Director of Delivery, Domain7

Designing for real users, inside and out

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.

“You get it the minute you step foot on campus. The sense of energy and innovation that we came to know was at the heart of Imperial. And the colour! Around every corner, glass and white walls are separated by these crazy joyful hits of brightness. Making that energy come alive on the web while still creating a flexible design system became essential.”

Tracey Falk, Design Lead, Domain7

Designing UI components.

Science Everywhere: A foundation of sound research

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.

“Imperial is an incredible story of a brand. It has an unprecedented position of influence in civilization, and yet somehow, its mythology was being obscured by a deluge of mundane web content. We needed to restore the central story of ‘science everywhere.’”

Kevan Gilbert, Director of Creative Strategy, Domain7

Card-sorting content priorities with Imperial staff & faculty.

Change-makers making change-makers

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."

Through this collaboration, Imperial College London is now readier than ever to put its users first, to equip internal content owners with a sustainable framework, and to keep pushing ahead toward more monumental scientific breakthroughs. They are set up to keep innovating for centuries to come.

“It's amazing how the Domain7 team all have their own unique way in which they approach the Imperial community and draw really interesting stories from them. They are enthusiastic and so earnest, and I really get a sense that they love what they do and love doing it together. ”

Emma Chesterman, former Digital & Creative Media Manager, Imperial College London

We'd be happy to share more case studies with you over an in-person conversation, hand-picking ones that can answer your questions directly.

Get in touch to start talking.