A Practical Guide to How We Built a Self-Documenting Digital Pattern Library

Large organisations, such as universities, face a huge challenge when it comes to presenting a consistent, easy to maintain web presence. Does this sound familiar: thousands of web pages sporting different designs, inconsistent corporate branding, and a poor user experience? This was the challenge we faced at the University of St Andrews when we began the task to standardise, simplify and consolidate our digital assets.

At the heart of our strategy to improve user experience and reduce the burden of maintaining disparate websites is our digital pattern library. The pattern library provides definitive solutions to common design problems that can be used, with permission, across the University’s digital estate. Standardised patterns offer a consistent user experience, design, and language. They reduce the cost of maintenance – they enable developers to build digital assets more quickly as the design decisions have already been made for them and tested with real users. A well-documented pattern library also provides opportunities for work to be passed to third parties, easing the burden on over-stretched in-house teams.

In this workshop session we want to share with you our experience over the last 18 months of building a continuously improving, digital pattern library. We will demonstrate the system we have developed (built around Node, Grunt, Handlebars and Sass) for collaboratively creating and documenting design patterns. We will step through our user-centred workflow from considering and designing what patterns we need, through to writing and organising the code, ensuring that everything is accessible and responsive, writing documentation, testing and deployment to the web.

Participants will be invited to explain their approaches (if any) to addressing the challenges we describe and to give feedback on the methods we have developed. If at the end of it all you like what you see, we’ll show you where you can grab our code to adapt it for your own use.


  • Title: A Practical Guide to How We Built a Self-Documenting Digital Pattern Library
  • Type: Workshop session which lasts for 90 minutes
  • Hashtag: #A4
  • FacilitatorStephen Evans, St Andrews University
  • Date and time: 16.00-17.30 on Tuesday 11 July 2017