Isometric view of Unimelb design system UI elements

Unimelb Design Systems

Organisation

University of Melbourne

Deliverable

Design systems

My role

UI/UX, HTML, CSS

Primary tools used

Figma, Sketch, Storybook, Miro, Jira

Overview

The University of Melbourne has used design systems to power its public websites for over a decade.

These efforts have been led by the central Digital team, where I held the key responsibilities for ongoing improvement and maintenance of the design systems.

The design systems are used by 200 production sites overseen by ~1200 web editors, who welcome 28 million visitors per year.

Elements of the design system include:

UI libraries, page designs, style guides and interaction specifications - Figma, Sketch, Jira
Design system tokens
Developer testing and preview environments in Storybook
Design system documentation
User-facing documentation within the host CMS platform

Featured articles section component in Figma

My responsibilities

I was responsible for the day-to-day design ownership of the design systems and digital brand implementation, including:

Design of new components, styles, and page layouts, adhering to user-centred design and accessibility standards
Maintenance of existing assets, including accessibility, bug fixes, use-case adjustments and visual uplift
Regular audits and deprecation of legacy components
Advocating and consulting for the design systems in organisational web projects, representing users while balancing organisational needs and production feasibility
Point of contact for internal design system queries and feedback, and external agencies working with the University brand

Documentation and testing environments

Components were initially developed and tested in Storybook, which allowed me to check design, interaction and accessibility aspects were satisfactory.

Once development was complete, the component was embedded in the relevant documentation site as live examples. I would then finalise the production-level documentation, covering topics like:

Overview
Examples
How to use
Do's and don'ts
Variants

Achievements

Delivering a low-touch design system rebrand

In 2018 the University's brand architecture was updated with a new visual identity developed by an external agency. The new branding requirements were incompatible with our existing production sites due to critical differences in page structure.

Before and after example - Gen 3 rebrand

In order to meet the timelines for delivery of a major project using the new brand, Study Hub, a new design system called Gen 2 was implemented alongside the original.

While this achieved the required goal of exactly meeting the new visual design, the only feasible path to updating other sites was to manually migrate them - a process that would be extremely costly and time-consuming.

In close collaboration with the Brand team, I worked with our front-end developers to reach a CSS-only brand update solution to the original design system (now called Gen 3).

In December 2019, the Gen 3 update was rolled out to over 155 production sites, including faculties, the library, Student Hub and other, totalling over 80,000 pages. No changes or effort was required by the University's web editor community, saving an estimated $1.6M in migration costs alone.

Implementing a design system request and prioritisation process

Feedback and requests for the design system were previously handled on an ad-hoc basis, coming through to our team via multiple channels and team members.

In order to rationalise and properly prioritise these requests, I collaborated with my team to implement a new Design System management process, which enabled all requests and feedback to be submitted via an official form, with the requestor being assigned a ticket and advised of progress as their case progressed.

This gave requestors more visibility into what was a previously opaque process, and enabled our team to track and prioritise requests more easily, resulting in a Net Promotor Score of 9.7 for our service.

Design System Issue Management Process

Figma presentation

Preparing for WCAG 2.2 accessibility compliance

In 2021, our team's Web Accessibility Lead proposed to adopt the draft WCAG 2.2 guidelines as the University's new baseline standard for accessibility.

However, preliminary site-wide automated testing recorded a massive drop in compliance as a result - from over 80% to 21% (scoring method being that a single error on a page is a fail). This drop was the result of new criteria in WCAG 2.2 not being addressed in our existing design system, which was tuned to meet WCAG 2.1.

I worked closely with our front-end developers to remediate these issues, testing each design system component in production and fixing each in a priority order of most-used to least, enabling us to return to our target score of >80% compliance within a few months, and well ahead of WCAG 2.2's official release in 2023.