Sheffield Hallam University
Sheffield Hallam University is one of the UK's largest and most diverse universities and pride themselves on the applied nature of their courses, offering thousands of placements and real-world opportunities every year with guaranteed work experience on their degree courses.
The Challenge
The content team at Sheffield Hallam (SHU) appointed Kind as their digital consultancy of choice in 2018 and, as well as collaborating on all of their digital projects, asked us to lead in creating a sustainable design system for their online properties.
Strategic Thinking
Consistent and considered
From the outset, we knew that this was to be a long-term project, bringing improvement and consistency to SHU's existing digital properties. This was not a 'redesign' project and we would therefore need to concentrate on regularly delivering value over a period of years.
Collaborative
SHU's internal teams have very much taken ownership of their website and online presence, so it would be essential that we would work with them to plan improvements and regularly communicate throughout the design process.
Business as usual
As well as beginning to create a design system of the visual components of SHU's website, we would need to support their teams to deliver important projects and campaigns with immovable deadlines such as a clearing.
Design principles
We started by working with the SHU team to understand the University's strategy, brand and how we should reflect that through the visual language we would be creating with a design system. Based on this we came up with four design principles that ensure consistency during the design process of new components or when making improvements to existing ones.
Living pattern library
To ensure everyone understand the design foundations and components we are creating, we used Fractal to provide a pattern library that is maintained as the single source of truth. Within Fractal we detailed the functional specification for each component, examples of how they could and should be used and shared the HTML code implementing them.
Clearing hub
As part of supporting the regular projects that SHU's digital experiences team needed to deliver, we helped them to design and create a hub for all of their Clearing content which was launched a few weeks before the clearing window opened in the UK. Together we devised useful components such as a "self-selection" feature which would help to surface more relevant content and a pre-application process which helped SHU to fill 40% of their places before clearing began.
Replacing legacy code
While we continued to deliver this "Business as Usual" work it was not possible to update all parts of the website at the same time and therefore it was necessary to include both new and legacy styles. Simply pulling both style files into a template would lead to an increase in page load time, so we packaged up only the legacy styles that were required for the components we weren't yet replacing and nothing more.
