Creating the Elevate Design System

Starting with a component library, and a few design files, I led the team to create a world-class, enterprise-scaled design system.

  • Leadership and people
  • Design systems
  • Product Design
  • Enterprise delivery
Screenshot of the Elevate design system home screen, showing navigation and a solve once, deliver everywhere message

My role - Head of Design, Elevate Design System

I started with a fragmented bunch of design files and component libraries and delivered an Enterprise-scaled, world-class design system.

I built a funding model where measured returns paid for the next hire which allowed the design system itself to grow and evolve.

Elevate design system component library screenshot, showing cards, buttons, tags, dropdowns, and other UI components

My work and leadership supported many teams

Engineering

1000+

Engineers

Design

250+

Designers

Product

20+

Product teams

Scale

8

Brands

The impact of my work to NAB and it's customers

Cost savings

$7.5M

Delivered reuse value in 1st FY

Speed

50%

Faster customer sign-ups

Simplicity

70%

Fewer form fields

My approach - the creation of the Elevate Design System

  1. 01

    I used an already proven system as a base

    I collaborated with leaders from Technology, Architecture and Design to guide my team to use Google's Material 3.0 as a base. This is arguably the most used, mature and extensive design system. Why recreate the wheel?

    Material 3 Design Kit promotional card
  2. 02

    I directed the creation of a full suite of design tokens

    I did this to match NAB's existing brand. I then extended this to a further 8 brands, ensuring scalability across the NAB ecosystem. This was a huge step from a very limited, outdated set of tokens I started with.

    Design token colour swatches showing error and success states
Elevate design system pages shown across tablet screens, including page titles, tables, and forms
  1. 03

    I led the creation of the base set of components

    I led the design, test and build of 52 initial components. We then built out patterns to push the reuse value and adoption of the Design System across 20+ product teams, 1000+ Engineers and 250+ Designers.

  2. 04

    I ensured Accessibility was baked-in from the start

    I ensured that every component was Accessible to WCAG 2.2 AA standards, and thoroughly tested to meet NAB's strong regulatory and compliance standards.

  3. 05

    I implemented a continuous improvement program

    Components were constantly tested with customers through domain program user testing, ensuring a continuous improvement loop was maintained.

The result - a world-class Design System

Laptop showing the Elevate design system home page, reading Solve once. Deliver everywhere.

There have been five major releases of the NAB Elevate Design System. It is a world-class, enterprise scaled design system which contains Figma design libraries, code repositories for React, React Native, AEM, iOS and Android. It is beautifully documented, while also having a markdown version of the system to ensure machine readability and AI-readiness. My work led NAB to deliver customer obsessed experiences that are easy to use and reaffirm NAB's strong brand presence.

Praise for my work - Figma article: Design once, reuse everywhere: How NAB unified design at enterprise scale with Figma

Screenshots of the NAB banking flow rolled out across Qantas Money, Kogan Money, and Bank of Queensland using shared Elevate components

What I would do differently

Create accompanying design libraries per tech stack, not try to shoehorn web and native into the one “platform agnostic” Figma library. This approach became very problematic once we needed to use native iOS components in the mobile app. This cost me a lot of time trying to make it work, when I should've just gone with separate libraries.