Based in the heart of England, Keele University is a leading example of a university campus community, boasting the UK’s largest campus. They offer world-class education and research and have been awarded Gold in the Teaching Excellence Framework.
Following a digital audit of their existing website, Keele approached a number of agencies to pitch for the role of digital agency to work alongside them in a website re-development project within TerminalFour, the leading content management platform for Higher Education. The project would involve a number of key phases including the creation of an improved site architecture with clearer user journeys, the production of website template designs, as well as quality assurance testing across a number of metrics including accessibility and performance.
Although valuable, the digital audit only looked at the existing website so we began by working with key stakeholders to develop a detailed research document that would inform decisions on the best ways to engage with each unique audience on the new website.
The research document was also instrumental in shaping a new site architecture. The existing site lacked definition which caused content for different audiences to become mixed and hard to find. Therefore it was concluded that the main navigation would primarily be targeted at prospective students and be supported by supplementary navigations for staff and students. This would provide clearer user journeys and make relevant information much easier to find. A content reduction process followed by card sorting exercises assisted in organising and labelling the content within the new structure.
The user interface was built using an atomic design methodology, which involves creating a design system comprising of several layers of elements, with each additional layer grouping elements from those below to produce higher level components. This promotes consistency and re-usability on the website, which is essential when working on a large scale and with multiple content editors. To present the atomic design system we created the Keele Pattern Library, a bespoke platform which acted as an online style guide where the product could be tested and delivered. This also allowed us to include supporting information such as code snippets and component variations.
We wanted the Keele University website to enjoy a long lifespan and be future proof, so we took a progressive enhancement approach in using a number of cutting edge web technologies, while also catering for older browsers. One of these technologies, CSS Variables, enabled us to use different colour schemes from Keele’s brand and apply them across the site in a more effective and efficient way.
Producing a consistent navigation across devices was one of the most challenging aspects of the build due to the scale of the site requiring the navigation to contain upwards of 500 links. Working closely on a prototype with the team at Keele, we were able to produce a responsive component that provides a friendly, consistent navigation experience across the Keele University website. In order to improve the search experience, we assisted with the transition from Funnelback, Keele’s existing search provider, to a new Algolia platform. This was used to improve the cataloguing of the course pages and boost overall search performance.
Keele previously had six different page templates and 144 content types within it’s TerminalFour installation which had become cumbersome and difficult to manage, especially when most were not being used more than once. Having worked on the site architecture and consistency of the interface, we produced just one page template which was flexible enough to be used across the whole site. We also produced a set of 38 content types, which were carefully designed for Keele to present a variety of content in suitable formats such as tabs, accordions and carousels.
When Keele approached us with their brief, they highlighted that their existing site“was failing 10 out of 12 accessibility standards” which was causing issues for people with disabilities in accessing their content. Improving this was a key project goal and the templates we delivered to Keele conformed to Level AA, a high standard of accessibility.
We worked with the Keele team to author a build process that automated the optimisation of website assets and carry out important tests in order to ensure the performance and accessibility success criteria specified in the brief were maintained now and in the future.
We have received fantastic feedback on the new website design from prospective students, current students, and staff alike. Website speed and SEO scores have also increased significantly across the site, and we look forward to seeing the benefits of these on our website goals.Paul Newton - Digital Communications Manager at Keele University