Category

Design System/GEL

Client

UNSW

Overview

As part of their digital transformation, UNSW aimed to migrate their many Drupal instances to one Adobe Experience Manager instance, while upgrading their brand and user experience. I facilitated the design, development and management of their new Global Experience Language (GEL) and design system framework. This provided the foundation for AEM’s core components and the design templates that would subsequently be used by the website authors in the future.

Design System

UNSW uses Gelato, a custom built design system framework.

Gelato Design System
View the Gelato Design System framework

GEL

Excerpts from the Global Experience Language, or GEL, UNSW3.0.

Design Guide

View the full design guide on UNSW Gelato. Contact me for a run through.

Production

Live UNSW website (Front Door)
Go to the live production website

Related Posts

The Evolution of Design Boards Part 2 Part 2 of exploring the best way to design within a GEL and to present these to developers and stakeholders.
Extracting user stories from research synthesis: Quantifying qualitative data An examination of how to get from various raw data sources to user stories from a UX perspective using Coda.
The Evolution of Design Boards Part 1 Design boards have a come a long way since its first inception to demonstrate how a component should transition from one state to another.
Building the ultimate GEL design system using Sketch & Abstract This is the journey on how a large enterprise design system was crafted using Sketch and Abstract.

History

When I started my role at UNSW as a Senior UX Designer in 2018, I quickly realised that UNSW owned more than 2000 public facing websites. Every school, faculty, research centre etc. had their own website. This was in high contrast to my previous job at Laureate Education, which only owned about a dozen. To reduce double work, I placed every new UI element inside a library in Sketch from the beginning, so that they would be easily accessible from every new project. Over time, this slowly grew into a Global Experience Language or GEL with foundations set up as styles and components set up as symbols.

At the same time, the dev team commenced developing their own version of a multisite on Drupal 8, so that updating one website would automatically update all others too. They named it the Global Experience Framework, or GEF. All new websites from then onwards would be deployed using this framework.

Soon after, a new digital transformation strategy mandated that all websites would migrate to Adobe Experience Manager while undergoing a complete digital brand refresh in line with the new UNSW branding.

To incorporate these changes in my design system on Sketch, I started treating each GEL version as its own entity. UNSW1.0 became the GEL for Drupal 8/GEF, UNSW2.0 became the GEL for Drupal 8/GEF websites with minor updates to reflect the brand refresh and UNSW3.0 became the re-imagined GEL for Adobe Experience Manager completely in line with the new brand. Together, this formed the Gelato design system framework, read more about this framework here.