Background

A design system is a collection of reusable components, guided by a set of standards, that can be used to build user interfaces.

The development of a design system is critical to our ability to deliver a fast, accessible and consistent user experience that is recognisably Bath and can be easily scaled for use across different applications, platforms and devices.

Design systems also help organisations keep pace with rapid change, as components can be reused across products and services and iterated on as new platforms and devices evolve.

Our design system is called Lens, it provides the templating system for University applications, platforms and devices. Lens replaces the previous system called Origins. We've built our design system around five key principles, these are:

• neutrality
• recognition
• simplicity
• clarity
• focus

These principles guide the design and development of Lens, helping us make sure people can easily access our products and services, regardless of device, find information and complete tasks.

Lens

Lens is made up of a number of building blocks, including a typography, colour palette, grid definition and pattern library. The pattern library consists of a range of components which make up our templates.

Typography

Lens uses the sans-serif typeface, Noto Sans. The typeface was selected because of its simplicity and visual consistency in terms of height and stroke thickness across multiple languages.

Colour palette

The Lens colour palette is comprised of seven distinct colours, including granite, coral, cornflower, mint and citrus. Each colour can be made lighter or darker depending on requirements.

Grid definition

Lens is based on a grid structure that consists of 24 columns separated with fixed gutters. The grid automatically reflows based on three defined breakpoints. These are:

• Large (1025px and up) — desktop and laptop computers
• Medium (641px to 1024px) — tablet devices and larger 'mobile' devices
• Small (up to 640px) — mobile devices

Pattern library

The pattern library currently consists of over 30 components. Components are used to create the templates used in Typecase, our publishing platform, as well as a number of other applications.

The components are broken down into two types. 'Global' elements appear on every template. 'Common' components are used to create specific templates to meet user needs.

Technology

Lens is built using Foundation, an advanced front-end HTML framework that allows us to rapidly develop HTML templates.

Foundation was chosen because of its focus on speed, semantics, responsiveness, right-to-left languages support, accessibility and compatibility with Rails.

This helps us make sure that our web pages load faster, can be machine-read more easily, are compatible with different screen sizes, can support different languages and can be easily accessed by disabled people. It also means that our templates work well with our CMS.

Standards

Backward compatibility

Lens has been designed and developed with compatibility in mind. Deprecated components will continue to work for a single release after we roll out replacement elements, giving design teams time to bring their application up-to-date.

Schema.org

We are gradually rolling out support of schema.org, a vocabulary for structured data. This allows us to mark up (tag) our web pages so machines can read them more easily.

Making sure that our templates are compatible with schema.org means that in future our content will work with voice and conversational interfaces like Alexa, Google Assistant or Siri.

Accessibility

Lens is WCAG 2.0 AA compliant. WCAG is part of the World Wide Web Consortium (W3C), who are responsible for international standards on the internet. WCAG is recognised as the defacto standard for accessibility online.

Prioritising development

New business requirements and user feedback are weighted based on the following criteria:

• alignment with the current initiative
• alignment with the University strategy
• frequency of feedback from user
• performance of the components and templates

New features or bug fixes are then prioritised, grouped by type and added to a backlog of work. This process happens weekly.

Lens and Typecase

We are currently developing Lens and Typecase at the same time. As the number of platforms and applications Lens supports grows, Lens will begin to be developed separately.

Phase 1: Develop Lens for Typecase for Courses

Identify the HTML framework and define the colour palette, typography, grid and breakpoints.

Design and develop HTML templates and support components for Course Search, including subject pages and individual course pages.

Phase 2: Development Lens for Typecase

Continue to iterate on Lens components to support the foundation phase of the Typecase publishing platform project.

Status

Completed

• Campaigns
• Case studies
• Events
• External Home Page
• Forms
• Guides
• Home Pages
• Landing pages
• Projects
• Topics

In progress

• Corporate Information pages

In backlog

• Announcements
• Locations
• Person profiles
• Publications
• Service starts
• Team profiles