Keele University

Keele University

The Brief

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.

Responsive web design by Absolute for Keele University

The Idea

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.

Absolute built a bespoke navigation that would work consistently across devices
Photography used on the website
Photography used on the website
Absolute developed personas as part of the proposed digital strategy

With the structure in place, and research to guide us, the next step was to design a range of templates that would be required within the new website. It was a key goal of the project to deliver a consistent web experience, so we took an iterative process to responsive web design, starting with mobile and desktop wireframes before developing each template until reaching a finished visual design. The templates would then be implemented in a static HTML format using front-end technologies such as CSS and JavaScript, ready and tested to handover to Keele’s in-house team for integration into TerminalFour.

Absolute used the digital research to develop mobile-first wireframes for the website
A section specific colour scheme was integrated using CSS Variables
The Keele shield brand device was integrated into the website
Copywriting to use The Keele difference strapline on banners

The Delivery

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.

Built for flexibility using an atomic design system

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.

Lean development was at the core of our build strategy to ensure the site offered exceptionally fast load times across devices by using a number of techniques to improve performance. The delivery of responsive images was achieved using the picture element with srcset to serve the appropriate size and quality of image, depending on the device being used. We also took the decision to remove existing JavaScript dependencies and move to a modern, lightweight JavaScript framework. We then produced a suite of independent interface components in VueJS, which could be used globally across the website.

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.

Demonstrating colour scheme usage on homepage web design
Search functionality demonstrated on mobile device
Photography used on the website
Photography used on the website

The Results

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.

AA accessibility level; 1 second page load; 102 pattern library components
A number of mobile webpages shown in-situ to demonstrate responsive web design

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

Working Absolute’s Laravel framework into our internal workflow using Laravel Mix enabled us to continue developing the content types alongside their developers, right up until launch. It was a great opportunity to move the site along and employ modern JavaScript build tools and work on both CMS and design code in tandem. The final output was a bespoke design framework that catered exactly to requirements, rather than a bloated bootstrap code base.

Chris Beard - Web Developer at Keele University