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