Le design system de Nubank facilite la localisation et l'accessibilité des expériences avec Figma

Résumé :

Nubank, l'une des plus grandes banques en ligne d'Amérique latine, a bâti sa réputation en réinventant les standards des services financiers. Depuis plus d'une décennie, son objectif est clair : autonomiser la clientèle en rendant les services financiers simples, transparents et humains.

Comptant plus de 118 millions de clients au Brésil, au Mexique et en Colombie, Nubank s'est tourné vers Figma pour maintenir la cohérence de son design et développer ses opérations à grande échelle sur plusieurs marchés. En construisant son design system NuDS entièrement dans Figma, Nubank a offert des expériences plus accessibles et localisées grâce aux tokens et à la thématisation.

Le défi : concevoir rapidement, à grande échelle et pour plusieurs marchés

À mesure que Nubank s'est étendu au Brésil, au Mexique et en Colombie, ses activités de design sont devenues de plus en plus complexes, chaque marché présentant des différences en termes d'exigences réglementaires, de contexte culturel et d'attentes des utilisateurs.

Le design est resté un pilier stratégique, mais maintenir la qualité et la cohérence à grande échelle est devenu plus difficile. « On ne voulait pas se contenter d'offrir une UX légèrement meilleure que les autres banques. Notre promesse est de construire des produits fondamentalement différents », déclare Ellen Kiss, director and design expertise lead chez Nubank.

Avant Figma, l'équipe utilisait deux autres plateformes différentes. Cette configuration fragmentée rendait le contrôle des versions difficile, la collaboration décousue et la coordination entre les équipes presque impossible, surtout pour une institution financière soumise à des exigences réglementaires strictes sur différents marchés.

Pour suivre le rythme de sa croissance et rester fidèle à son engagement d'humaniser la finance, Nubank savait qu'elle avait besoin d'une plateforme qui pourrait unifier ses outils, ses équipes et ses normes de design sur tous ses marchés.

La solution : construire une infrastructure de design pour l'excellence à grande échelle

Figma fournit un espace de travail partagé en temps réel aux 200 designers de Nubank, répartis dans trois pays. Les designers, les chercheurs, les développeurs et les project managers peuvent co-créer au sein d'un même environnement, ce qui rend leur travail plus agile.

La localisation est rapidement devenue un avantage concurrentiel. En intégrant des designers à chaque marché, l'équipe a pu fournir des expériences qui semblent créées spécifiquement pour chaque pays, depuis la rédaction des messages jusqu'à la structure visuelle des produits.

Une designer colombienne, également cliente de Nubank, a dit à Ellen : « J'ai l'impression que cette application me parle. » Ce lien personnel et authentique permet à l'entreprise de se distinguer dans un secteur qui peut souvent sembler froid, rigide et impersonnel.

NuDS : 80 % d'adoption et un nouveau thème livré en un seul sprint

Le design system de Nubank, NuDS, permet d'offrir des expériences cohérentes et accessibles au Brésil, au Mexique et en Colombie. Construit entièrement dans Figma, NuDS était d'abord une bibliothèque minimaliste avant de devenir un framework flexible et multi-marché qui alimente tout, des mises à jour quotidiennes de produits aux déploiements régionaux à grande échelle.

Conçu pour refléter l'esthétique épurée et accessible de Nubank, NuDS prend en charge plus de 100 composants et modèles de pages réutilisables. Il comprend également des modèles localisés comme les cartes de crédit verticales pour le Brésil et les versions horizontales pour le Mexique et la Colombie. Avec les variables et les modes de Figma, les équipes peuvent également gérer le contenu multilingue dans un seul fichier, et basculer facilement entre le portugais, l'espagnol et l'anglais sans dupliquer le travail de design.

L'entreprise a grandi en même temps que la portée de son design system. Aujourd'hui, NuDS prend en charge environ 320 000 lignes de code sur Figma, provenant de tous les composants dans diverses versions logicielles, ce qui démontre sa portée et sa profondeur au sein des écosystèmes de développement et de design de Nubank.

Pour encourager son adoption à grande échelle, l'équipe a développé un plugin Figma qui vérifie la conformité des designs à NuDS. « L'objectif du plugin est de donner aux designers un moyen de vérifier en contexte quelle proportion de leur parcours utilise NuDS. Il les aide à détecter les composants obsolètes et les liens manquants au début du processus, avant l'étape du handoff au développement », déclare Zé Zorzan, senior product designer chez Nubank.

« En faisant remonter les problèmes directement dans Figma, nous nous assurons que l'adoption du design system se fait en amont, et non après coup », ajoute Zé.

L'accessibilité est également intégrée aux fondations de NuDS. Chaque composant est conçu pour prendre en charge les lecteurs d'écran, le redimensionnement responsive du texte et les normes de contraste des couleurs. « Nous avons l'accessibilité en tête dès le départ. C'est dans nos comportements par défaut, ce n'est pas un élément ajouté en second lieu », explique Zé.

Cet engagement en faveur de l'accessibilité a été central lors du déploiement d'une nouvelle couleur de marque pour les comptes professionnels de Nubank. L'équipe NuDS a étroitement collaboré avec sa branche brésilienne et avec l'équipe branding pour s'assurer que la nouvelle palette respectait les normes d'accessibilité et fonctionnait sur tous les appareils.

Grâce aux fondations de NuDS (tokens, thèmes et outils de gouvernance), le thème mis à jour a été déployé en un seul sprint. Les illustrations ont été renouvelées, les éléments visuels ajustés, et le système a pu s'adapter rapidement sans perturber le lancement.

La standardisation de tels changements via le design system garantit vitesse et flexibilité à grande échelle. Au cours des cinq dernières années, Nuds a permis de réaliser des économies tant au niveau du design que du développement.

L'adoption a progressé régulièrement en parallèle de son impact. NuDS est maintenant profondément intégré au design et au développement de Nubank. Construits sur une architecture d'UI pilotée par un serveur, 80 % des écrans des applications utilisent cette approche : la plupart d'entre eux sont alimentés par NuDS Foundations, la dernière version du design system qui standardise les tokens, les thèmes, les modes et l'analyse de données. Un audit récent a montré que 80 % des écrans sont entièrement conformes à NuDS. En interne, la satisfaction est également en hausse, le NPS (Net Promoter Score) de NuDS ayant doublé en un an.

Grâce à l'intégration poussée de NuDS à chaque étape du cycle de développement de produit, Nubank continue d'améliorer rapidement la qualité du design, ce qui garantit la cohérence, l'accessibilité et la pérennité de chaque produit.

Concevoir avec confiance et contrôle avec Figma Entreprise

En 2024, Nubank a adopté Figma Entreprise pour renforcer deux domaines critiques : la sécurité et la gouvernance du design. En tant qu'institution financière soumise à des normes strictes, l'équipe avait besoin d'un contrôle accru sur la gestion et l'accès aux fichiers, son organisation de design étant décentralisée et en pleine croissance.

L'un des plus grands changements a été la mise en place d'un accès structuré et basé sur les rôles via l'intégration d'Okta, une fonctionnalité disponible avec Figma Entreprise. Cela a permis à Nubank de mettre l'accès au design en phase avec les protocoles d'identité et de sécurité de l'entreprise. Ainsi, seuls les membres d'équipe autorisés peuvent accéder aux projets et prototypes sensibles.

Bien que Figma ait déjà permis une collaboration étendue grâce aux autorisations de voir et de commenter les fichiers, le forfait Entreprise a donné à Nubank un contrôle plus solide sur la partie administrative. Les équipes peuvent désormais gérer les utilisateurs à grande échelle, assigner des rôles plus précisément et restreindre les actions sur les fichiers selon les services, tout en conservant un environnement de design flexible et facile à parcourir.

Avec des centaines de fichiers actifs en permanence, la gouvernance est également devenue plus facile à gérer. Les équipes ont mis en place des couvertures de fichiers Figma standardisées pour faciliter la navigation entre les projets, même sans conventions spécifiques pour le nommage des fichiers.

Cette clarté organisationnelle a permis des initiatives stratégiques de plus grande portée, comme le déploiement du modèle d'écran produit de Nubank.

Après avoir audité des dizaines d'écrans issus de divers produits et marchés, l'équipe du design system a créé un framework flexible qui intègre les aperçus de produit, le contenu localisé, le texte de conformité et les modèles d'UI, tous régis par le design system NuDS.

Figma Entreprise fournit la structure et les contrôles d'accès pour soutenir ce déploiement. Le modèle devrait aider les équipes au Brésil, au Mexique et en Colombie à concevoir des designs avec plus de rapidité, de cohérence et de qualité.

Un système construit pour l'avenir

Alors que l'équipe continue de peaufiner ses workflows, elle cherche également à rationaliser la création de prototypes et les tests utilisateur avec Figma Make, outil de design alimenté par l'IA. Pendant des années, l'équipe design de Nubank a utilisé différents outils externes pour simuler des interactions, tester des fonctionnalités et valider des idées avec les utilisateurs. Mais aucun d'entre eux ne convenait vraiment.

Figma Make étant désormais disponible en version bêta, l'équipe voit une opportunité de consolider davantage son workflow au sein d'une plateforme unique et intégrée. « Nous avons essayé de nombreux outils de prototypage, en vain. Si Figma Make fonctionne comme nous l'espérons, cela pourrait changer la façon dont nous explorons et validons nos idées, » déclare Ellen.

Tous ces efforts reflètent la vision plus large de Nubank : créer des produits de qualité, s'adapter en permanence et investir dans des outils à la hauteur des défis à venir.