Le design system, accélérateur de la conception des projets

Interview de Nicolas Yanaï, UX/UI Designer chez Neoxia

Bonjour Nicolas, peux-tu nous présenter ton parcours?

Je suis issu d’une formation atypique, puisque j’ai commencé mes études par une licence de gestion & commerce en Nouvelle-Calédonie. Après avoir réalisé une année de formation certifiante à l’usage de solutions numériques de création à l’école Emile Cohl de Lyon, j’ai poursuivi par un diplôme en web design/creative business et une courte expérience en publicité sur le web. À la suite de quoi j’ai voulu m’orienter vers des services plus tournés vers les utilisateurs professionnels. Je suis maintenant un heureux UX/UI designer chez Neoxia depuis presque deux ans.

Qu’est-ce qu’un design system ?

Le design system est ce qu’on appelait autrefois la charte web, le support qui définit le statut de tous les éléments graphiques du site web. Contrairement à la charte, le design system est un outil vivant, il évolue.

Il se compose de plusieurs éléments comme les boutons d’action, dont on va décrire les différents états (activé, désactivé, pressé, survolé) ; les typographies (polices, hiérarchie, évolution selon les formats d’écran) ; les éléments visuels (format des images, contraintes techniques liée aux images) ; les comportements des sélecteurs, boutons radio, etc. On va chercher à y inclure les éléments constitutifs du service dans son intégralité.

On va y inclure aussi tous les usages des utilisateurs autour de ces éléments. ils doivent avant tout être simples, intuitifs et répondre le plus efficacement possible à leurs besoins. Enfin la troisième composante, souvent omise est le langage. C’est un aspect non négligeable, car adopter le langage de ses utilisateurs c’est un pas de plus vers la confiance qu’il accorde à la solution.

Quelle forme prend ce système ?

Le support du design system est un véritable sujet de discussion en ce moment chez nous. Le principe est celui d’une plateforme partagée. De bons outils spécialisés comme Sketch ou Zeplin peuvent en être la vitrine. Cependant, il y a un enjeu d’accessibilité par toutes les parties prenantes et Sketch, par exemple, est propriétaire Apple. Il n’est donc pas utilisable par tous. Au contraire, GitHub qui n’est pas spécialement orienté UX/UI mais est libre d’accès via le web peut très bien faire l’affaire.

Comment va-t-on créer un design system ?

Tout dépend du contexte, il existe plusieurs modèles de conception standard. Sur des projets de petite envergure, on sera plutôt sur un modèle solitaire, même si je n’aime pas trop le terme. C’est une démarche où le designer va être seul chargé de créer le design system. Il va bien sûr travailler avec l’ensemble des collaborateurs projet pour le concevoir, mais c’est lui qui va en fournir tous les éléments.

Sur des projets de plus grande ampleur, on va plutôt utiliser un modèle dit fédéré, qui suppose une plus grande implication directe des parties prenantes. Concrètement, le(s) designer(s) vont créer les assets, les guidelines et le langage constituant le service et les devs vont apporter les ressources au niveau du code (HTML/CSS par exemple) si nécessaire. L’entreprise va quant à elle s’assurer de la cohérence avec son univers de marque. Si le designer en reste la clé de voûte, les devs ont une grosse part du travail à faire.

As-tu un cas de projet où un design system a été utile ?

On travaille en ce moment à la refonte d’un service de conception de vidéos en ligne. On travaille en mode agile. La version 2.1 est actuellement en alpha-test, pour une release début 2019. C’est un très bon exemple de l’utilisation d’un design system : il va permettre de faire évoluer le graphisme de façon cohérente au fil des itérations.

Au départ, nous avions travaillé sur une bibliothèque idéalisée, c’est-à-dire sans contraintes techniques, en se basant uniquement sur des retours utilisateurs. Ensuite, on a pu engager une première base de développement et faire évoluer la bibliothèque. Au fil des itérations, on l’a modifiée 5 ou 6 fois. Un tel outil permet de rendre les composants flexibles et scalables, et peuvent donc être réutilisés sur l’ensemble des supports digitaux d’une entreprise (site web, plateforme, e-commerce,etc…).

Un exemple concret de gains réalisés sur une fonctionnalité ?

Bien sûr ! Nous avions par exemple prévu une fonctionnalité d’ajout d’un écran en cours de création vidéo, pour laquelle nous avions pensé une modale. Au fur et à mesure des tests clients, on s’est rendus compte qu’ils ne la comprenaient pas. On a donc acté qu’on avait fait fausse route et on a lancé un cycle d’atelier, conception, test. On y a passé une journée de travail. Dans ces moment la, le design system est un véritable levier. En effet, nous ne sommes pas repartis de zéro mais d’éléments réutilisables, scalables ce qui nous a fait gagner énormément de temps en conservant la cohérence des ensembles déjà présent sur la plateforme.

Est-ce une pratique totalement acquise?

Pas tout à fait. De façon générale, utiliser un design system, c’est conduire le changement. Parfois, les devs sont réfractaires à cet instrument, car il se doit d’être vivant. Cela implique de l’optimiser, le faire évoluer pour répondre aux nouveaux besoins et/ou nouvelles fonctionnalités. Ce n’est pas le cas chez Neoxia, mais il m’est arrivé dans le passé de travailler avec des collaborateurs qui n’en comprenaient pas l’intérêt. Des collègues connaissent des difficultés à convaincre, notamment en travaillant avec de grosses structures qui utilisent des méthodes plus traditionnelles et doivent conserver une ligne fixe tout au long du projet. Il est important que l’outil soit inclusif, qu’il puisse s’adresser à tous ses utilisateurs, quelque soit leur niveaux de maturité numérique.

As-tu une recommandation à formuler aux lecteurs qui voudraient tenter d’utiliser un design system pour la première fois ?

Travailler à partir d’un design system est exigeant. Il faut assurer une bonne communication entre les devs et les designers, et plus généralement avec les futurs utilisateurs de l’outil.

Il faut savoir estimer l’ampleur d’un projet, bien envisager le niveau de granularité et ne pas se surcharger, sinon on ne s’en sort plus ! Enfin, la clé d’un référentiel réussi est qu’il soit “atomic”. Le design system se pense en termes de composants et non pas en terme de frames, ou pages, ce qui le rend bien plus flexible. Le principe d’atomic design devient essentiel pour l’assurer.

En ce qui me concerne, je suis animé par l’idée qu’on peut toujours s’améliorer. Dans un milieu qui évolue très vite, je trouve intéressant de toujours se perfectionner, y compris par petites touches. Cette façon de faire le permet.