Comment CommBank mise sur une collaboration avec Figma

Durée de lecture : 4 minutes

Résumé : CommBank, la plus grande banque d'Australie, a fait face à un défi : comment continuer à innover dans un monde où la technologie seule ne suffit pas. Ses processus de design englobaient plusieurs outils, ce qui la ralentissait et compliquait la collaboration.

Avec Figma et des fonctionnalités telles que le Dev Mode, l'équipe de design de CommBank travaille désormais 77 % plus efficacement, avec un temps d'annotation qui est passé de 6,5 minutes à seulement 1,5 minute par fichier. Ce gain de rapidité et de précision a permis aux équipes de créer des produits plus rapidement et avec plus de précision tout en éliminant les silos entre les services.

Défi : Continuer à innover dans un monde numérique en constante évolution

Fondée en 1911, la Commonwealth Bank of Australia (CommBank) est une institution financière fiable depuis plus d'un siècle, proposant ses services à 40 % des Australiens. Mais alors que les services de banque numérique s'imposaient, la banque devait trouver le moyen de continuer à évoluer pour répondre aux besoins toujours changeants de ses clients.

Dans un monde où la technologie n'est plus le seul facteur de différenciation, le véritable défi était clair : comment un géant établi peut-il continuer à innover ? Selon Helen Hey, responsable numérique de CommBank, la réponse réside dans les personnes et l'état d'esprit, et pas seulement dans la technologie.

Solution : Un outil pour tout gouverner

En adoptant Figma, CommBank a pu réduire considérablement ces processus fragmentés. L'équipe s'appuyait sur cinq outils distincts : Sketch pour le design, Confluence pour la documentation, Axure pour les prototypes, Jira pour le suivi et Outlook pour la communication.

« Avant l'intégration de Figma, les designers étaient isolés sur leurs machines locales, et il était alors difficile de collaborer, d'avoir une visibilité et de livrer constamment les travaux imminents au niveau des fonctionnalités », explique Ryan Hoy, designer UI senior. Les fichiers se perdaient parmi les e-mails et les mises à jour de design étaient difficiles à trouver lorsqu'elles étaient requises.

En adoptant Figma, CommBank a pu réduire considérablement ces processus fragmentés. Ainsi, la banque a non seulement simplifié ses workflows, mais s'est également assurée de disposer des fonctionnalités de sécurité nécessaires à une institution financière, Figma cryptant les données tant au repos qu'en transit.

FigJam stimule la collaboration entre les équipes

Alors que CommBank continuait de déployer ses efforts de design, FigJam (le tableau blanc virtuel de Figma) est devenu un outil essentiel pour le brainstorming et la collecte de commentaires entre les équipes.

Nikhil Jhala, responsable produit senior, affirme : « Comme Figjam nous aide à capturer les commentaires des parties prenantes en un seul endroit à grande échelle, nous ne manquons rien de ce qui a été dit et qui compte. »

La flexibilité de FigJam a encouragé la collaboration en temps réel lors des réunions, ce qui a permis aux membres de l'équipe à tous les niveaux de contribuer librement avec leurs idées.

« Figma favorise une collaboration plus étroite entre les designers, les ingénieurs et les responsables produit, assurant que nos efforts collectifs répondent aux besoins de chaque partie prenante », déclare Nate Nabete, responsable des opérations numériques des fournisseurs à CommBank.

Éliminer les silos et améliorer l'efficacité

Figma n'était pas seulement destiné à améliorer le workflow de design : il a connecté des équipes qui auparavant étaient cloisonnées. L'un des plus gros projets de CommBank a consisté à mettre simultanément à jour un site web vieux de 30 ans et une application vieille de 15 ans. Avec ses anciens outils, cela aurait été un cauchemar logistique. Mais Figma a changé la donne.

Les bibliothèques de designs de Figma ont permis à la banque de synchroniser automatiquement les mises à jour entre les équipes, ce qui a permis de gagner du temps et d'assurer que tous travaillent sur la même longueur d'onde. Le résultat ? CommBank a lancé en mai 2023 la version 5 de son application, qui regorge de fonctionnalités nouvelles telles que des contenus personnalisés et une navigation dynamique – toutes créées et mises à jour avec Figma.

Améliorer l'expérience des développeurs avec le Dev Mode

Figma n'a pas seulement transformé le processus de design de CommBank – il a également facilité la vie des développeurs.

« Avant Figma, les designers UI devaient spécifier et annoter manuellement chaque écran avec les dimensions, l'espacement et tous les autres détails de mise en page », déclare Joshua May, designer UI senior.

L'équipe de design de CommBank a mené une expérience consistant à comparer le temps nécessaire pour transmettre, annoter et spécifier les fichiers de design avec et sans le Dev Mode. Les résultats ont été clairs : les tâches qui prenaient 6,5 minutes sans le Dev Mode s'exécutaient en seulement 1,5 minute avec le Dev Mode, montrant comment ce dernier influence positivement les workflows des designers et des ingénieurs.

« Avec le Dev Mode, les développeurs peuvent simplement survoler les éléments pour vérifier tous ces détails, ce qui rend le processus de transfert plus fluide et beaucoup moins chronophage », explique Joshua.

Au cours de l'année écoulée, l'équipe de CommBank a élargi l'utilisation du Dev Mode. L'une des améliorations majeures est venue de l'intégration des tokens de design, qui garantissent que le design et le code sont parfaitement synchronisés. Avec les tokens, les designers peuvent transmettre des fichiers qui incluent tous les détails techniques dont les ingénieurs ont besoin, ce qui rend le processus entier plus fluide et plus rapide pour les deux équipes.

« Figma nous a aidés à construire la structure que nous voulions pour nos tokens », indique Gordana. « Une fois les composants configurés avec ces tokens, les designers peuvent les transmettre aux ingénieurs, et tout est déjà en place – sans efforts supplémentaires nécessaires. Cela réduit vraiment le travail manuel des deux côtés, et les ingénieurs peuvent obtenir ce dont ils ont besoin beaucoup plus rapidement qu'avant. »

Le Dev Mode facilite également la collaboration entre les équipes et assure que tout est en phase avec le design system de CommBank, Lumen. L'évolution de son design system a été soutenue par la capacité de Figma à intégrer la documentation et les processus de design dans une seule plateforme. Cette intégration a aidé l'équipe du design system à maintenir la cohérence, assurant que toutes les personnes sont alignées sur les derniers composants et modèles.

Trouver le code de composant approprié est toujours un processus quelque peu chronophage pour les ingénieurs d'application de CommBank. Il y a un risque d'erreur, et suivre les choses nécessite un effort supplémentaire. C'est pourquoi l'équipe de CommBank est enthousiaste par rapport au potentiel de Code Connect, qui simplifiera encore plus les choses en intégrant le code des composants du design system directement dans le Dev Mode.

« Nous voyons un énorme potentiel dans Code Connect, en particulier pour nos équipes des applications », affirme Gordana. « Nous avons vraiment hâte que tout repose en un seul endroit au sein de Figma – cela va faire gagner un temps considérable à nos ingénieurs et réduire les risques d'erreurs. »

Figma a joué un rôle pivot pour aider la banque à passer d'une banque traditionnelle à une banque innovatrice, et continue de transformer la manière dont son personnel crée des expériences de banque numérique d'avant-garde.

« Notre mode de design actuel ne sera pas le même dans 12 mois, ou même dans les six prochains mois », affirme Helen.

Avec Figma, CommBank est préparée à toutes les éventualités.