CommBank punta sulla collaborazione con Figma

Tempo di lettura: 4 minuti

Riassunto: CommBank, la banca più grande dell'Australia, si è trovata ad affrontare una sfida importante, ovvero come riuscire a proseguire con l'innovazione in un mondo dove la tecnologia da sola non basta. Il suo processo di progettazione era suddiviso su più strumenti diversi, generando rallentamenti e rendendo la collaborazione molto più difficile.

Grazie a Figma e a funzionalità come Dev Mode, il team di design di CommBank ora riesce a lavorare il 77% più efficientemente, riducendo il tempo di annotazione da 6,5 minuti a solo 1,5 minuti per file. Questo miglioramento nella velocità e nell'accuratezza ha consentito ai team di costruire prodotti più veloci e precisi, abbattendo al contempo le barriere tra i vari dipartimenti.

Sfida: restare innovativi in un mondo digitale in rapida evoluzione

Fondata nel 1911, la Commonwealth Bank of Australia (CommBank) è da oltre un secolo una delle istituzioni finanziarie più accreditate in Australia, scelta dal 40% degli australiani. Ma con l'ascesa del banking digitale, la banca ha dovuto capire come continuare a evolversi per rispondere alle esigenze in costante cambiamento dei propri clienti.

Quando la tecnologia smette di essere l'unico fattore di differenziazione, emerge la domanda cruciale: come fa un gigante del settore a rimanere innovativo? Secondo Helen Hey, responsabile digitale di CommBank, la risposta risiede nelle persone e nella mentalità, non solo nella tecnologia.

Soluzione: un solo strumento per gestire tutto

Introducendo Figma, CommBank è riuscita a ridurre drasticamente tutti i processi frammentati. Il team si affidava a cinque strumenti separati: Sketch per il design e la progettazione, Confluence per la documentazione, Axure per i prototipi, Jira per il monitoraggio e Outlook per la comunicazione.

"Prima dell'integrazione di Figma, i designer lavoravano isolati sui loro computer locali, il che aveva ripercussioni sulla collaborazione, sulla trasparenza e sulla capacità di rispettare i tempi di consegna delle funzionalità imminenti", afferma Ryan Hoy, UI designer senior. I file si perdevano tra le e-mail e gli aggiornamenti dei progetti erano difficili da trovare quando ce n'era bisogno.

Introducendo Figma, CommBank è riuscita a ridurre drasticamente tutti i processi frammentati. Grazie a Figma, la banca ha reso i suoi flussi di lavoro più snelli e si è dotata di tutte le funzionalità di sicurezza previste per un'istituzione finanziaria, sfruttando la criptazione dei dati sia inattivi che in transito della piattaforma.

FigJam promuove la collaborazione tra i team

Mentre CommBank si impegnava per riuscire scalare i suoi processi di progettazione, FigJam, la lavagna virtuale di Figma, si è rivelato uno strumento essenziale per fare brainstorming e raccogliere i feedback dei team.

"FigJam aiuta a raccogliere tutti i feedback degli stakeholder in un unico posto e su larga scala, così da non perdere nessun contributo prezioso", rivela Nikhil Jhala, product owner senior.

La flessibilità di FigJam ha incoraggiato la collaborazione in tempo reale durante i meeting, permettendo ai membri dei team, di tutti i livelli, di condividere liberamente le proprie idee.

"Figma favorisce una collaborazione più stretta tra designer, ingegneri e responsabili di prodotto, garantendo che i nostri sforzi comuni rispecchino le necessità di ogni stakeholder", afferma Nate Nabete, responsabile Digital Supplier Operations di CommBank.

Abbattere le barriere per incrementare l'efficienza

Figma non ha solo contribuito a migliorare il flusso di lavoro di progettazione, ha anche messo in connessione team che prima operavano isolati. Uno dei progetti più grandi di CommBank ha coinvolto l'aggiornamento in contemporanea del sito web creato 30 anni prima e dell'app che esisteva ormai da 15 anni. Sarebbe stato un vero e proprio incubo logistico se la banca si fosse affidata ai suoi vecchi strumenti. Ma con Figma, è stata tutta un'altra storia.

Le librerie di progettazione di Figma hanno permesso alla banca di sincronizzare automaticamente gli aggiornamenti tra i team, risparmiando tempo e mantenendo tutti allineati. Il risultato? CommBank ha lanciato la versione 5 della sua app a maggio del 2023, ricca di nuove funzionalità, come i contenuti personalizzati e la navigazione dinamica, e tutto è stato realizzato e aggiornato con Figma.

Dev Mode migliora l'esperienza degli sviluppatori

Figma non ha solo rivoluzionato il processo di progettazione e design di CommBank, ma ha anche semplificato la vita agli sviluppatori.

"Prima di Figma, gli UI designer dovevano aggiungere specifiche e annotazioni manualmente per ogni singola schermata, indicando dimensioni, spaziatura e tutti gli altri dettagli del layout", rivela Joshua May, UI designer senior.

Il team di design di CommBank ha condotto un esperimento per confrontare il tempo necessario per il passaggio di consegne, l'aggiunta di annotazioni e la definizione delle specifiche dei file di design con e senza Dev Mode. I risultati sono stati evidenti: i compiti che prima richiedevano 6,5 minuti sono stati completati in soli 1,5 minuti con Dev Mode, dimostrando i benefici concreti che porta ai flussi di lavoro sia dei designer che degli sviluppatori.

"Con Dev Mode, agli sviluppatori basta passare sopra agli elementi per controllare tutti i dettagli di cui hanno bisogno, il che ha reso il passaggio di consegne molto più fluido e rapido", afferma Joshua.

Nel corso dell'ultimo anno, il team di CommBank ha esteso l'utilizzo di Dev Mode. Uno dei miglioramenti più significativi è derivato dall'integrazione dei token di progettazione, che assicurano che il design e il codice siano sempre sincronizzati alla perfezione. Con i token, i designer possono consegnare file che includono tutti i dettagli tecnici necessari agli ingegneri, rendendo l'intero processo più fluido e veloce per entrambi i team.

"Figma ci ha aiutati a strutturare i nostri token come volevamo", afferma Gordana. "Una volta che i componenti sono configurati con quei token, i designer possono passarli agli ingegneri, e includono già tutto ciò che serve, senza bisogno di ulteriori interventi. Riduce davvero le operazioni manuali di entrambi i team, e gli ingegneri possono accedere a tutto ciò di cui hanno bisogno molto più velocemente rispetto a prima".

Dev Mode semplifica inoltre la collaborazione tra i team, garantendo che tutto sia allineato con Lumen, il sistema di progettazione di CommBank. L'evoluzione del sistema di progettazione della banca è stata supportata dalla capacità di Figma di integrare documentazione e processi di design e progettazione in un'unica piattaforma. Questa integrazione ha aiutato il team responsabile del sistema di progettazione ad assicurare la coerenza, accertandosi che tutti fossero allineati sui componenti e sui pattern più aggiornati.

Per gli sviluppatori dell'app di CommBank, trovare il codice giusto del componente è ancora un processo che richiede tempo. C'è margine di errore e occorre uno sforzo aggiuntivo per rintracciare tutto con precisione. Ecco perché il team di CommBank è entusiasta del potenziale di Code Connect, che semplificherà ulteriormente le cose, in quanto integra il codice dei componenti del sistema di progettazione direttamente in Dev Mode.

"Vediamo un enorme potenziale in Code Connect, soprattutto per i nostri team responsabili dell'app", rivela Gordana. "Non vediamo l'ora di avere tutto in un unico posto all'interno di Figma, perché farà risparmiare molto tempo ai nostri ingegneri e ridurrà il rischio di errori".

Figma ha giocato un ruolo cruciale nell'aiutare la banca a compiere il salto da istituzione storica a protagonista dell'innovazione, e continua a rivoluzionare il modo in cui il suo team crea esperienze di banking digitale d'eccellenza.

"Il nostro modo di progettare oggi è diverso da quello che adotteremo nei prossimi 12 mesi o anche nei prossimi sei mesi", afferma Helen.

Con Figma, CommBank è pronta ad affrontare a testa alta ciò che ha in serbo il futuro.