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

24 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é.

Lien vers la partie I

Un peu de technique

Ayant abandonné notre modèle historique d’application web monolithe dans un souci d’efficacité et de maintenabilité, nous avons dû nous appuyer sur un nouveau modèle permettant à nos équipes de travailler de façon industrielle dans un contexte agile à l’échelle, nous nous sommes donc efforcés de gagner en granularité. Pour ce faire, nous avons très rapidement fait le choix de partir sur des technologies RIA / ROA permettant naturellement de dissocier le front du back.  
 
Si l’on se concentre sur le périmètre impactant directement le design system, à savoir le RIA, nous avons fait le choix en 2017 de partir sur le framework Angular. Son principal atout à cette période était son orientation « modulaire ».

Aujourd’hui, nous pourrions très bien en choisir un autre comme VueJs ou React. Ce qui a été important dans notre choix initial, c’est d’être bien conscient qu’un framework javascript est totalement « volatile » et que nous n’avions aucune garantie dans le temps de sa pérennité. De fait, nous avons fait le maximum pour nous appuyer sur des capacités standard de l’HTML ce qui nous permet dès aujourd’hui de ne pas être pieds et mains liés à Angular . 

Ce dernier point est très important dans l’organisation et la façon de travailler de notre équipe Design System. En effet, même si 80 % des travaux de cette équipe sont réalisés avec Angular, 20 % restent dédiés à la conception et la réalisation de composants vanilla (composants Web entièrement basés sur HTML, CSS, JavaScript) . Cette phase est très importante car elle nous permet : 

  • D’affiner les spécifications au plus tôt dans la chaine de fabrication.
  • De mettre en situation le composant dès la phase de conception.  
  • D’avoir un design system détaché du framework afin de ne pas être en liaison direct avec ses évolutions. 
     

Le numérique responsable dans tout ça  

Bien entendu, les travaux sur le design system s’intègrent complétement dans la charte numérique responsable signée par le groupe et cela pour plusieurs raisons :  

  • Le développement d’application orienté composant, rentre « By Design » dans une logique d’éco-conception. Par exemple, la diminution du poids de nos applications par la suppression de code redondant (gain pouvant fluctuer entre 20% et 30%) diminue drastiquement les échanges réseaux  
  • L’accessibilité d’un composant peut être intégrée dès la phase de conception et se retrouver sans surcoût dans l’ensemble des applications l’utilisant. A ce sujet, l’équipe Design System teste actuellement l’outil equa11y qui permettrait de valider l’accessibilité de nos applications.  

Élargissement du Design System au mobile 

Depuis Janvier 2020, des équipiers Android et IOS sont venus renforcer l’équipe afin d’élargir le design système aux applications mobile. À date, des applications démo dans les différentes technos sont déjà disponibles et le portail Néo intègre une vision consolidée multi-technos de l’ensemble des composants groupe.

Après 4 ans de fonctionnement, nous pouvons dire que notre organisation autour du design system est mature. La coordination IT / UX se fait naturellement et les évolutions de la charte se déversent au fil de l’eau dans les produits.

Nous totalisons 110 composants actifs qui se répartissent de la façon suivante : 60% graphique / 40% technique.

Pour autant, nous avons de nouveaux défis à relever. En effet, nous allons devoir rapidement décliner ce mode de fonctionnement afin de le passer à l’échelle pour adresser les applications du canal collaborateur avec leurs spécificités. Enfin, nous devons continuer à nous ouvrir aux différentes entités du groupe (Natixis/privatif banque et caisse) pour qu’elles nous rejoignent comme contributeurs dans Néo . 

 
 

contact blog: soraya.fleury@bpce.fr