Design System for University of Dundee

A flexible and attractive design system that includes a library of accessible patterns and templates.


After joining the University of Dundee in 2016 as Web Design Manager, I created a design system and pattern library with the aim of transforming digital design across the organisation.


  • Use Atomic Design to create the patterns and templates the university would require across all websites, systems, apps, and other digital touchpoints
  • Design patterns and templates using inclusive design principles, ensuring 100% accessibility to meet WCAG 2.1 AA requirements
  • Focus on re-use and adaptability
  • Take a system-agnostic approach so the patterns and templates can be used by any system, including Drupal, WordPress, and other 3rd party tools


The design system has been established as one of the most important digital tools in the organisation. It has been rolled out across the main website, blogs, research sites, mobile apps, and many different student and staff systems.

Thousands of people interact with the system each day, from prospective students researching courses, funders and donors giving money to the university, and students searching for books and digital resources in one of the university’s three libraries.

The system has been translated into Chinese for the website built specifically to market to prospective students in China.

Design, Development, Accessibility, Documentation, Training, Product Ownership
University of Dundee