Client
Queen Mary University of London
Sector
Education
Duration
6 months
What we did
Design research
Content strategy
User experience design
Front-end development
Queen Mary website on a laptop

Visiting a university's website is the first and often the primary way prospective students and researchers understand its campus and programmes. Internally, university websites represent the vast network of individual departments and schools who all use the same platform to post information and news to current students.

The challenge for this project was to design one simple and consistent experience for users while managing the internal network of websites whose design seemed to change from page to page.

Queen Mary wanted to modernise the look and feel of their website and create one joined-up experience for their users, regardless of where they went on the site.

By making these improvements, the goal was to increase the numbers of applicants to their Undergraduate and Graduate programs.

We needed to streamline the design and content structure of the website, improve the navigation and deliver a design system that could provide consistency, visual impact and a better experience overall for their online visitors.

We really enjoyed working with Clearleft. Agencies can come and go, but Clearleft really seemed to care.
Rich Hirst
Richard Hirst Head of Web, QMUL

The Results

Empowered content owners

With a better understanding of the user and the user-centred design process, each content owner can see the positive impact they are able to have on an applicant's online journey.

A branded design system

Previously, the team at Queen Mary felt they had a very generic interface without a unique identity or any consistency across the site. We delivered updates to their designs as a comprehensive design system that they could use and adapt to quickly build future pages.

Intuitive website navigation for new visitors

New visitors to the site could now easily find courses and links to further information. There was a consistent primary navigation that allowed users who might be list to quickly orient themselves through a large and complex website.

The Full Story

How do you influence the major life choice of selecting a university?

First we wanted to get under the skin of the students and learn how they went about researching universities and what triggered them to apply. We mixed our research with short guerilla interviews on campus and with hour-long interviews with students.

Through this, we learned about how influential meeting someone from Queen Mary through a campus visit, Open Day or individual appointment were in making Queen Mary their top choice. Undergraduate applicants especially were motivated by the friendly feel of the university, its diverse student base and buzzing campus.

Postgraduate applicants were quite different, as often they didn't visit many open days, and had less anxiety around the university environment or moving away from home. In speaking to them, it became clear that there were different motivations for applying. People fell into one of two groups; some wanted to see everything in-depth, while others needed to see less, relying on the strength of the reputation to tell them whether it was a good decision to apply.

We used these insights to create new components and page templates that visually highlighted positive features of the university through more imagery, videos and student testimonials. We also structured pages to provide detail, without overwhelming the page with information.

Queen Mary Components
We designed new components to support content that expressed student life and information confidently and clearly.

How do you encourage system thinking?

We needed to re-design their navigation system so that it brought together the different sub-domains as seamlessly as possible while making it easy for applicants to browse their courses. We found that this shift alone impacted many different departments. We iterated on designs, working closely with the digital team and communicated our process to stakeholders every two weeks. In the end, we tested the final navigation system with our intended users.

Queen Mary journey map
Prospective students visiting the website had clearer paths to discover information and apply on-line.

We also improved and aligned their content process to ensure that each web administrator understood how their content affected visitors to their website, and how, if done well would increase the quantity and quality of applicants.

We worked closely with their digital team, as well as spoke the marketing and student recruitment departments to understand their brand positioning, their ambitions and the qualities that made the university unique. We went through many iterations, had many fun and engaging design reviews until we got to a place we felt as a group represented their university as a vibrant and diverse place to study.

Queen Mary team huddled around post-its on a window
The web team were naturally very collaborative, positive and honest, which meant we could really work quickly. We could sketch together, chat about solutions and have challenging conversations without the worry of slowing progress.
Jerlyn Jareunpoon-Phillips Digital product designer, Clearleft

How do you minimise risk?

From the beginning, we knew that engaging stakeholders would be tricky. To manage risks, we planned in a variety of presentations to managers as well as more public forums where interested parties had the opportunity to give feedback, express their concerns and ask questions.

Continual stakeholder engagement on many levels was imperative to the momentum of the project. We openly shared our work and process and made sure that design decisions were articulated to our audience. By the end of the project, we were very embedded with the Queen Mary digital team as well as very familiar to many staff members involved in the web project.

Queen Mary website
We loved the work Clearleft produced. It generated loads of excitement and energy here.
Rich Hirst
Richard Hirst Head of Web, QMUL
More work