Skip to content

Creating a sustainable design system to improve the efficiency of digital projects

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. Sheffield Hallam wanted to stand out in the busy landscape of Higher Education as an education provider who add real long-term value to their students.

Our partnership

In 2018, SHU appointed Kind as a digital partner, tasking us with providing long-term support to improve and bring consistency to SHU’s digital platforms, as well as collaborating on all of their digital projects, they asked us to lead in creating a sustainable design system for their online properties.

“We transform lives. We shape our students’ futures, preparing them for whatever they choose to do, and create knowledge that provides practical solutions to real world challenges.”

Sheffield Hallam University Mission
A boy in a gymnasium wearing a VR headset. The Sheffield Hallam University logo is overlayed

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.

A girl holding a cardboard placard stating 'The Time is Now'. There is a painted picture of the earth in the centre of the placard

Living pattern library 🔗

To ensure everyone understands the design foundations and components we created, we provided a pattern library that is maintained as the single source of truth. Within this pattern library we detailed the functional specification for each component, examples of how they could and should be used and shared the HTML code for implementing them.

Sheffield Hallam University homepage on a laptop on a wooden table

User-centred design 🔗

As with all complex organisations, SHU has a varied audience, all of which have differing needs and motivations for interacting with the university online. We ran a user-centred process throughout the project to ensure that design decisions and assumptions were validated with real members of SHU’s target audience.

Accessible and performant 🔗

SHU’s need for a highly-accessible web presence aligned with our team’s value of delivering for everyone.All of the components and templates meet the AAA of WCAG 2.1 and are designed following the principles of progressive enhancement; that means starting with the minimal, accessible design, and then improving the experience along with the capability of the user’s browser, technology or preferences.

SHU Design system components

Multi-platform usage 🔗

As part of supporting the regular projects that SHU’s digital experiences team needed to deliver, we designed and created 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.