BPCE NEO - Petite histoire d’un grand design system
Kickoff
“Le bouton là, en 8 colonnes sur desktop et 4 sur mobile … ça pourrait être le même, on le retrouve ici, et ici, mais pas de la même largeur, pas la même couleur, on peut en faire un composant ?”
On se concentre sur les deux feuilles de papier A3. Au milieux du fouillis d’écrans. L’un représente une étape d’un parcours de souscription de crédit immobilier. L’autre, une fonctionnalité du futur espace client. On fait abstraction des couleurs. Le bleu, c’est pour l’identité de Banque Populaire, le rouge c’est Caisse d’Epargne. On travaille en “Violet”.
Ma première semaine en tant que responsable du design digital pour le Groupe BPCE. Premier déplacement dans les « factories » : les « usines » mises en place dans le cadre de la transformation digitale du groupe. Premier atelier, à peine arrivé. Avec la directrice artistique qui m’avait précédé de peu, nous avions extrait la veille les interfaces représentatives des récents travaux des designers déjà en place sur les projets. Imprimés des dizaines d’écrans. Nous avions débarqué à Aix En Provence pour une journée avec l’équipe des développeurs « transverses » nouvellement créée.
Premier train de la journée. Les yeux encore embués par le réveil aux aurores. Eblouit par la lumière provençale qui se reflète sur les murs immaculés de la salle de réunion. Jetant parfois un coup d’oeil à la montagne Sainte-Victoire qui nous fait face, vibrante dans la chaleur de juin, nous tournons autours des feuilles qui recouvrent la table. Feutre à la main nous griffonnons, entourons. Du digital, mais très tangible.
C’était un premier round. Il y en aura d’autres. Entre Designers, codeurs, faiseurs. Et ce jour là, les choses décidément commençaient bien. La distance s’était évanouie entre ceux qui font et ceux qui pensent. Ce jour, penser, c’était faire. Faire, c’était penser.
C’était il y a bientôt 3 ans. Et depuis, le design system BPCE est devenu une réalité concrète. Une plateforme en ligne, mise à jour presque quotidiennement. En plus des fondamentaux qui définissent l’expérience utilisateur des produits digitaux du Groupe BPCE. Elle contient maintenant plus de quarante composants d’interfaces, une charte éditoriale UX , des ressources pour les designers, les PO et les développeurs, 400 pictogrammes déclinés pour 12 marques et 3 plateformes de développement… Une équipe de designers et une équipe de développeurs qui travaillent au quotidien, main dans la main.
Communiquer
L’un des enjeux déterminant de la réussite de ce projet. Communiquer sur la valeur de la plateforme, auprès des parties prenantes, des sponsors. Faire comprendre les gains. Pour l’utilisateur final, c’est une expérience cohérente, homogène, basée sur des principes communs, des éléments interactifs partagés, sur tous les écrans, sur toutes les technologies. Valoriser l’économie réalisée pour le développement en s’appuyant sur des briques techniques réutilisables. Valoriser aussi le gain global pour le projet : moins de spécifications à livrer, moins d’interfaces à valider, plus de qualité, plus d’accessibilité. Je suis intervenu à de nombreux comités, réunions de direction, sessions plénières, … pour convaincre. Sans le support de la direction digitale du Groupe BPCE, il n’aurait pas été possible de faire avancer ce projet.
Deux modèles différents d’organisation se sont succédés. Une équipe dédiée puis, suite à des arbitrages budgétaires, des ressources partagés affectées sur d’autres projets. Puis à nouveau une équipe dédiée.
Le modèle partagé ne fonctionne pas. Les projets donnent toujours la priorité aux travaux qui les servent directement. Créer un composant transverse, réutilisable représente un surcout. Bien que très vite rentabilisé, il est rarement accepté par une organisation en silos. Le design system est un projet à part entière qui doit bénéficier d’une ligne budgétaire et d’une équipe dédiée. Une core team autant que possible d’experts déjà reconnus et légitimes pour leur apports au sein des autres projets. Concepteurs du design system, ils en seront aussi les utilisateurs et les promoteurs.
Définir une nomenclature commune ou au moins, acceptée par les différents contributeurs a été et reste un chantier important.
Le Groupe BPCE et ses établissements sont profondément ancrés dans les territoires. Nous avons pris le parti de la langue française. C’est un choix pragmatique. Décrire nos principes et nos composants dans la langue avec laquelle les équipes équipes communiquent, au quotidien. Nous souhaitons aussi élargir l’audience de notre design system, au delà des experts designers et développeurs. Eviter le jargon ou le « franglais ». Etre agnostique des technologies, des plateformes de développement Web et mobile natif. C’est un exercice, créatif, qui ne nous dispense pas de convenir avec les développeurs de la manière dont les composants sont traduits pour leurs langages de programmation respectifs.
.design
Bpce.design, est un site internet. Une plateforme facilement accessible qui contient une rubrique dédiée aux méthodes UX pour présenter et faciliter la montée en compétence des divers profils d’utilisateurs. L’accès au Design System proprement dit est temporairement restreint pour ne pas trop dévoiler le design de nos futures applications et quantifier le nombre d’utilisateurs.
Avancer vite était une obligation afin de pouvoir livrer les composants au même rythme que les autres projets.
De plus, nous voulions disposer de toute la de flexibilité requise pour créer un système sur mesure. La visibilité de ce projet et la facilité à y accéder étaient des critères de succès incontournables. Ce que les réseaux et les processus du groupe ne pouvaient nous garantir. Nous avons pris le parti de nous affranchir des SI du groupe. Un site conçu avec Wordpress, contribué avec Elementor, exploitant des modules personnalisés pour présenter les composants. Un outil fiable, facile d’accès et facile à prendre en main qui compte près de 300 utilisateurs inscrits et une centaine de visiteurs chaque jour.
Responsable UX, responsable développement transverse, directeurs artistique… lead UX des pôles souscription, espaces clients, B2C, B2B, … unités business, assurances non vie, crédits, épargne financière, … UX designers des projets, développeurs et lead développeurs… se sont retrouvés pendant plusieurs mois, à un rythme hebdomadaire, pour identifier des opportunités de création de composants, planifier la conception et le développement, identifier les solutions graphiques et interactives qui répondent aux besoins d’un maximum des projets digitaux du groupe, faire converger l’UX avec la faisabilité technique, assurer la communication entre les très nombreux contributeurs et parties prenantes du design system. Des rituels essentiels à la cohésion de cette équipe transverse, constituée d’une team coeur et de contributeurs ponctuels dont l’implication est essentielle pour identifier les besoins des projets digitaux du Groupe BPCE et assurer la mise en oeuvre des principes et des composants.
Gestalt
Notre design system nous permet de créer des expériences de marques cohérentes dans lesquelles chaque élément contribue à donner une impression globale de qualité. Des expériences qui illustrent notre ambition de simplifier l’expérience digitale bancaire, inspirer confiance et créer une relation émotionnelle entre le client et son établissement bancaire, basée sur un charte graphique épurée un ton convivial et des interactions pertinentes.
Nos succès nous encouragent à poursuivre dans cette voie. L’usage croissant des fonctionnalités des espaces clients digitaux notamment et le niveau de satisfaction de satisfaction inédit satisfaction sur les stores iOS et Android pour une application mobile d’une banque “historique”.
Hello NEO
Design System est un oxymore. Un catalyseur de la transformation digitale du Groupe BPCE. Il rassemble — et c’est nouveau — des équipes pluridisplinaires et les fait travailler différemment.
Fin mai, nous avons publié NEO, une nouvelle plateforme pour le design system du Groupe BPCE. NEO supporte notre ambition de transformer en profondeur l’expérience des services bancaires dé-matérialisés.
Grâce aux contributions des designers, développeurs, internes ou intervenants externes pour le Groupe BPCE, il propose maintenant :
- Des entrées et des contenus dédiés par profil d’utilisateurs (Designers, PO, développeurs),
- Une navigation facilitée entre les composants, grâce à l’amélioration de la recherche et la gestion des versions,
- Des ponts entre les spécifications visuelles et interactives des composants et les plateformes des équipes de développement web et mobile natif,
- La possibilité de tester les composants en responsive design et de récupérer directement le code, grâce aux démonstrations des composants désormais disponibles au sein des pages de spécifications.
Et voilà. C’était en quelques lignes le début de l’histoire de notre Design System. 3 années durant lesquelles il s’est enrichi et a gagné en maturité. Une histoire qui comporte quelques rebondissements, des périodes d’accélération ou de ralentissement. Un histoire constituée surtout des traces de nos choix de conception soigneusement consignés, et qui continue de s’écrire pour que les utilisateurs de nos dispositifs digitaux, qu’ils soient prospects, clients ou collaborateurs du Groupe BPCE aient accès à des expériences digitales cohérentes, claires, efficaces et esthétiques.
L’aventure continue !
