Adobe a interviewé David Serrault, Head of Design, et Julien Knebel, Lead Frontend Developper, Groupe BPCE, et ils nous livrent les 10 pièges à éviter quand on fait un design system.

Avec plus de 15 marques (Caisse d’Epargne, Banque Populaire, Natixis, Banque Palatine, Casden, Crédit Coopératif…) et 100 000 collaborateurs, le Groupe BPCE abrite des centaines de projets digitaux, à la fois pour les clients, les conseillers bancaires, les collaborateurs, du front jusqu’au back office.

Nos deux interviewés nous parlent des projets réalisés au sein du groupe et notamment de la plateforme NEO, le design system du Groupe BPCE depuis maintenant 4 ans.

Ce design system avait pour objectif, dès sa création :

• De faciliter le travail de développement des équipes en charge de transformer la banque mobile des Caisses d’Epargne et Banques Populaires (mais aussi Palatine, Casden….), que ce soit les développeurs, les Product Owners, d’autres designers, les webmasters …
• De mutualiser les composants créés, les partager, collaborer et faire évoluer,

dans un seul et unique but ; proposer une expérience fluide, sans couture à nos clients.

Vous venez d’intégrer le groupe, vous êtes curieux, vous voulez en savoir plus ? 

David et Julien, en 10 erreurs à éviter, vous partagent leur expérience… et leurs bons conseils.

Si je devais comparer notre travail sur le design system à de l’architecture, je dirais que c’est de l’urbanisme. NEO, c’est un design system XL. 

« Son histoire commence il y a quatre ans, dès mon arrivée chez BPCE. La première mission de l’équipe UX qui venait tout juste d’être créée était de concevoir les nouveaux sites, les nouvelles applications pour les clients. On partait d’une feuille blanche. 

Dès le départ, nous avons voulu capitaliser sur le travail que l’on était en train de faire. On voulait dans un premier temps homogénéiser tous les chantiers en cours, notamment documenter le design pour les travaux à venir. On voulait aussi que ce travail puisse bénéficier au groupe dans son ensemble et qu’il ne s’arrête pas aux limites de nos projets. »

Aujourd’hui, je dirais que le design system du groupe BPCE est un succès. Même s’il nous reste encore énormément à faire.

Depuis 4 ans, nous avons beaucoup travaillé, expérimenté… Bref, nous allons partager avec vous nos expériences. Les erreurs que nous avons faites, et celles que l’on a peut-être évitées de justesse…

Erreur Numéro 1 : Demander la permission 

« Il y a quatre ans, chez BPCE, presque personne ne savait ce que c’était qu’un design system. Nous avons commencé avec quelques composants, nous avons trouvé des alliés sur le terrain. En travaillant avec eux, nous en avons démontré la valeur ajoutée même si cela bousculait un peu l’organisation. Mettre en place un design system dans une entreprise qui n’en n’a pas encore, c’est aussi un projet de transformation. C’est une nouvelle manière de travailler. »

Erreur Numéro 2 : Ne pas le considérer comme un produit

« Il faut une équipe, un budget, une organisation. C’est ce que l’on a mis en place dès le départ. Il faut une équipe très stable pour travailler sur un design system. Sans référents pour en assurer le support et l’évolution, cela crée vite de la frustration dans les équipes qui l’utilisent. »

Erreur numéro 3 :  Le choix du français (!)

« Ce n’est pas vraiment une erreur mais c’est un choix très courageux. L’anglais c’est un peu la VO de l’internet pour la plupart des professionnels. Mais nous voulions rendre notre design system accessible à des gens qui ne sont pas des Développeurs ou des UX designers. Et puis les composants n’ont pas forcément le même nom dans toutes les technologies. Parler français c’est aussi le reflet de notre volonté de ne pas privilégier une technologie par rapport à une autre. »

Erreur Numéro 4 : Ne pas avoir de profil hybride

« Pour faire un design system, il faut travailler ensemble entre designers et développeurs. Mais se comprendre est parfois difficile. Il y a un effet « Lost in translation ». On a beau faire des efforts et se parler cordialement, il arrive que l’on ne se comprenne pas. Les profils hybrides qui sont les cultures du design et du développement sont rares, mais essentiels. Ils sont capables de traduire les langages et expliquer les besoins et les enjeux des différents contributeurs. Ils permettent aux membres de l’équipe de se comprendre. Ce sont nos ‘pierres de Rosette’. »

Erreur Numéro 5 : Restreindre l’accès

« Le mot de passe, c’est le clic de trop… Tout ce qui freine l’accès à l’information doit être proscrit. Demander un mot de passe, ne pas pouvoir y accéder parce que l’on n’est pas sur le bon réseau… ce sont des freins qui limitent énormément l’adoption. Nous avons donc cherché des solutions pour faciliter l’accès au maximum sans trop en dévoiler… »

Erreur Numéro 6 : Ne pas prendre l’accessibilité en compte dès le début

« Aujourd’hui l’accessibilité est un aspect très important dans l’industrie du web, surtout lorsqu’on parle d’interfaces bancaires, impossible de la négliger quand on conçoit les composants et quand on les développe. Plus l’accessibilité est introduite tôt dans le process de développement des composants et mieux c’est, car rendre accessible des composants qui sont déjà en production nécessite très souvent d’introduire des changements très structurants qui ont un gros impact sur le code. »

Erreur Numéro 7 : Ne pas lui trouver un petit nom !

« On a eu de gros problèmes de communication au départ. Design system : certains développeurs pensaient que c’était uniquement un truc de designers ou attendaient que ce soit géré comme une librairie applicative très complexe. Nous lui avons donc donné un nom simple, facile à retenir, mais en même temps assez neutre pour que tout le monde y trouve ce qu’il voulait. Et finalement, cela marche bien. Ca se sent dans les verbatims des utilisateurs. “C’est dans NEO”, “tu as regardé NEO ? »… » 

Erreur Numéro 8 : Se restreindre sur les moyens de communication

« Même si l’on croit que l’on communique assez, il y a toujours des gens qui passent à coté. Nous avons une newsletter, des canaux teams, des interventions aux différents points des développeurs… Plus il y a de canaux, mieux c’est ! »

Erreur numéro 9 : Trop se reposer sur des solutions propriétaires (si on a les moyens de faire autrement) 

« Aujourd’hui, faire un design system est normal. On trouve de nombreux outils qui permettent de monter un design system très rapidement. Mais nous avons décidé de fabriquer une plateforme sur mesure. Du coup, NEO est un produit unique.

Nous avons fait des choix et on continue à en faire même si ce ne sont pas toujours les recettes d’autres entreprises. Le traitement du web et du mobile par exemple. Nous aurions pu faire 3 designs systems (Un web, un iOS, un Android). Nous avons décidé de créer un tronc commun ainsi que des exceptions par OS. Certaines décisions seront peut-être encore des erreurs. Mais cela nous permettra d’apprendre.

NEO est un outil et un produit, conçu dans le but de transformer et coordonner l’expérience utilisateur d’un écosystème digital. Il est le reflet de l’histoire du design dans l’organisation. Des partis pris, des erreurs, des corrections, et du métier de l’entreprise qui le fabrique. »

Erreur Numéro 10 : Ne pas voir plus loin ! Il faut rester innovant…

« Est-ce que sur le long terme aussi, cet investissement ne permet pas de construire quelque chose de nouveau ? Par exemple, avec les design tokens, ou plus tard, peut-être, l’intelligence artificielle ? Le low code ? La portabilité ? »

Pour en savoir plus, visionnez l’intégralité de l’interview publiée par Adobe France !