Lens design system
A project to deliver a design system to create a fast, accessible and consistent experience for users across different applications, platforms and devices.
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:
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 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.
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.
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.
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
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.
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.
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.
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.
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.
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.