NEO, le design system du Groupe BPCE (part I)

17 juin 2021

NEO est le référentiel design et développement de l’écosystème digital du Groupe BPCE. C’est un outil qui aide les équipes de projets à concevoir des expériences utilisateurs cohérentes et de qualité.

Avant toute chose 

Le design system n’est pas un framework, donc ne vous attendez pas à avoir, dans cet article, un manuel de mise en place expliquant la méthodologie à appliquer.

Un design system est propre à une organisation et étroitement lié aux personnes qui la constituent. Ses objectifs sont multiples et, par nature, il se doit d’évoluer constamment.

Le design system n’est pas qu’une question de design et n’est donc pas la propriété exclusive des UX/UI. C’est au contraire un ensemble d’outils et de pratiques construit en collaboration entre les équipes de design et les équipes IT, qui permet de travailler à l’échelle de façon industrielle afin, in fine, d’apporter une cohérence d’ensemble à l’expérience utilisateur.

Nous avons initialisé cette démarche il y a 4 ans avec une intégration progressive au sein des équipes. Considéré comme un produit , il fait partie des succès de la transformation digitale du groupe.

 

Industrialiser le design dans nos développements

Pour la 89C3 Factory, notre objectif premier était de concevoir de façon industrielle des interfaces à destination de nos clients. Par industriel, j’entends le fait de développer un composant (graphique ou non) une seule fois afin qu’il soit réutilisable dans différents contextes. L’intérêt étant, pour nos développeurs et designers, qu’ils s’attardent sur la production de valeur plutôt que le développement,  n fois, du même composant. L’autre bénéfice étant, bien entendu, la qualité via la standardisation de nos méthodes de développement et outils. Un peu à l’image des briques Lego.

Quel operating model choisir ?

Nous nous sommes posés pas mal de fois la question concernant l’intérêt ou non d’une équipe transverse dédiée à ce design system. Au regard du nombre de projets reposant sur ce dernier, et souhaitant lui apporter une dimension groupe avec l’intégration des producteurs, nous avons mis en place la team constituée d’équipiers IT-CE / i BP / BPCE SEF / BPCE .

Ce collectif a pour objectifs :

  • D’animer la communauté d’usage en lien avec les technologies utilisées via la mise en place de meet-up / hackathon, afin de concevoir les outils nécessaires au bon fonctionnement de ce design system.
  • D’assurer un support et la montée en compétence des équipes de la 89C3 Factory et des producteurs du groupe (métiers financement, paiement, assurances).
  • De développer les composants dans les différentes technologies.
  • De garantir la maintenabilité de la stack applicative (nous y reviendrons dans le chapitre technique).

Une des clés était l’adoption du design system par l’ensemble des features team (équipes produits développant des fonctionnalités métiers). Pour ce faire, nous avons dédié un équipier de la team Phoenix (nom de l’équipe en charge du design system Néo) à un ensemble de projets afin qu’il soit le relais au niveau de cette organisation, avec pour objectif la mise en place d’une communication bi-latérale entre les projets et l’équipe transverse.

Grâce à ce mode de fonctionnement, nous avons très rapidement pu concevoir les composants communs nécessaires à différentes équipes et organiser le développement de ces derniers. Ainsi, toute personne travaillant sur une application reposant sur Néo a la capacité de penser modulaire et réutilisable.

Des outils communs dev et UX pour une meilleur interaction

Nous avons dû très rapidement nous organiser afin que les équipes UX et IT puissent travailler conjointement. Cela passe par la création d’une identité et la mise en place d’outils permettant de fluidifier la communication inter-équipes (uniformisation du nommage et versionning des composants). 

Les 3 principaux outils mis en place sont :

  • Le portail Néo : accessible depuis internet, il permet d’avoir une vision synthétique de la charte multi-enseignes, des différents composants versionnés par technologies, des gabarits par typologie d’application et plein d’autres ressources permettant aux UX et IT de concevoir leurs écrans dans le respect des identités digitales de marques du groupe.

  • Le portail RTFM (RIA Transverse Fabulous Manual) : uniquement accessible en interne pour les collaborateurs du Groupe BPCE, il permet aux IT d’avoir une vision au niveau implémentation de l’ensemble du catalogue des composants techniques ou graphiques, et cela pour l’ensemble des versions de notre framework.
  • Les applications démo natives : elles permettent, au même titre que le portail RTFM, de présenter les différents composants graphiques dans un contexte d’usage mobile.

Notre système d’outillage se devant d’être toujours plus performant, nous nous efforçons de les faire évoluer régulièrement afin d’y ajouter de nouvelles fonctionnalités (comme la prise en compte des design token par exemple).

Pour lire la suite, c’est par ici !

 

contact blog: soraya.fleury@bpce.fr