Zusammenfassung

Die National Australia Bank (NAB) hat sich das klare Ziel gesetzt, das kundenorientierteste Unternehmen in Australien und Neuseeland zu werden. Im Unternehmensmaßstab, mit mehr als 8,5 Millionen Kund*innen und über 200 Designer*innen in mehreren Abteilungen, navigierte NAB durch die Komplexität von 65 Onboarding-Pfaden, mehreren Komponentenbibliotheken und manuellen Aktualisierungen, die Tage für eine einzige Änderung benötigten.

Regulatorische Anforderungen hoben auch die Messlatte für Konsistenz und Kontrolle an, und die NAB reagierte darauf, indem sie Elevate erstellte, ein einheitliches Designsystem in Figma, das es Teams ermöglicht, einmal zu entwerfen und überall wiederzuverwenden.

Die Ergebnisse: ein einfacherer Onboarding-Prozess für Kund*innen und eine höhere Effizienz für NAB.

• 50 % schnellere Anmeldungen durch einen optimierten Onboarding-Prozess
• 70 % weniger Formularfelder, wodurch die Reibung für Kund*innen verringert wird
• Entfernen von Duplikaten mit veröffentlichten, vorab genehmigten Komponenten
• Reibungslosere Übergabe vom Design zur Entwicklung mit Figma als einzige Quelle der Wahrheit

Herausforderung: Wenn Wachstum zur Fragmentierung führt

Als das Designteam von NAB wuchs, gingen die Produkterfahrungen auseinander. Produktteams in der gesamten Organisation lösten die gleichen Kundenprobleme auf sehr unterschiedliche Weise. Ein Kreditkartenantrag kann in mehreren Versionen existieren, wobei jede ähnliche Fragen stellt, jedoch mit Variationen in der Formulierung, Reihenfolge und Interaktion. „Es ist ein häufiges Problem in großen Enterprise, aber das Ziel von NAB ist es, das Beste zu sein. Deshalb sind wir erst zufrieden, wenn wir die einfachsten, kundenorientierten Erlebnisse bieten“, sagt Daniel Fisher, Leiter des Designs bei NAB.

Separate Komponentenbibliotheken waren im Umlauf, einige davon fast ein Jahrzehnt alt. Eine einfache Änderung könnte mehrere Bibliotheken und Dateien betreffen. Selbst das Aktualisieren eines Fortschrittsindikators über mehrere Bildschirme hinweg und das Verfolgen all seiner Variationen könnte Tage dauern.

Mehrere Onboarding-Pfade führten zu Inkonsistenzen und erhöhtem Risiko, was zu Komplikationen bei Compliance-Überprüfungen und Audits führte. Frühere Tools unterstützten keine sichere Zusammenarbeit im großen Maßstab. Dateien wurden per E-Mail geteilt, Stakeholder konnten nicht im Kontext überprüfen und die Zugriffskontrollen hinkten den Anforderungen des Enterprise hinterher.

Lösung: Entwicklung eines Designsystem, das überall funktioniert

NAB scharte sich um ein einfaches Prinzip von Chief Design Officer Lance Thornswood: Eine Möglichkeit, eine Sache zu tun. Diese Klarheit wurde zu Elevate, einem einheitlichen Designsystem, das auf Figma Enterprise basiert und es ermöglicht, Muster einmal zu erstellen und überall wiederzuverwenden.

„Maschinen“ spielen eine Rolle, um sicherzustellen, dass Wiederverwendung in großem Maßstab funktioniert. Diese intelligenten, wiederverwendbaren Komponenten sind mit jeder möglichen Variation im Hinterkopf gebaut. Jeder von ihnen enthält integrierte Logik für Validierung, Fehlermeldungen und Reaktionsfähigkeit, sodass sie direkt in jedes Produkt integriert werden können.

Die veröffentlichten Bibliotheken von Figma ermöglichen es, dieses Modell im großen Maßstab zu verwenden. Wenn das Team eine Kernkomponente aktualisiert, erhält jede verbrauchende Datei die Änderung. Allein im letzten Jahr wurden diese Bibliotheken über 100.000 Mal bei NAB genutzt.

Designkonsistenz mit Figma Enterprise reduziert auch Compliance-Risiken. Jede Interaktion in Elevate ist vorab genehmigt, standardisiert und prüfbar über Produkte und Marken hinweg. Rollen und Berechtigungen halten sensible Arbeit unter Kontrolle. Versionsverlauf und Bibliothekspublikation erstellen eine klare Aufzeichnung dessen, was sich geändert hat, wann und von wem.

Erweiterung des Atomic Designs mit Figma Enterprise

Inspiriert von Brad Frosts Methodologie des atomaren Designs verwendete NAB wiederverwendbare Bausteine, um konsistente Erlebnisse zu schaffen, und skalierte dies dann weiter mit einem System aus intelligenten, anpassungsfähigen Komponenten, die als „Maschinen“ und „Fabriken“ bezeichnet werden. Atomic Design diente als Grundlage für NABs Elevate. Aber allein reichte es nicht aus, um jede Kundeninteraktion im gesamten Unternehmen zu vereinheitlichen. Das Team benötigte funktionale Komponenten, die sich an jeden Anwendungsfall anpassen konnten – sowohl bei externen als auch internen Benutzerreisen, Fehlerpfaden, Branding-Variationen und UI-Zuständen.

Zum Beispiel hat NAB mithilfe der Variablen, Modi und verschachtelten Instanzen von Figma eine Telefonnummernkomponente erstellt, die sich an jeden Kontext anpasst. Wenn 25 Designer*innen diese Komponente wiederverwenden, anstatt sie neu zu erstellen, werden ungefähr 25 Designer-Tage zurückgegeben. Multipliziere dies mit Dutzenden von Komponenten und die Einsparungen können Millionen von Dollar wert sein.

„Anstatt Zeit damit zu verbringen, das bereits Existierende neu zu gestalten, können wir nun kontinuierlich verbessern und uns auf kreativere Arbeit konzentrieren“, sagt Daniel.

Themen und White-Labeling im großen Stil mit Variablen

Variablen erweitern Elevate über Produkte und Marken hinweg, ohne Arbeit zu duplizieren. Jede Maschine liest eine kleine Menge an Token für Farbe, Typ und Eckradien, sodass derselbe Flow durch einen einfachen Token-Austausch in verschiedenen Marken wie NAB, Kogan Money, Qantas Money oder Bank of Queensland erscheinen kann. Teams sehen die Änderung in der Datei in der Vorschau, veröffentlichen alles einmal und jeder verbrauchende Flow wird an Ort und Stelle aktualisiert.

Da Variablen in veröffentlichten Bibliotheken existieren, ist die Governance integriert. Rollen und Berechtigungen steuern den Schreibzugriff. Die Versionsgeschichte dokumentiert, was sich geändert hat, wann und durch wen. Design und Engineering überprüfen dieselben Tokens im Kontext, wodurch Hin und Her reduziert und White-Label-Launches im Zeitplan gehalten werden.

Schnelleres, einfacheres Onboarding mit dem Dev Mode

Vor Figma verlangsamten Design-to-Dev-Übergaben die Teams. Designer*innen schickten Dateien als E-Mail-Anhänge und hielten Spezifikationen in separaten Dokumenten fest. Edge-Fälle waren leicht zu übersehen. Etwa 50 % der Kapazität des Teams floss in die Überprüfung der Builds gegen die Designs und das Protokollieren von Lücken.

Nachdem der Prozess in Figma verlagert wurde, dient eine umfassende Flow-Datei als maßgebliche Quelle, an der bis zu 80 Personen gleichzeitig arbeiten. Entwickler*innen öffnen dieselbe Datei, überprüfen Zweige und hinterlassen Feedback im Kontext. Im Dev Mode überprüfen sie beim Darüberfahren die Abstände, Tokens und Komponenteneigenschaften und kopieren dann die codebereiten Werte. Fehlerzustände, Randfälle und Bedingungspfade stehen neben den Entwürfen und werden aktualisiert, während die Arbeit fortschreitet.

Diese Praktiken machten das Redesign des Kundenbetreuungsprozesses von NAB möglich. Die Reise beginnt jetzt mit der Identitätsüberprüfung. Ein Scan eines Reisepasses oder Führerscheins füllt die Angaben automatisch aus und erledigt die Arbeit für die Kund*innen, indem er die Details einer vertrauenswürdigen Quelle entnimmt, die die Bank verifizieren kann.

Wenn ein Victoria-Führerschein nur Initialen zeigt, verlangt das Formular den vollständigen zweiten Vornamen. Gemeinsame Komponenten bewirken, dass Verbesserungen sofort wirksam werden. Zum Beispiel kann ein internationales Telefonnummern-Auswahlwerkzeug lokale Nummern erkennen, die mit 04 beginnen, und sie automatisch formatieren.

Mit Figma hat NAB die Einarbeitung optimiert und die Produktivität des Teams durch Folgendes gesteigert:

• Reduzieren der Formularfelder um bis zu 70 % und Verkürzen der Onboarding-Zeit um bis zu 50 %, was zu einem schnelleren und nahtloseren Erlebnis führt.
• Stärkung der Sicherheit durch Gesichtserfassung und Ausweisscanning, die beweisen, dass Geschwindigkeit und Sicherheit zusammenarbeiten können.
• Entfernen von Duplikaten durch die Veröffentlichung vorab genehmigter Komponenten, die einmal kopiert und über Produkte hinweg wiederverwendet werden, sodass Ingenieur*innen von einer einzigen zuverlässigen Quelle aus arbeiten.

Design als Treiber für Kundenfixiertheit

Das Designsystem von NAB entwickelt sich ständig weiter. Mit Funktionen wie Code Connect und Figma MCP überbrückt das Team die Kluft zwischen Design und Technik – es verbindet Komponenten mit Code, optimiert Feedback-Schleifen und beschleunigt die Bereitstellung auf der Grundlage von echtem Kundenfeedback. Sie verwenden auch Figma Make und KI-unterstützte Tools, um Reibungen in wichtigen Flows zu erkennen.

„In der Lage zu sein, einen Befehl zu geben und zu sagen, ‚berechne die Reibung für dieses eine Erlebnis‘ – und dann eine genaue Bewertung zu erhalten –, ist erstaunlich“, sagt Daniel. „Die Automatisierung manueller Aufgaben ist unglaublich.“

Indem NAB Figma in den Mittelpunkt seines Prozesses stellt, zeigt es, wie Struktur und Kreativität Hand in Hand arbeiten können. In einem stark regulierten Sektor, der auf Vertrauen basiert, setzt es einen neuen Standard dafür, wie Kundenbesessenheit in großem Maßstab aussieht.