Mark Boulton

University College London

A new foundational design system for one of Europe's most respected universities

University College London, or UCL as it's been known since 2005, is one of Europe's most iconic universities. I was asked to lead a team, in partnership with UCL's internal web team, in the redesign of UCL's homepage and the information architecture for two other key sections of the website: prospective students, and current students.

Working in collaboration with UCL's marketing and communications team, we explored how best the design of UCL's other communications material could be scaled across the many digital products in active development. UCL is like many academic institutions in that departments and faculties are semi-autonomous; they commission, build and maintain their own websites. They were encouraged with use the provided templates, but were able to diverge as it suited them. This presented a problem when trying to pull together then many products as a cohesive whole.

Role

  • Design Director

Services

  • Design sprint
  • Web design
  • Design system
  • Strategy and consultation

Taking UCL's existing corporate design guidelines, we worked to scale them across the digital properties. Where there were gaps – such as web-specific typefaces, or components – then we created and documented them.

Indigo is under continual development at UCL.

Early in the project in was clear that the Indigo Design System had to serve as a resource for designers, developers and UCL departments. The system was built design principles derived through client workshops at UCL.
The foundational elements of the system – such as grid, layout, colours, icons, and more – were documented in full. Examples on how to expand and apply the foundation were provided to users to indicate how the UCL digital brand could be stretched.
Indigo foundations: Grid system and typography.
Indigo foundations: colour, and design patterns such as Maps.

Elsewhere