Web.Unimelb: A digital design system for the University of Melbourne

January 2013

The Challenge

The University of Melbourne has a large and sprawling web presence consisting of over 1000 websites and more than 2 million pages spread across a number of largely autonomous business units.

As digital team lead I was unhappy with the inconsistency and duplication of effort that I saw across this presence. Websites were hosted across a wide variety of CMS platforms. Each was designed and developed by a different set of designers and developers - often at great expense and of variable quality.

There was almost no way to ensure that we provided a consistency of brand, usability, navigation, accessibility or tag management across such a large web presence.

Although the University spent lots of money on designers and developers, more often than not these professionals were pulling the site apart by using different design patterns and development techniques, rather than all pulling in the same direction.

The Solution

As the leader of a small central team, I decided that there had to be a better way for the university to build websites.

Specifically I was looking to create something for the university that:

The process

The design system was built using a mobile-first approach using our in-house Open Device Lab

The process for building this was relatively simple. I came up with the idea and worked closely with my talented team to build what is now used across many hundreds of websites.

Steps were:

Key product management challenges

Solve some of the more interesting challenges I helped solve during the development of web.unimelb for the University include:

Designing at scale without real content

Turns out it’s really difficult to design a website when you don’t know what the content will be. Building a design system is entirely different from building most normal websites. I helped the design lead overcome this challenge by dissecting many of the universities websites to create a list of components that would be needed.

We then worked through the various components using a mobile-first approach using Sketch. Following this we prototyped into middleman and, later, a highly trafficked campaign site.

It pays to take risks (and test risky decisions)

A good example of this is our singular implementation of hamburger the navigation. Rather than force users to understand horizontal navigations, tabs, drop-downs and more, we took a universal approach to navigation by using a hamburger. This controversial decision has paid off - our sites are visually impressive and, more importantly (and controversially), frequent testing shows comfort and familiarity with the hamburger design pattern.


It’s difficult to overstate the impact of web.unimelb.

Today, a central team comprised primarily of 2 people (designer, front end developer), is able to maintain a design system used across a 2 million page website by dozens of web developers and hundreds of content maintainers.

Hundreds of websites and hundreds of thousands of pages are created using it each year. Each time this creation occurs we are saving the university from needing to commission an agency to do design, development, usability and accessibility work - often at a cost of tens or hundreds of thousands of dollars.

Conservatively, we/I have saved the university millions by implementing the design system, not to mention creating a cutting edge web framework that is the envy of many educational organisations as well as commercial ones.

Furthermore it has done the impossible in University-world and unified faculty and professional staff (designers, developers and marketers). Stakeholders seek out and demand it's clean design and functionality and designers and developers love the ease with which they can build websites. Centrally, we love the ease with which we can maintain and improve the entire University website.

Most importantly, our users love it!

Inventing and leading the creation of web.unimelb.edu.au is my single greatest professional achievement to-date.