Comment le Design System peut vous apporter bonheur, santé et prospérité !!

Sur les Internets, ces derniers temps, on voit pas mal apparaître et disparaître, tels les circonvolutions en surface du Monstre du Loch Ness, le terme mystérieux et un poil grandiloquent de Design System.

« Super les amis ! Depuis que nous avons mis en place notre Design System, nos développeurs boivent 33% de café en moins ! » Kevin H, DSI

« Maintenant qu’on a un Design System, nos ventes ont été multipliées par deux ! «  Martine D, Directrice Marketing

« Notre Design System nous a apporté bonheur, prospérité et santé. » Jean-Michel C, DG

De manière assez magique, il semblerait que les Design Systems soient doués de vertus enchanteresses qui changent la vie des collaborateurs en entreprise. Comment ? Pourquoi ? Et pourquoi pas ? Le secret du Design System est un secret bien gardé, que seuls des initiés bien informés, connaissent et se partagent lors de bacchanales homériques, appelées convention UX. Mais, mais, mais, tenez-vous bien, et réjouissez-vous, c’est ce secret que je vais pourtant vous révéler aujourd’hui 😉

Qu’est-ce qu’un Design System ?

Les Design Systems visent à résoudre en réalité un problème que l’on retrouve dans toutes les grandes entreprises à forte activité digitale. Trois cas sont possibles :

• Des entreprises avec une pléthore de staff digital
• Des entreprises avec une pléthore d’interfaces à gérer
• Les deux

La problématique : comment garder une cohérence à la fois fonctionnelle, ergonomique et graphique des canaux digitaux quand on a une telle profusion de medias ou de personnes amenées à produire, modifier et maintenir ces medias. Telle est la question.
En réponse à cela, les UX Designers ont inventé, donc, les Design System, sorte de catalogue en ligne de composants digitaux, réexploitables à la demande, homogénéisés, up to date et en accord avec la charte graphique de la marque.

Les Design Systems sont un catalogue, mais pas seulement.

Mais plus qu’un catalogue, les Design Systems sont bien des outils numériques dynamiques. Un catalogue est un objet fixe, figé, non évolutif. Un Design System est un contenant, possédant de nombreux éléments qui peuvent évoluer, changer. D’autres éléments peuvent y être ajoutés.

Les Design Systems sont une banque de données

Les Design Systems doivent pouvoir être mis à la disposition de toute personne étant amenée à produire des interfaces digitales, quelque soit leur support (mobile, desktop, application, site web, interface vocale, borne interactive). Par définition, donc, un Design System est un outil accessible en ligne (par le Web).

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre Design System, cliquez ici 

Les Design Systems sont un outil

Les Design Systems sont un outil dans la mesure où ils emmènent des avantages immédiats en productivité aux équipes en charge du digitales :

• Les utilisateurs du Design System n’ont pas à créer ou à inventer de nouveaux éléments lorsqu’ils créent des medias pour le digital. Le Design System leur fournir tout ce dont ils ont besoin, simplement, immédiatement, et dans le format qui les intéresse
• Les développeurs y trouveront tout le code qui permet de créer les éléments du Design System sans avoir à les reprogrammer. En principe, un bon Design System leur permet de trouver un composant dans le code correspondant à la plateforme qu’ils utilisent : web PHP, OS Mobile, OS, etc. C’est d’ailleurs la force d’un bon Design System de pouvoir être implémenté très rapidement sans question à un environnement existant.

Les Design Systems améliorent la satisfaction utilisateur

Ils permettent d’améliorer la satisfaction utilisateur (que ce soit pour du Web ou des applications) en :

• Homogénéisant tous les composants d’interface : ce qui permet notamment de diminuer le temps d’apprentissage sur différentes applications si elles utilisent le même Design System, mais aussi de créer de meilleurs expérience utilisateurs en diminuant la rugosité de la navigation liée à des interfaces trop disparates visuellement, par exemple
• Et en créant un ensemble cohérent et optimisé : le Design System est en principe maîtrisé par les UX Designers ce qui en garantit la qualité en terme d’ergonomie et d’expérience utilisateur

Les Design Systems sont les garants de la marque

Enfin, dernier point, les Design Systems permettent de garantir à la direction marketing d’une entreprise le respect de son ADN de marque à tous les échelons de sa branche digitale.

Mise en oeuvre et maintenance : un chantier compliqué

En apparence, mettre en place un Design System peut paraître simple – fondamentalement, sur le principe, l’outil s’apparente à une charte graphique/ergonomique améliorée -, mais en réalité, cela peut vite s’avérer un chantier compliqué.

3 phases

Phase 1 : recensement et construction

Que vous partiez de rien ou partiez d’un existant, la problématique de la constitution du Design System ne se pose pas dans les même termes.

Cas de l’existant

Dans ce cas, vos canaux digitaux sont multiples ou pas, une charte graphique existe ou pas, des librairies de composants existent déjà ou pas. Un travail de recensement, de classification, de tri, de rangement et d’homogénéisation doit être accompli. C’est ce cas que Wexperience a présenté lors du Nord Conversion Day pour le compte de MMA (explications en vidéo ici). Un site web existait déjà, mais aucun élément graphique n’avait été défini comme élément clé de la charte. Nous avons donc du les recenser (grâce à un bot que nous avons développé pour l’occasion) et créer une première esquisse de catalogue.

Mais cela n’a pas suffi à définir l’ensemble du Design System, car, comme je l’ai expliqué précédemment, un Design System n’est pas une charte graphique, mais bien un catalogue dynamique de composants, exportables en code, et facilement intégrable à tous les supports de communication et d’interaction digitaux de MMA.

Cas de l’inexistant

La refonte de site (par exemple) est l’occasion par excellence de mettre en place un Design System. Dans ce cas, il est créé en amont de la création du nouveau site. Réalisé par les UX et les UI designers, il est livré alors au même moment que le design du nouveau site. Dans l’idéal, seul le Design System pourrait être livré, mais cela s’avère, en réalité, trop compliqué.

Un Design System doit être un outil extrêmement opérationnel. Comme il n’est pas une charte graphique, il obéit à une logique digitale. Et qui dit « digital » dit « code ». On ne peut donc pas livrer un Design System sans le code qui va avec.

Cette génération de code constitue la deuxième partie de cette première phase. Elle s’opère à partir d’un nouveau recensement : celui des différents supports digitaux de la marque et celui des différents mode de codage de ces supports. Pour y parvenir, un ou plusieurs ateliers de travail doivent être menés avec la DSI. Ensuite, pour chaque composant visuel du Design System seront attribués plusieurs blocs de code que pourront alors utiliser selon leur besoin les différents utilisateurs du Design System.

Si, par exemple, une entreprise utilise un CMS, le Design System devra être créé pour pouvoir embarquer dans le CMS ses composants.

Phase 2 : mise à disposition et formation

Il ne s’agit pas de hurler en faisant des bonds « J’ai créé un Design System ! J’ai créé un Design System ! » pour que vos collaborateurs l’utilisent. Là encore, une organisation rigoureuse est nécessaire pour que votre Design System ne reste pas lettre morte et aille finir aux oubliettes des « projets qui n’ont pas marché. » Deux phases sont nécessaires :

1 – Faites connaître votre Design System

Pour cela, il faut :

• Recenser tous les acteurs de vos plateformes digitales et définir ceux qui seront amenés à utiliser le Design System.
• Rassembler ces acteurs et leur présenter le concept de Design System
• Leur expliquer son utilisation, ses avantages et les bénéfices qu’ils en tireront (dernier point très important : embarquez vos utilisateurs, ne leur imposez pas). Ca sera le moment le plus difficile de votre projet : arriver à emporter l’adhésion et battre en brèche les réticences

2 – Former

Le Design System doit rester un outil simple dans son usage et le mot formation est sans doute exagéré par rapport à la difficulté qu’il y a à l’utiliser. Toutefois, pour deux raisons, il est primordial de passer du temps avec les utilisateurs du Design System :

• Pour valider son utilisation et les familiariser avec l’outil, leur mettre le pied à l’étrier, leur faire connaître et accepter l’outil
• Pour tester l’outil et y apporter des correctifs (sur la partie intégration notamment)

Phase 3 : utiliser et faire évoluer

Un Design System est un objet vivant. Il doit évoluer dans le temps. Et cela pour plusieurs raisons :

• De nouveaux éléments s’ajoutent au Design System
• D’autres disparaissent
• Les éléments s’améliorent (par le design ou par le code)
• Des besoins non prévus sont remontés par les collaborateurs
• Le design graphique de votre marque évolue
• De nouvelles plateformes techniques doivent l’utiliser

Pour répondre à ces évolutions, un Gardien du Design System doit être nommé au sein de votre entreprise. De profil UX, cette personne doit pouvoir garantir plusieurs aspects du Design System :

• Cohérence ergonomique du Design System lui même : les nouveaux éléments ajoutés doivent être cohérents avec les éléments déjà existants
• Cohérences des supports digitaux avec le Design System
• Support aux équipes en charge du digital : UX/UI designers, marketers, développeurs, intégrateurs, etc.
• Surveillance des mises à jour
• Recueil des nouveaux besoins en relation avec la Direction Digitale, mais aussi avec les équipes opérationnelles

Pour MMA, pour aider ce Gardien, nous avons développé en plus dans notre Design System, un système de gestion des versions, qui permet de garantir et limiter les risques d’écarts des supports digitaux par rapport au Design System.

Risques

Le risque principal du Design System est de ne pas s’en servir.

En tant qu’outil nouveau et innovant, son adoption dépendra de la capacité d’une entreprise à convaincre ses utilisateurs de l’utiliser. Cela passe par plusieurs arguments :

• Une bonne préparation mentale au changement avec :
• • Une préparation de l’outil avec les principaux concernés : les utilisateurs. N’oubliez pas d’inclure tous vos acteurs dans le projet et de les prévenir de son existence. N’hésitez pas à faire remonter leurs suggestions et desideratas. Prenez en compte leurs opinions et témoignages. Trouvez des ambassadeurs.
  • Une présentation générale de l’outil et de tous ses avantages et bénéfices pour les utilisateurs : le Design System doit être perçu comme un outil qui leur fera gagner du temps et leur simplifiera la vie.
  • Des séances de démonstration et de formation pendant lesquels vous pourrez encore remonter des défauts et apporter des améliorations. Ces séances devront presque faire office de tests utilisateurs et doivent être l’occasion de peaufiner votre Design System de manière à favoriser le plus possible son adoption par des moyens ergonomiques.

• Un rôle proactif des ambassadeurs et du Gardien du Design System
• Dans les premiers temps, le Gardien et les ambassadeurs devront s’astreindre à exercer une surveillance continue des éléments digitaux produits et à rappeler les bonnes pratiques. Il faut que l’usage du Design System devienne une habitude chez les collaborateurs de l’entreprise. Personne ne doit y échapper 🙂
• Le Gardien et les ambassadeurs doivent mettre en place un système ouvert de communication pour répondre rapidement aux demandes et pouvoir apporter des correctifs au Design System mis en place.

• Une mesure du changement
  Bien que cela soit compliqué, pourquoi ne pas mettre en place un NPS (cf UX.Care) pour mesurer la satisfaction du Design System vis à vis de ses utilisateurs. Pouvoir montrer par A+B sa progression permettra d’obtenir un meilleur soutien de la Direction Digitale pour défendre le projet au CODIR ou auprès du Contrôle de gestion.

Le Design System ne doit pas être trop contraignant ni limiter la créativité

Le Design System ne doit pas devenir un carcan ou un corset trop serré. Une certaine créativité doit être permise et doit être admise de la part de tous les acteurs du digital de votre entreprise. Pour cette raison, l’équipe du Gardien doit être capable de remonter toutes les remarques, critiques, suggestions qui émanent de ces différents acteurs. Elle doit être à même de pouvoir proposer rapidement des solutions. Ou bien, même dans certains cas, d’autoriser la non utilisation du Design System (cas très exceptionnels).

• Les écarts au Design System ne doivent pas être sanctionnés, mais corrigés dans une démarche pédagogique (pourquoi c’est important de bien respecter le Design System).
• Les composants du Design System doivent toujours pouvoir être remis en cause : notamment par des remontées lors de tests utilisateurs.

Le Design System ne doit pas être une usine à gaz

Il va de soi (mais ça fait du bien de le répéter) que le Design System doit lui aussi procurer une bonne expérience utilisateur. Une ergonomie trop compliquée, un Design System non accessible, des composants trop nombreux, cela freinera son adoption aussi sûrement qu’une mauvaise pédagogie.

Le Design System est réservé aux entreprises ayant une grosse production digitale

N’imposez pas un Design System à une équipe trop petite ou sous-dimensionnée. Le système D fonctionne très bien dans ces cas là, et il a très bien fonctionné pendant des années pour de nombreuses entreprises. Le Design System apporte beaucoup d’avantages, mais ne doit être réservé qu’à des entreprises ayant une maturité digitale avancée et ayant déjà fait l’expérience de la décohérence de ses canaux digitaux.

Ce point, crucial, est à valider avant de vous lancer dans tout projet de Design System.

Bien comprendre le Design System : l’Atomic Design

Pour terminer ce tour d’horizon, un mot sur l’Atomic Design.
Encore un terme avec le mot « Design » à l’intérieur 😉 Vous vous doutez donc bien qu’il y a une relation.
L’Atomic Design est une méthode de conception qui tire son inspiration de la récurrence des composants d’un site Internet. Comme vous l’avez peut-être remarqué, il est possible de décomposer un site entier en quelques éléments basiques, que l’on peut agencer de différentes manières pour composer des pages (le menu de navigation, la pagination, le bloc produit dans une page liste, etc.)
L’Atomic Design consiste donc à concevoir un site par ses composants basiques, puis de construire des pages webs à partir de ces composants.
Le Design System reprend ce concept tel quel et on peut dire de lui qu’il n’est qu’une bibliothèque de ces composants « atomiques ».

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre Design System, cliquez ici 

Conclusion

Un Design System ne doit pas être une lubie parce que c’est un terme à la mode. Mettre en place un tel outil nécessite de la mesure, de la préparation, de la concertation et un certain savoir-faire qui n’est pas à la portée de toutes les équipes digitales. Comme je l’écrivais plus haut, un certain niveau de maturité est nécessaire.
Pour cette raison, Wexperience a développé sa propre solution de Design System (ce que nous appelons le Design System by Wexperience) pour aider ses clients à transformer en succès ce qui peut facilement devenir un cauchemar financier. Pour le garantir, nous apportons plusieurs cautions :

• • Une étude rigoureuse du contexte de l’entreprise et de ses contraintes (notamment techniques)
  • Une expertise reconnue au niveau design UX et graphique
  • Une intégration personnalisée à l’environnement de production
  • Un accompagnement à la conduite du changement

Et bien plus encore !

Votre entreprise souffre de cacophonie digitale ? Votre production de médias est éparpillée aux quatre coins de votre organisation ? Vous sentez qu’il est temps d’optimiser vos coûts ? Nous pouvons vous aider ! Contactez-nous et nous vous apporterons bonheur, santé et prospérité 🙂