Résumé

La National Australia Bank (NAB) s'est donnée un objectif clair : devenir l'entreprise la plus centrée sur le client en Australie et en Nouvelle-Zélande. À l'échelle de l'entreprise, avec plus de 8,5 millions de clients et plus de 200 designers répartis dans plusieurs divisions, la NAB gérait les complexités liées à 65 parcours d'intégration, plusieurs bibliothèques de composants et des mises à jour manuelles nécessitant des jours pour un seul changement.

Les exigences réglementaires ont également élevé le niveau de cohérence et de contrôle, et la NAB a répondu en créant Elevate, un design system dans Figma qui permet aux équipes de concevoir un produit une fois et de le réutiliser partout.

Résultat : une expérience d'intégration simplifiée pour les clients et une plus grande efficacité pour la NAB.

• Des inscriptions 50 % plus rapides grâce à un processus d'intégration simplifié
• 70 % de champs de formulaire en moins, et donc moins de difficultés pour les clients
• Élimination de la duplication avec des composants publiés et pré-approuvés
• Un transfert des designers vers les développeurs plus fluide avec Figma comme source unique de vérité

Défi : quand la croissance entraîne une fragmentation

À mesure que l'équipe design de la NAB se développait, les expériences produit divergeaient. Les équipes produit résolvaient les mêmes problèmes clients de manière très différente. Une demande de carte de crédit pouvait être faite de diverses manières, chacune posant des questions similaires, mais avec des variations dans le libellé, la syntaxe et l'interaction. « C'est un problème courant dans les grandes entreprises, mais l'ambition de la NAB est d'être le meilleur, donc nous ne serons satisfaits que lorsque nous offrirons les expériences les plus simples et axées sur le client », déclare Daniel Fisher, responsable du design chez la NAB.

Il existait des bibliothèques de composants distinctes, certaines ayant presque dix ans d'ancienneté. Un simple changement pourrait affecter plusieurs bibliothèques et fichiers. Même la mise à jour d'un indicateur de progression sur plusieurs écrans et le suivi de toutes ses variations pouvaient prendre des jours.

Des parcours d'intégration multiples ont abouti à des incohérences et accru les risques, entraînant des complications dans les examens de conformité et les audits. Les outils précédents ne permettaient pas une collaboration sécurisée à grande échelle. Les fichiers étaient partagés par e-mail, les parties prenantes ne pouvaient pas examiner le contenu en contexte et les contrôles d'accès ne suivaient pas le rythme des besoins de l'entreprise.

Solution : concevoir un design system qui fonctionne partout

La NAB s'est mobilisée autour d'un principe simple du responsable du design, Lance Thornswood : une seule façon de faire une chose. Cette clarté a abouti à Elevate, un design system unifié conçu dans Figma Enterprise et permettant de créer un modèle une fois puis de le réutiliser partout.

Les « machines » jouent un rôle pour garantir que la réutilisation fonctionne à grande échelle. Ces composants intelligents et réutilisables sont conçus en tenant compte de toutes les variantes possibles. Parce que chaque composant inclut une logique intégrée pour la validation, les états d'erreur et la réactivité, il est prêt à être intégré dans n'importe quel produit.

Les bibliothèques publiées de Figma permettent à ce modèle de fonctionner à grande échelle. Lorsque l'équipe met à jour un composant central, chaque fichier consommateur reflète la modification. L'année dernière seule, ces bibliothèques ont été utilisées plus de 100 000 fois chez la NAB.

La cohérence du design avec Figma Entreprise réduit également les risques de conformité. D'un produit et d'une marque à l'autre, chaque interaction survenant dans Elevate est pré-approuvée et standardisée et peut faire l'objet d'un audit. Les rôles et les autorisations permettent de contrôler les tâches sensibles. L'historique des versions et la publication de la bibliothèque créent un enregistrement clair indiquant quelles données ont été modifiées, quand et par qui.

Élargir le design atomique avec Figma Entreprise

S'inspirant de la méthodologie de design atomique de Brad Frost, la NAB a utilisé des blocs de construction réutilisables pour concevoir des expériences cohérentes, puis a fait évoluer cette méthodologie plus encore avec un système de composants intelligents et adaptables appelés « machines » et « usines ». La NAB a fait du design atomique le socle d'Elevate. Mais à lui seul, le design atomique ne suffisait pas pour unifier chaque interaction client dans toute la banque. L'équipe avait besoin de composants fonctionnels capables de s'adapter à chaque cas d'utilisation – au niveau de l'ensemble des parcours utilisateurs externes et internes, des chemins d'erreur, des variations de marque et des états de l'interface utilisateur.

Par exemple, en utilisant les variables, les modes et les instances imbriquées de Figma, la NAB a créé un composant de numéro de téléphone qui s'adapte à chaque contexte. Lorsque 25 designers réutilisent ce composant au lieu de le reconstruire, la banque économise environ 25 jours de travail de designer. Multipliez cela sur des dizaines de composants, et les économies peuvent valoir des millions de dollars.

« Au lieu de passer du temps à concevoir de nouveau ce qui existe déjà, nous pouvons désormais améliorer en continu et nous concentrer sur un travail plus créatif », déclare Daniel Fisher.

Thématisation et marque blanche à grande échelle avec les variables

Les variables étendent Elevate à tous les produits et toutes les marques sans dupliquer le travail. Chaque machine lit un ensemble restreint de tokens liés à la couleur, à la police et aux angles rectangulaires, de sorte que le même flux peut apparaître dans plusieurs marques (par exemple, NAB, Kogan Money, Qantas Money ou Bank of Queensland) par la simple permutation d'un token. Les équipes prévisualisent le changement dans le fichier, publient une fois, et chaque flux consommateur s'actualise automatiquement.

Parce que les variables résident dans des bibliothèques publiées, la gouvernance est intégrée. Les rôles et les autorisations déterminent qui peut modifier les données. L'historique des versions indique quelles données ont été modifiées, quand et par qui. Les designers et les ingénieurs examinent les mêmes tokens en contexte, ce qui limite les allers-retours et permet de respecter l'échéancier des lancements de marque blanche.

Piloter une intégration plus rapide et plus simple avec Dev Mode

Avant Figma, les transferts des designers aux développeurs ralentissaient les équipes. Les designers envoyaient des fichiers par e-mail sous forme de pièces jointes et conservaient les spécifications dans des documents séparés. Il était facile de passer à côté des cas particuliers. Environ 50 % de la capacité de l'équipe était consacrée à vérifier les versions par rapport aux designs et à consigner les écarts.

Le processus étant désormais intégré à Figma, un fichier de flux de bout en bout est la source de vérité, avec jusqu'à 80 personnes qui l'utilisent simultanément. Les développeurs ouvrent le même fichier, examinent les branches et laissent un feedback en contexte. Dans Dev Mode, ils inspectent l'espacement, les tokens et les propriétés des composants à la volée, puis copient les valeurs prêtes pour le code. Les états d'erreur, les cas particuliers et les chemins conditionnels accompagnent les designs et sont mis à jour à mesure que le travail évolue.

Ces pratiques ont rendu possible la refonte du parcours d'intégration des clients de la NAB. Le parcours commence à présent par la vérification d'identité. Un scan d'un passeport ou d'un permis de conduire fournit les renseignements et effectue le travail pour le client en extrayant les détails à partir d'une source de confiance que la banque peut vérifier.

Si un permis de conduire victorien ne montre que des initiales, le formulaire demande le deuxième prénom complet. Grâce aux composants partagés, les améliorations prennent effet instantanément. Par exemple, un sélecteur de numéro de téléphone international peut reconnaître les numéros locaux commençant par 04 et les formater automatiquement.

Avec Figma, la NAB a rationalisé l'intégration et augmenté la productivité de l'équipe en :

• Réduisant les champs de formulaire de jusqu'à 70 % et le temps d'intégration de jusqu'à 50 %, pour une expérience plus rapide et plus fluide.
• Renforçant la sécurité grâce à la capture faciale et au scan d'identité, prouvant que rapidité et sécurité peuvent s'associer.
• Éliminant la duplication en publiant des composants pré-approuvés puis en les copiant une fois pour les réutiliser dans différents produits, afin que les ingénieurs puissent concevoir à partir d'une source unique de vérité.

Le design comme moteur de l'obsession client

Le design system de la NAB continue d'évoluer. Avec des fonctionnalités telles que Code Connect et Figma MCP, l'équipe fait le lien entre la conception et l'ingénierie, en connectant les composants au code, en simplifiant les boucles de feedback et en accélérant la livraison en fonction du feedback réel des clients. Elle utilise également Figma Make et des outils assistés par l'IA pour repérer les frictions survenant dans les flux clés.

« Pouvoir rédiger des prompts et dire "examine la friction dans cette expérience" – et en retirer un score précis – est stupéfiant », affirme Daniel Fisher. « L'automatisation des tâches manuelles est incroyable. »

En intégrant Figma au cœur de son processus, la NAB montre comment structure et créativité peuvent opérer de pair. Dans un secteur hautement réglementé et basé sur la confiance, elle établit une nouvelle norme de l'obsession client à grande échelle.