Design once, reuse everywhere: How NAB unified design at enterprise scale with Figma
Design once, reuse everywhere: How NAB unified design at enterprise scale with Figma
Summary
The National Australia Bank (NAB) set a clear goal to become the most customer-centric company in Australia and New Zealand. At enterprise scale, with more than 8.5 million customers and over 200 designers across multiple divisions, NAB was navigating complexities around 65 onboarding pathways, several component libraries, and manual updates that took days for a single change.
Regulatory requirements also raised the bar for consistency and control, and NAB responded by creating Elevate, a unified design system in Figma that lets teams design once and reuse everywhere.
The results: a simpler onboarding experience for customers and greater efficiency for NAB.
- 50% faster sign-ups with a streamlined onboarding
- 70% fewer form fields, reducing customer friction
- Removed duplication with published, pre-approved components
- Smoother design-to-dev handoff with Figma as the single source of truth
Customer obsession only works at scale when your craft is consistent. Figma gives us one source of truth, so every team ships the same high-quality experience, every time.
— Lance Thornswood, Chief Design Officer, National Australia Bank
Challenge: When growth creates fragmentation
As NAB’s design team scaled, product experiences diverged. Product teams across the organisation solved the same customer problems in very different ways. A credit card application might exist in several versions, each asking similar questions, but with variations in wording, order, and interaction. “It’s a common problem in large enterprises, but NAB’s ambition is to be the best, so we’ll only be satisfied when we deliver the simplest, customer-obsessed experiences,” says Daniel Fisher, Head of Design at NAB.
Separate component libraries were in circulation, some nearly a decade old. A simple change could touch multiple libraries and files. Even updating a progress indicator across several screens and tracking all its variations could take days.
We had about 65 different pathways that customers could onboard through. By solving problems in isolation at different points in time and across different teams, we had unintentionally created a complex ecosystem of disparate experiences, each with its unique benefits, but disconnected. The real challenge was how to bring that together without losing that benefit.
— Daniel Fisher, Head of Design, National Australia Bank
Multiple onboarding pathways created inconsistencies and increased risk, leading to complications in compliance reviews and audits. Previous tools did not support secure collaboration at scale. Files were shared across email, stakeholders couldn’t review in context, and access controls lagged behind enterprise needs.
Solution: Building a design system that works everywhere
NAB rallied around a simple principle from Chief Design Officer Lance Thornswood: one way to do any one thing. That clarity became Elevate, a unified design system built on Figma Enterprise, allowing patterns to be created once and reused everywhere.
“Machines” play a role in ensuring that reuse works at scale. These smart, reusable components are built with every possible variation in mind. Each one includes built-in logic for validation, error states, and responsiveness, so they’re ready to drop into any product.
Structure is liberating. With the right amount of structure and fully functioning flows in the form of machines, we can turn our attention to harder, bigger problems. Figma gives us the ability to have structure. It lets us scale across 200+ designers and still act like one team.
— Daniel Fisher, Head of Design, National Australia Bank
Figma’s published libraries make this model work at scale. When the team updates a core component, every consuming file gets the change. In the last year alone, these libraries were used over 100,000 times across NAB.
Design consistency with Figma Enterprise also reduces compliance risks. Every interaction in Elevate is pre-approved, standardised, and auditable across products and brands. Roles and permissions keep sensitive work controlled. Version history and library publishing create a clear record of what changed, when, and by whom.
Expanding atomic design with Figma Enterprise
Inspired by Brad Frost’s methodology of atomic design, NAB used reusable building blocks to create consistent experiences, then scaled it further with a system of smart, adaptable components called “machines” and “factories”. Atomic design served as NAB’s foundation for Elevate. But on its own, it wasn’t enough to unify every customer interaction across the business. The team needed functional components that could adapt to every use case—across external and internal user journeys, error paths, branding variations, and UI states.
For instance, using Figma’s variables, modes, and nested instances, NAB created a phone number component that adapts to every context. When 25 designers reuse this component instead of rebuilding it, that is roughly 25 designer-days returned. Multiply that across dozens of components, and the savings can be worth millions of dollars.
“Instead of spending time redesigning what already exists, we can now continuously improve and focus on more creative work,” says Daniel.
Theming and white-label at scale with Variables
Variables extend Elevate across products and brands without duplicating work. Each machine reads a small set of tokens for colour, type, and corner radii, so the same flow can appear across brands such as NAB, Kogan Money, Qantas Money, or Bank of Queensland with a simple token swap. Teams preview the change in the file, publish once, and every consuming flow updates in place.
Because variables live in published libraries, governance is built in. Roles and permissions control who can edit. Version history records what changed, when, and by whom. Design and engineering review the same tokens in context, reducing back-and-forth and keeping white-label launches on schedule.
We can now duplicate a credit card flow, change the design tokens to Qantas branding, and we’re done. That's saving us weeks, not hours.
— Lance Thornswood, Chief Design Officer, National Australia Bank
Powering faster, simpler onboarding with Dev Mode
Before Figma, design-to-dev handoffs slowed teams down. Designers sent files as email attachments and kept specs in separate documents. Edge cases were easy to miss. Around 50% of the team’s capacity went into checking builds against designs and logging gaps.
After moving the process into Figma, an end-to-end flows file is the source of truth, with up to 80 people working in it at the same time. Developers open the same file, review branches, and leave feedback in context. In Dev Mode, they inspect spacing, tokens, and component properties on hover, then copy code-ready values. Error states, edge cases, and conditional paths sit beside the designs and are kept up to date as work evolves.
These practices made NAB’s customer journey onboarding redesign possible. The journey now starts with identity verification. A scan of a passport or driver’s licence prefills and does the work for the customer by taking details from a trusted source that the bank can verify.
If a Victorian licence only shows initials, the form asks for the full middle name. Shared components make improvements take effect instantly. For example, an international phone number picker can recognise local numbers starting with 04 and format them automatically.
With Figma, NAB streamlined onboarding and lifted team productivity by:
- Reducing form fields by up to 70% and cutting onboarding time by up to 50%, creating a faster, more seamless experience.
- Strengthening security with facial capture and ID scanning, proving speed and safety can work together.
- Removing duplication by publishing pre-approved components and copying once and reusing them across products, so engineers build from a single source of truth.
Figma provides us with a single canvas for collaboration, ensuring design intent is communicated accurately and enhancing the quality of our handover experience. It also enables us to visually showcase the value design provides to the broader business.
— Nik Hannay, Design Director, Elevate Design System, National Australia Bank
Design as a driver of customer obsession
NAB’s design system keeps evolving. With features like Code Connect and Figma MCP, the team is bridging design and engineering—connecting components to code, streamlining feedback loops, and speeding up delivery based on real customer feedback. They’re also using Figma Make and AI-assisted tools to spot friction in key flows.
“Being able to prompt and say ‘count the friction for that one experience’—and have that provide an accurate score—is amazing,” says Daniel. “The automation of manual tasks is incredible”.
By embedding Figma at the heart of its process, NAB shows how structure and creativity can work hand in hand. In a highly regulated sector built on trust, it’s setting a new standard for what customer obsession looks like at scale.
Design goes far beyond visually appealing screens. It’s at the heart of a customer-centric culture.
— Lance Thornswood, Chief Design Officer, National Australia Bank
See how Figma can help you scale design
Great design has the potential to differentiate your product and brand. But nothing great is made alone. Figma brings product teams together in a fast and more inclusive design workflow.
Get in touch to learn more about how Figma can help companies scale design.
We’ll cover how Figma can help:
- Bring every step of the design process—from ideation, to creation, to building designs—into one place
- Accelerate design workflows with shared company-wide design systems
- Foster inclusivity in the product team process with products that are web-based, accessible, and easy to use