Riepilogo

La National Australia Bank (NAB) ha fissato un obiettivo chiaro: diventare l'azienda più orientata al cliente in Australia e Nuova Zelanda. A livello aziendale, con oltre 8,5 milioni di clienti e più di 200 designer in diverse divisioni, NAB stava affrontando le complessità di 65 percorsi di onboarding, diverse librerie di componenti e aggiornamenti manuali che richiedevano giorni per una singola modifica.

Anche i requisiti normativi hanno elevato l'asticella per quanto riguarda la coerenza e il controllo, e NAB ha risposto creando Elevate, un sistema di progettazione unificato in Figma che consente ai team di progettare una volta sola e riutilizzare ovunque.

I risultati: un'esperienza di onboarding più semplice per i clienti e una maggiore efficienza per NAB.

• Registrazioni del 50% più veloci con un onboarding semplificato
• Il 70% in meno di campi nei moduli per ridurre le difficoltà per i clienti
• Rimozione della duplicazione con componenti pubblicati e pre-approvati
• Trasferimento più fluido dal design allo sviluppo con Figma come unica fonte di verità

Sfida: quando la crescita crea frammentazione

Man mano che il team di design di NAB cresceva, le esperienze di prodotto divergevano. I team di prodotto in tutta l'organizzazione risolvevano gli stessi problemi dei clienti in modi molto diversi. Una richiesta di carta di credito potrebbe esistere in diverse versioni, ognuna delle quali con domande simili, ma con variazioni nelle formulazioni, nell'ordine e nell'interazione. "È un problema comune nelle grandi aziende, ma l'ambizione di NAB è di essere i migliori, quindi saremo soddisfatti solo quando forniremo esperienze semplici e incentrate sul cliente," afferma Daniel Fisher, Head of Design di NAB.

Esistevano librerie di componenti separate, alcune quasi vecchie di decenni. Una semplice modifica potrebbe riguardare più librerie e file. Anche aggiornare un indicatore di progresso su diversi schermi e tracciare tutte le sue variazioni potrebbe richiedere giorni.

La presenza di percorsi di onboarding multipli creava incoerenze e aumentava i rischi, portando a complicazioni nei controlli e nelle verifiche della conformità. I precedenti strumenti non supportavano la collaborazione sicura su larga scala. I file venivano condivisi tramite email, gli stakeholder non potevano rivederli nel contesto e i controlli dell'accesso non soddisfacevano le esigenze dell'azienda.

Soluzione: creare un sistema di progettazione che funzioni ovunque

NAB si è attivata partendo da un semplice principio proposto da Lance Thornswood, Chief Design Officer: un solo modo per fare qualsiasi cosa. Quella chiarezza ha dato vita a Elevate, un sistema di progettazione unificato basato su Figma Enterprise, che permette di creare modelli una sola volta e riutilizzarli ovunque.

Le “macchine” svolgono un ruolo importante nel garantire che il riutilizzo funzioni su larga scala. Questi componenti intelligenti e riutilizzabili sono realizzati tenendo conto di ogni possibile variazione. Ognuno include una logica integrata per la convalida, gli stati di errore e la reattività, quindi sono pronti per essere inseriti in qualsiasi prodotto.

Le librerie pubblicate di Figma rendono operativo questo modello su larga scala. Quando il team aggiorna un componente principale, ogni file che lo utilizza riceve la modifica. Solo nell'ultimo anno, queste librerie sono state utilizzate oltre 100.000 volte in tutta NAB.

La coerenza del design con Figma Enterprise riduce anche i rischi di conformità. Ogni interazione in Elevate è pre-approvata, standardizzata e verificabile attraverso prodotti e brand. Ruoli e permessi mantengono controllato il lavoro sensibile. La cronologia delle versioni e la pubblicazione della libreria creano un chiaro resoconto di cosa è stato modificato, quando e da chi.

Espandere l'Atomic Design con Figma Enterprise

Ispirandosi alla metodologia dell'Atomic Design di Brad Frost, NAB ha usato blocchi riutilizzabili per creare esperienze coerenti, quindi l'ha ulteriormente scalato con un sistema di componenti intelligenti e adattabili chiamati "macchine" e "fabbriche". L'Atomic Design utilizzato come base per Elevate di NAB. Ma di per sé, questa soluzione non era sufficiente per unificare ogni interazione con i clienti in tutta l'azienda. Il team aveva bisogno di componenti funzionali che potessero adattarsi a ogni caso d'uso, attraverso percorsi utente esterni e interni, percorsi di errore, variazioni di branding e stati dell'UI.

Ad esempio, utilizzando le variabili, le modalità e le istanze nidificate di Figma, NAB ha creato un componente del numero di telefono che si adatta a ogni contesto. Quando 25 designer riutilizzano questo componente invece di ricrearlo, si ottiene un risparmio di circa 25 giorni di lavoro dei designer. Se si moltiplica questo risultato per decine di componenti, i risparmi possono ammontare a milioni di dollari.

"Invece di passare tempo a riprogettare ciò che già esiste, ora possiamo migliorare continuamente e concentrarci su lavori più creativi", afferma Daniel.

Temi e white-label su larga scala con le variabili

Le variabili estendono Elevate tra prodotti e brand senza duplicare il lavoro. Ogni macchina legge un piccolo insieme di token per colore, tipo e raggi d'angolo, in modo che lo stesso flusso possa essere utilizzato per diversi brand come NAB, Kogan Money, Qantas Money o Bank of Queensland con un semplice scambio di token. I team visualizzano in anteprima la modifica nel file, pubblicano una sola volta e ogni flusso si aggiorna sul posto.

Poiché le variabili risiedono in librerie pubblicate, la governance è integrata. I ruoli e le autorizzazioni controllano chi può apportare modifiche. La cronologia delle versioni registra ciò che è stato modificato, quando e da chi. Il design e l'ingegneria esaminano gli stessi token nel contesto, riducendo i passaggi avanti e indietro e mantenendo nei tempi i lanci white-label.

Consentire un onboarding più veloce e semplice con Dev Mode

Prima di Figma, i passaggi da design a sviluppo rallentavano i team. I progettisti inviavano i file come allegati e-mail e conservavano le specifiche in documenti separati. I casi limite spesso non venivano rilevati. Circa il 50% della capacità del team veniva dedicata al controllo delle build rispetto ai progetti e alla segnalazione delle lacune.

Dopo aver trasferito il processo in Figma, la fonte di verità è ora un file di flussi end-to-end, con 80 persone che vi lavorano contemporaneamente. Gli sviluppatori aprono lo stesso file, esaminano le diramazioni e forniscono feedback contestuali. In Dev Mode, ispezionano spaziature, token e proprietà dei componenti al passaggio del mouse, quindi copiano valori predisposti per il codice. Gli stati di errore, i casi limite e i percorsi condizionali si trovano accanto ai progetti e vengono costantemente aggiornati mano a mano che il lavoro evolve.

Queste pratiche hanno reso possibile la riprogettazione del percorso di onboarding dei clienti di NAB. Il percorso ora inizia con la verifica dell'identità. Una scansione del passaporto o della patente di guida precompila e svolge il lavoro per il cliente acquisendo i dettagli da una fonte affidabile che la banca può verificare.

Se una patente di guida mostra solo le iniziali, il modulo richiede il nome completo. I componenti condivisi rendono immediato l'effetto dei miglioramenti. Ad esempio, un selettore di numeri di telefono internazionali può riconoscere i numeri locali che iniziano con 04 e formattarli automaticamente.

Grazie a Figma, NAB ha semplificato l'onboarding e aumentato la produttività del team grazie a:

• Riduzione dei campi del modulo fino al 70% e diminuzione del tempo di onboarding fino al 50%, per creare un'esperienza più veloce e fluida.
• Rafforzamento della sicurezza con l'acquisizione del volto e la scansione dell'ID, a dimostrazione che velocità e sicurezza possono collaborare.
• Eliminazione della duplicazione grazie alla pubblicazione di componenti pre-approvati e alla copia una sola volta per riutilizzarli tra i prodotti, in modo che gli ingegneri creino a partire da una singola fonte di verità.

Il design come motore dell'attenzione al cliente

Il sistema di progettazione di NAB continua a evolvere. Con funzionalità come Code Connect e Figma MCP, il team sta creando un ponte tra design e ingegneria, collegando componenti al codice, semplificando i cicli di feedback e accelerando la consegna basata sul feedback reale dei clienti. Sta anche utilizzando Figma Make e strumenti assistiti dall'AI per individuare attriti nei flussi chiave.

"Essere in grado di creare un prompt e dire "verifica le difficoltà di quella esperienza" e avere un punteggio accurato, è incredibile", afferma Daniel. "L'automazione delle attività manuali è incredibile".

Integrando Figma al centro del suo processo, NAB dimostra come struttura e creatività possano lavorare di pari passo. In un settore altamente regolamentato basato sulla fiducia, stabilisce un nuovo standard per come appare l'attenzione al cliente su larga scala.