Samenvatting

De National Australia Bank (NAB) heeft een duidelijk doel gesteld om het meest klantgerichte bedrijf in Australië en Nieuw-Zeeland te worden. Op ondernemingsschaal, met meer dan 8,5 miljoen klanten en meer dan 200 ontwerpers verspreid over meerdere divisies, had NAB te maken met complexe uitdagingen, waaronder 65 onboardingtrajecten, meerdere componentbibliotheken en handmatige updates die dagen in beslag namen voor één enkele wijziging.

Ook regelgeving verhoogde de eisen op het gebied van consistentie en controle. NAB reageerde hierop met Elevate, een uniform ontwerpsysteem in Figma waarmee teams één keer ontwerpen en de ontwerpen overal kunnen hergebruiken.

De resultaten: een eenvoudigere onboardingervaring voor klanten en meer efficiëntie voor NAB.

• 50% snellere aanmeldingen met een gestroomlijnde onboarding
• 70% minder formuliervelden, wat de klantfrictie vermindert
• Dubbel werk geëlimineerd met gepubliceerde, vooraf goedgekeurde componenten
• Soepelere design-to-dev-overdracht met Figma als enige bron

Uitdaging: Wanneer groei fragmentatie veroorzaakt

Naarmate het ontwerpteam van NAB groeide, liepen de productervaringen uiteen. Productteams in de hele organisatie losten dezelfde klantproblemen op zeer verschillende manieren op. Een creditcardaanvraag kan in meerdere versies bestaan, waarbij elke versie vergelijkbare vragen stelt, maar met variaties in bewoording, volgorde en interactie. "Het is een veelvoorkomend probleem in grote ondernemingen, maar de ambitie van NAB is om de beste te zijn. Daarom nemen we alleen genoegen met de eenvoudigste, klantgerichte ervaringen,” zegt Daniel Fisher, Head of Design bij NAB.

Aparte componentenbibliotheken waren in omloop, sommige al bijna tien jaar oud. Een eenvoudige wijziging kon meerdere bibliotheken en bestanden raken. Zelfs het bijwerken van een voortgangsindicator op meerdere schermen en het bijhouden van alle variaties kon dagen duren.

Meerdere onboardingtrajecten zorgden voor inconsistenties en verhoogden het risico, wat leidde tot complicaties bij nalevingsbeoordelingen en audits. Eerdere tools ondersteunden geen veilige samenwerking op schaal. Bestanden werden via e-mail gedeeld, stakeholders konden geen beoordelingen in context uitvoeren en toegangscontroles bleven achter bij de behoeften op ondernemingsniveau.

Oplossing: Een ontwerpsysteem bouwen dat overal werkt

NAB schaarde zich achter een eenvoudig principe van Chief Design Officer Lance Thornswood: één manier om iets te doen. Die helderheid werd Elevate, een uniform ontwerpsysteem gebouwd op Figma Enterprise, waarmee patronen één keer worden gecreëerd en overal worden hergebruikt.

“Machines” spelen een rol bij het ervoor zorgen dat hergebruik op grote schaal werkt. Deze slimme, herbruikbare componenten zijn ontworpen met alle mogelijke variaties in gedachten. Elke component bevat ingebouwde logica voor validatie, foutstatussen en responsiviteit, zodat ze klaar zijn om in elk product te worden opgenomen.

Figma’s gepubliceerde bibliotheken laten dit model werken op schaal. Wanneer het team een kerncomponent bijwerkt, wordt de wijziging doorgevoerd in alle bestanden die deze gebruiken. Alleen al in het afgelopen jaar werden deze bibliotheken meer dan 100.000 keer gebruikt binnen NAB.

Ontwerpconsistentie met Figma Entreprise verlaagt ook nalevingsrisico's. Elke interactie in Elevate is vooraf goedgekeurd, gestandaardiseerd en auditbaar over producten en merken heen. Rollen en rechten zorgen ervoor dat gevoelige werkzaamheden gecontroleerd blijven. Versiegeschiedenis en het publiceren van bibliotheken zorgen voor een duidelijk overzicht van wat er is gewijzigd, wanneer en door wie.

Opschalen van atomic design met Figma Enterprise

Geïnspireerd door de atomic design-methodologie van Brad Frost gebruikte NAB herbruikbare bouwstenen om consistente ervaringen te creëren en schaalde dit verder op met een systeem van slimme, aanpasbare componenten, “machines” en “fabrieken” genoemd. Atomic design vormde de basis voor Elevate bij NAB. Maar op zichzelf was het niet voldoende om elke klantinteractie binnen de organisatie te verenigen. Het team had functionele componenten nodig die zich konden aanpassen aan elke use case — over externe en interne gebruikerstrajecten, foutpaden, merkvariaties en UI-statussen heen.

Zo creëerde NAB met behulp van Figma’s variabelen, modi en geneste instanties een telefoonnummercomponent die zich aanpast aan elke context. Wanneer 25 ontwerpers deze component hergebruiken in plaats van opnieuw op te bouwen, levert dat ongeveer 25 ontwerpdagen op. Vermenigvuldig dat over tientallen componenten, en de besparingen kunnen in de miljoenen lopen.

“In plaats van tijd te besteden aan het opnieuw ontwerpen van wat al bestaat, kunnen we nu continu verbeteren en ons richten op creatiever werk,” zegt Daniel.

Theming en white-label op schaal met variabelen

Variabelen breiden Elevate uit over producten en merken heen zonder dubbel werk. Elke machine leest een kleine set tokens voor kleur, typografie en afrondingen, zodat dezelfde flow over merken als NAB, Kogan Money, Qantas Money of Bank of Queensland kan worden toegepast met een eenvoudige tokenwissel. Teams bekijken de wijziging in het bestand, publiceren één keer en elke flow die deze gebruikt, wordt automatisch bijgewerkt.

Omdat variabelen in gepubliceerde bibliotheken leven, is governance ingebouwd. Rollen en rechten bepalen wie mag bewerken. De versiegeschiedenis legt vast wat er is gewijzigd, wanneer en door wie. Design en engineering beoordelen dezelfde tokens in context, waardoor minder afstemming nodig is en white-label-lanceringen op schema blijven.

Snellere en eenvoudigere onboarding met Dev Mode

Vóór Figma vertraagden design-to-dev-overdrachten de teams. Ontwerpers verstuurden bestanden als e-mailbijlagen en hielden specificaties bij in aparte documenten. Uitzonderingssituaties waren gemakkelijk over het hoofd te zien. Ongeveer 50% van de capaciteit van het team ging op aan het controleren van builds ten opzichte van ontwerpen en het vastleggen van afwijkingen.

Na het verplaatsen van het proces naar Figma is een end-to-end-flowbestand de centrale bron, waarin tot 80 mensen tegelijk kunnen werken. Ontwikkelaars openen hetzelfde bestand, bekijken vertakkingen en geven feedback in context. In Dev Mode inspecteren ze spacing, tokens en componenteigenschappen via hover en kopiëren vervolgens codeklare waarden. Foutstatussen, uitzonderingssituaties en conditionele paden staan naast de ontwerpen en blijven up-to-date naarmate het werk zich ontwikkelt.

Deze praktijken maakten het herontwerp van NAB’s onboardingklantreis mogelijk. Het klanttraject begint nu met identiteitsverificatie. Een scan van een paspoort of rijbewijs vult gegevens automatisch in door informatie over te nemen uit een vertrouwde bron die de bank kan verifiëren.

Als een rijbewijs uit Victoria alleen initialen toont, vraagt het formulier om de volledige tweede naam. Gedeelde componenten zorgen ervoor dat verbeteringen direct van kracht worden. Zo kan een internationaal telefoonnummerkiezer lokale nummers die beginnen met 04 herkennen en automatisch formatteren.

Met Figma heeft NAB onboarding gestroomlijnd en de teamproductiviteit verhoogd door:

• Het aantal formuliervelden met tot wel 70% te verminderen en de onboardingstijd met tot wel 50% te verkorten, wat zorgt voor een snellere en soepelere ervaring.
• Versterking van de beveiliging met gezichtsherkenning en ID-scans, waarmee wordt aangetoond dat snelheid en veiligheid hand in hand kunnen gaan.
• Dubbel werk verminderen door vooraf goedgekeurde componenten te publiceren en één keer te kopiëren en vervolgens over producten heen te hergebruiken, zodat engineers bouwen vanuit één centrale bron.

Design als drijfveer voor klantgerichtheid

Het ontwerpsysteem van NAB blijft zich ontwikkelen. Met functies zoals Code Connect en Figma MCP overbrugt het team design en engineering — door componenten met code te verbinden, feedbackloops te stroomlijnen en de oplevering te versnellen op basis van echte klantfeedback. Ze gebruiken ook Figma Make en AI-ondersteunde tools om frictie in kernflows te signaleren.

“Het feit dat we een prompt kunnen geven en kunnen zeggen: ‘tel de frictie voor die ene ervaring’ — en daar een nauwkeurige score voor krijgen — is geweldig,” aldus Daniel. “De automatisering van handmatige taken is ongelooflijk.”

Door Figma centraal in het proces te verankeren, laat NAB zien hoe structuur en creativiteit hand in hand kunnen gaan. In een sterk gereguleerde sector die is gebouwd op vertrouwen, zet het een nieuwe standaard voor hoe klantgerichtheid er op schaal uitziet.