Ces dernières années le Design System est devenu l’outil indispensable et incontournable à l’élaboration de projets complexes. Dans cette trilogie d’articles nous allons voir comment créer, et mettre en place un Design System au sein d’un projet, avec qui et pour qui organiser un Design System, et dans un premier temps pourquoi investir dans la création d’un Design System et quels sont les bénéfices d’un tel outil.Cet article ne s’adresse pas uniquement aux designers. Nous allons aborder le sujet de forme holistique, nous adressant à divers métiers, protagonistes et utilisateurs d’un projet.
Je suis Stéphane Munnier, product designer chez Monsieur Guiz en mission à la Société Générale où je travaille dans la FT EERAD (Entrée En Relation À Distance). Depuis fin 2020, la Société Général a lancé le projet de la création de son Design System AVENIR, projet dans lequel je suis impliqué en tant que testeur. Dans cet article j’essaierais au mieux de faire un retour d’expérience en illustrant mes propos avec l’exemple de la Société Générale.
Design System c’est quoi ?
Bien souvent le Design System est réduit à une « bibliothèque UI », or c’est loin d’être le cas, ou du moins c’est bien plus qu’un simple kit UI. C’est le point de convergence de toutes les parties prenantes d’un projet. On y retrouve toutes les références, les principes et les règles liées à la marque et utiles à la conception d’un produit digital.Le Design System inclue par exemple :
- La guideline de la marque et des produits ainsi que les principes UX, UI.
- Les valeurs et l’identité de la marque et des produits
- Une librairie de composants et leurs règles d’utilisation et de comportements pour les designers et pour les développeurs
- Les règles d’interaction et d’animation
- La charte éditoriale
- …
Le Design System n’est pas un livrable, un produit fini, mais une organisation vivante qui comprend des livrables pour les designers, le développeurs, et plus généralement pour tous les acteurs qui gravitent autour du design digital. C’est un véritable framework dans lequel les produits et projets s’inscrivent. L’investissement dans la mise en place d’un Design System présente d’énormes avantages pour une marque.
Investir dans un Design System lors de l’évolution du produit, et des équipes.
Beaucoup d’entreprises rencontrent des problèmes lorsqu’elles ressentent la nécessité de faire évoluer leurs produits. Cela a pour conséquence une augmentation non linéaire de l’effort et un besoin de personnes supplémentaires pour maintenir l’expérience utilisateur cohérente sur tous les produits.
Ces nécessités d’évolution et l’ajout de nouvelles équipes créent principalement des problèmes d’organisation. Dans une équipe en pleine croissance il est difficile de maintenir une bonne synchronisation entre designers et développeurs. Il y a souvent des pertes d’information. Contrôler et aligner tous les projets devient une tâche ardue nécessitant toujours plus de personnel. Même dans ce cas, il est difficile de garantir par exemple le respect des chartes, des patterns, des styles. Maintenir une qualité constante sur l’ensemble de l’écosystème est également un challenge. Vous vous retrouvez avec un ensemble de produits semi-alignés où les composants peuvent être amenés à être reconstruits de différentes manières. C’est une perte de temps et d’énergie et cela peut rapidement créer un certain désordre.
Un Design System permet de faire évoluer le produit tout en contrôlant la taille des équipes en centralisant la conception et les décisions et en permettant le maintien de la cohérence de l’UI et potentiellement de l’UX.
Un Design System est à la fois un ensemble de codes communs utilisés autant par les designers que par les développeurs, une guideline et un framework de design.
Ainsi, une fois le Design System créé et fonctionnel, les designers peuvent se concentrer sur un flux de travail lié à la conception ou aux userflows par exemple, plutôt qu’à la création de détails et d’éléments d’interface.
Les décisions concernant les guidelines et les éléments d’interface comme les couleurs, les grilles, les typos etc, sont centralisées dans le Design System par une équipe dédiée. Ainsi la qualité, la cohérence de la marque ou du produit n’est pas altéré par l’ajout de nouvelles équipes ou de nouveaux membres dans une équipe. Il en va de même pour le code donc pour les équipes de développeurs.
De la même manière, les composants validés sont également développés et centralisés. Ils sont à disposition des développeurs pour créer les les pages. On parle alors d’un worflow « Design to Code ». Les changements effectués en design, sont déployés dans les composants développés, qui sont eux-mêmes mit à jour en production.
Utiliser un Design System pour une manutention et amélioration continue du ou des produits.
Pour diverses raisons, les modifications et les mises à jour de l’interface utilisateur sont fréquentes. Soit après un A/B test, soit pour améliorer l’accès à un contenu. Ou bien encore parce que la marque a évolué et certaines caractéristiques des composants doivent être actualisées.
Le Design System étant à la fois un outil central et externe, cela facilite grandement la manutention et la mise à jour des produits. En effet, les correctifs et les améliorations apportés au produit grâce au Design System se répercutent instantanément à tous les niveaux du produit. Et ceci grâce à l’effort d’une seule équipe dédiée.
Un Design System permet d’optimiser la vitesse et la qualité de la production.
À long terme un Design System a pour vocation d’optimiser la vitesse de production, la qualité des livrables et la cohérence de l’ensemble de l’écosystème de la marque ou du produit.
La cohérence et la qualité ont évidemment un fort impact sur l’image du produit et l’expérience qu’en a l’utilisateur ce qui entraine aussi des conséquences sur le choix de votre produit par le client. Une meilleure vélocité de production et de développement permet des livraisons et un déploiement plus rapide sans augmenter forcément la taille des équipes.
Produire plus vite, tout en respectant un niveau de cohérence et de qualité optimale. Déployer plus rapidement et plus facilement de nouvelles fonctionnalités.
La mise en place d’un Design System est la solution à ces problématiques tout en évitant d’augmenter les coûts voire même en les réduisant.
C’est possible grâce à la standardisation non seulement des composants d’interfaces mais aussi des pratiques. Tout ceci géré par une équipe dédiée, centralisant la conception du Design System et déployant ensuite les éléments dans l’ensemble des équipes. Les designers travaillant avec les composants fournis dans une bibliothèque liée et les développeurs avec des tokens de code. Ainsi comme nous l’avons vu plus haut, les designers peuvent se concentrer sur d’autres problématiques.
Pour les développeurs, l’interprétation du design en code devient beaucoup plus facile. La plupart des éléments d’interface est construite avec des composants existants. Les développeurs peuvent désormais se concentrer sur la logique.
Un autre avantage est qu’il devient facile et rapide de construire plusieurs versions d’un parcours ou d’une même interface permettant ainsi de réaliser à moindre coûts des A/B tests.
De son côté l’équipe dédiée au Design System se concentrera à 100% sur celui-ci et élaborera un produit de la plus haute qualité et dans les moindres détails.
Respecter et maintenir une cohérence grâce au Design System.
Quand un utilisateur se sert d’une application, il interagit avec une marque sans savoir forcément que les différentes fonctionnalités ou les différents produits ont été réalisés par différentes équipes. Un Design System permet d’améliorer la cohérence de la marque, du produit et de ses fonctionnalités et donc par conséquent d’améliorer l’expérience utilisateur. En définissant et standardisant les composants, les interactions, les templates sur l’ensemble d’un écosystème, cela permet à toutes les équipes produit de rester cohérentes.
La réutilisation des mêmes codes (composants, interaction, comportements, etc.) améliore l’expérience utilisateur en réduisant la charge mentale et les irritants, ce qui conduit à une meilleure conversion.
Dans les équipes, cette cohérence facilitera le travail et rendra le projet compréhensible plus facilement et rapidement.
Un Design System permet de combler le fossé entre la marque et le produit.
Il n’est pas rare de rencontrer des incohérences entre les guidelines de la marque et les produits et applications. Bien souvent les personnes ayant élaboré les guidelines et celles produisant le ou les différents produits ou applications ne sont pas les mêmes, ni de la même équipe et quelques fois pas de la même entreprise.
Le fait qu’une seule équipe traduise une marque en éléments d’interface peut résoudre ce problème mais ça reste un exercice complexe et délicat. D’une part respecter les valeurs de la marque et d’autre part tenir en compte des contraintes techniques et de notions comme l’accessibilité par exemple. Il faut donc une équipe transverse à tous les projets et produits de la marque, une équipe qui a une expérience large de l’utilisation de la marque sur plusieurs device, supports et plateformes.Là encore c’est le travail de l’équipe dédiée au Design System.
En résumé, un Design System soigneusement conçu garantit que la personnalité et les valeurs de la marque soient présentes sur tous les produits de façon cohérente.
Et le Design System de la Société Générale ?
À la Société Générale, le projet de mise en place d’un Design System a été très progressif. La première tentative a été la mise en place d’une librairie commune entre designers et développeurs en 2019, mais c’est en 2020 que l’organisation en Design System a débutée, sur la demande de la direction.
Après un premier test, une équipe a été constituée au sein des équipes digital pour coordonner la mise en place du Design System. Cette équipe se compose d’un designer, pour la création et standardisation des symboles, d’un développeur pour les composants REACT et d’un product owner pour le suivi de ce qui devient un produit à part entière.
La création du Design System a nécessité la création d’une Feature Team dédiée pour sa mise en place, sa construction et sa maintenance. C’est un produit et un projet à part entière, ce qui fait toute la différence. Ensuite au sein de la gouvernance on retrouve des représentants de différentes entité de BDDF (Banque De Détail en France), mais surtout le projet prend de l’ampleur au sein du groupe et fédère d’autres entités avec qui BDDF échangeait peu.
La création du Design System nécessite une équipe dédiée pour sa mise en place. Spécifiquement dans une large organisation, avec des audiences variées. Cette équipe DS (Design Sytem), effectue la promotion de l’organisation Design, la conduite du changement et s’assure de la mise en place des premiers livrables. C’est le cas des guidelines (hébergée sur Zeroheight), de la librairie (actuellement sur Sketch), et des composants REACT délivrés via Storybook.
Jean-Baptise Kechi, PO de la FT Design System
Le Design System Avenir (DS de la Société Générale) à pour objectif un déploiement dit « Design to Code » qui assurera la cohérence des interfaces et le suivi des livraisons sur l’ensemble de la chaine Design. C’est l’objectif 2022. Cette année 2021 étant dédiée à la création des composants pour les sites particulier, professionnel et entreprise.
Les conséquences ?
La connexion des sites web et applications au Design System, aura un impact fort pour les clients de la Société Général dans le sens où ils bénéficieront d’une interface unifiée. Les équipes produits auront également plus de temps pour proposer des services innovants.
Actuellement, de nombreux travaux sont liés à la mise à jour des composants et des chartes graphiques. Le Design System Avenir se chargera de ce travail. Les équipes produits auront une boite à outils complète, à disposition, pour créer les interfaces de demain et les produits seront alignés et maintenus plus facilement d’un point de vue de l’expérience mais aussi du code.
