Keele University The Keele difference

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.

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.

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.

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.

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.

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 - Deputy Head of Communications 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