Skip to content

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

Test image


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.

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 woman looking over a view of Sheffield city centre at dawn.

“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

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.

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

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 to ensure that design decisions and assumptions were validated with real members of SHU’s target audience.

a mockup of the Sheffield Hallam University website homepage
Sheffield Hallam University homepage on a laptop on a wooden table

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; 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

Business-as-usual support 🔗

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.

Contact us

If you put purpose before profit and need some expert guidance on brand, strategy, or digital, we’re here to help.

Contact details

) }}