Staffordshire University

We worked with the Staffordshire University team to develop a striking new website design and accompanying pattern library. The site has recently won the Best Website prize at the Heist Awards.

Scope of the project

Staffordshire’s brief was to take an already high quality interface design and rework it to better reflect the institution’s brand and character. This was a major challenge in itself, but was added to by the requirement to keep existing component types.

The Staffordshire team were keen not to have to rework hundreds of highly complex course (and other) pages, so we spent a fair amount of time working out what was the best approach / deliverable for the Staffordshire developers to work with.

We toyed with working with existing code – which would have meant less integration work in the short term – but we felt a clean start would provide benefit over the longer term. Sticking closely to the content design, we replicated components in the new style and delivered them in the form of a pattern library using Fractal.

“This was a very strong entry demonstrating excellent SMART objectives. The judges were impressed by the clear focus on performance, UX and audience to drive to primary channels and tasks. The new website clearly aligns to the overall positioning of Staffordshire University and the submitted supporting documents illustrated the amount of work that went into it. Congratulations to everyone that was involved at Staffordshire University.”

Heist Awards judges

Pattern library development

At a high level, pattern libraries consist of three main elements:

Design patterns – individual elements that can be used across the site. Each pattern will be shown in the formats in which it can be used. For example, button sizes, styles, colours. Associated code is provided as are notes about usage. Crucially, each element can be viewed at different widths.

Screenshot taken from the Staffordshire University pattern library showing one of the banner styles

Documentation – pattern libraries include detailed documentation covering typography, spacing, colour, alignments, grid, animation, and theming. They are the new web style guides and, unlike print-based style guides, can be viewed as living documents that are continually updated.

Screenshot taken from the Staffordshire University pattern library showing animation guidance

Page examples – it is important that a pattern library demonstrates how the different patterns behave across different page types and page widths.

Screenshot taken from the Staffordshire University pattern library showing a child landing page

We also developed an alternative theme – using the same patterns – for Staffordshire’s Digital Institute.