Creating a sustainable design system to improve the efficiency of digital projects
Deliverables:
Overview
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
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.
“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.”
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.
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.
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.
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.