what if Macquarie university had a design system?
INTRODUCING G.E.M
GEM increases Efficiency, Consistency and productivity.
Global Experience Macquarie
It's a system of reusable interaction patterns used to assemble an organisation's entire online output.

The motivation of the design system came about with the increased expectations of the high level of service and quality set by competitors and disruptors immediately changed the digital landscape of Macquarie University. 
‍
The shared design framework is a system of reusable interaction patterns aims to provide a consistent user experience across multiple Macquarie University online services.

CLIENT
Macquarie university
key deliverables
user testing
gem portal
guidelines
GEM Branding identity
Bespoke icon set
Digital Strategy
UX / UI
Responsive Site Design
art direction
platform
responsive web
MOBILE DESIGN 
TABLET DESIGN 
DESKTOP
the team
UX Designer - Jon Lau UI/UX
Designer – Julia Le
UX/UI Designer – Justine Smith
UI Designer – Jane Hamilton
UI Designer – Ron Prince
UX Designer – Shannon Kennedy
web producer – Adam Lennard

‍
the outcome
Increase velocity in the digital team
Increase brand awareness
Better conversions due to better UX/UI
deliver savings


‍

GEM PRINCIPLES

GEM exists to unify the work of our university's many web collaborators. With a library of carefully defined design features, users should have a distinctively Macquarie experience on any page they visit. GEM's system of components and layouts simplifies the process of designing, building and editing the university website.

Functionality over aesthetics

Above all else, everything does what it's intended for and supposed to do. GEM creates intuitive and responsive experiences for our users.

Simplicity over volume

Less really is more. We build a clear path to the most relevant information using components that are scannable, accessible and organised.

Collaboration over isolation

GEM makes it easy to collaborate because it's easy to use, even for people with little design expertise.

Evolution over legacy

Our designs and processes improve and evolve over time to meet the changing needs of users and stakeholders.

GEM Portal

THE PROBLEM

With over 13000 broken links and 86 different design customisations, there was a fragmented digital environment. Inconsistent user experience and user interface meant that the university was not able to quickly react to change.

Image above: example of a design page before GEM
a snapshot of macquarie's Digital landscape revealed over 30 button styles and over 400 typography styles.

COMPETITOR ANAlysis

COmpetitor analysis

Competitor analysis was conducted with the team looking at existing global design systems to find the best approach for MQ.

- Westpac GEL
- Salesforce Lighting System
- Github Solid System
- Mineral Design System

Design SYSTEM

COLOUR
GRID

The foundation of the design system included: colour, grid, typography and iconography.

TYPOGRAPHY
ICONOGRAPHY

I created custom icons to suit the existing Macquarie university brand identity. I created functional usage and decorative icons along with their creation guidelines. They can be viewed here https://gem.mq.edu.au/guidelines/iconography

GEM PLATES

Image above:
Example of a level 3 page

With every new design evolution, it is challenging to understand how these new components form together. There have been a number of different pages that show how the components can be placed together to form your page. They provide great examples of how you can create pages that contain content in one column and three columns page.

- Faculty of Arts landing page

- Branding 2020 page

IMPLEMENTATION Faculty of ARTS

COLOUR

Image above: faculty of arts
https://www.mq.edu.au/faculty-of-arts/study-with-us

Faculty of Arts example:
‍The first implementation of GEM was for the Faculty of Arts, a one column structure, followed by a two column structure. You can see how the GEM components work together on a web page with hierarchy. 
‍
‍https://www.mq.edu.au/faculty-of-arts 

DESIGNING a sustainable model

Design systems have become a major workflow and require investment. The design systems are designed to evolve and adjust to the digital landscape. The need for a sustainable model is required to reduce customer effort, increase enterprise agility, drive revenue and make data driven decisions and actions. By running workshops within the digital team MQ ensured everyone can have the same mindset to keep the design system going. Creating valuable resources and content to all stakeholders to understand and be responsible for their web pages. Freeing designers with predictable and scannable solutions to focus on the bigger picture.

The Core Components
‍Using the data gathered and the knowledge of what a good operating model needs to be sustainable.

‍Our next steps are to focus on building the following:
1. Roles& Responsibilities
2. Clear processes for content management
3. Training& Education model
4. Clear and consistent messages for managing the change process

UI INTERFACE

JLEDESIGN

EXPLORE

DON'T BE A STRANGER

©Jledesign 2010 — 2022. All rights reserved.
Home
Projects
Services
About
Contact

‍