NAB Design System

**Due to client confidentiality agreements, I’m unable to share visual assets from this project. However, the full case study is outlined below. If you’d like to see related design system work with visuals, please refer to my Tennis Australia or my iOS Figma UI Kit case studies.**

National Australia Bank (NAB) is one of Australia’s largest financial institutions, providing banking and financial services to individuals, small businesses, and large enterprises.

Elevate is NAB’s new design system. It is a unified set of design foundations, components, and guidelines used across the bank’s digital products. It enables teams to create consistent, accessible, and high‑quality user experiences at scale.

Problem

While Elevate was well established for the web platform, there was no equivalent system for native mobile platforms (iOS and Android).

Goal


To translate the Elevate web library into a native mobile design system, creating a unified and cohesive experience across web and mobile platforms.

My role


Set up NAB’s native mobile design system by creating its foundations, building components, and writing up guidelines. Acted as a central point of contact for the system, mentoring designers on adoption and supporting engineers throughout development.

Process

format_list_numbered

Prioritisation

With multiple feature delivery squads ready to consume components, it was critical to prioritise which components to build first. Priorities were determined based on immediate squad needs, frequency of use, and overall impact on the mobile experience.

palettetext_fieds

Foundations

Established native mobile foundations to support scalability and consistency. This included defining typography, colour and spacing tailored specifically for mobile platforms while remaining aligned with the Elevate system.

search

Analysis

Reviewed existing Elevate web components to understand their structure and intent, then assessed how each could be translated into native mobile patterns. This included identifying where components needed to diverge to align with platform-specific conventions and behaviours across iOS and Android.

edit

Design

Designed native components in Figma, ensuring each component was built with comprehensive properties for labels, icons, and layouts that could be easily adjusted through the properties panel. Designs were validated through close collaboration with engineers and accessibility experts to ensure feasibility and inclusivity.

article

Documentation

Created clear and thorough documentation outlining component specifications, interactions, and accessibility requirements. This documentation ensured designers and developers had a shared understanding of how each component was intended to be used, supporting consistent implementation and long-term scalability of the design system.

Results

• Delivered 25 native mobile components in 4 months, establishing a strong foundation for iOS and Android.

• Increased design and development efficiency through the introduction of reusable, standardised components.

• Adopted by 16 cross-functional teams, demonstrating strong organisational buy-in.

• Achieved 2.1k+ component insertions weekly, indicating active and sustained usage across features.