En tant que Senior Principal Designer chez Europcar, quelles sont tes missions au quotidien ?
Ali Chemlal. « Je suis en charge du Design System, de produits BtoC et de sujets transverses (Accessibilité…) ».
Selon toi, qu’est-ce que l’utilisation d’un Design System a apporté au sein de ton entreprise ?
A.C. « Nous avons grandement gagné en efficacité, les choix design sont désormais consignés dans un environnement centralisé, et partagés via différents composants réutilisables. Les nouveaux designers sont rapidement opérationnels, car tout est accessible sur Sketch Cloud.Avec l’approche multi-marques mise en place, il est aussi possible d’appliquer une feuille de style graphique différente sur les composants fonctionnels ».
Quel est selon toi le workflow idéal pour permettre une fluidité dans la création ou la modification de composants dans le Design System ?
A.C. “Dans un monde idéal, il faudrait pouvoir embarquer les nouvelles recrues dans l’équipe Design System – au moins lors des premières semaines – afin qu’elles puissent intégrer, protéger, et évangéliser l’esprit Design System par la suite. Pour le workflow, c’est à définir selon chaque organisation. D’emblée, il faut essayer de mettre en place une gouvernance claire avec un binôme designer/développeur qui servira comme référent/curateur du Design System. Les sous-atomes, atomes et molécules sont créés en amont par le binôme de départ et tous les designers peuvent soumettre des composants plus complexes par la suite. C’est un peu un mode centralisé hybride. On peut faire apparaître les différentes étapes de vie et d’évolutions des composants dans un Kanban ou un tableau Trello ».
Atomes et molécules... Les atomes désignent le composant le plus petit du Design System (exemple : un bouton). Il ne peut pas être divisé. La molécule est une composition d'atomes (exemple : un menu avec plusieurs boutons). Enfin le subatomique est la manière de définir l'atome dans ses déclinaisons (exemple : états du bouton, survol, désactivé...).
Le workflow idéal d’Ali :
1. Identification / vérification du besoin puis prototype rapide avec les atomes existant.
2. Soumission du composant aux curateurs du Design System, avec comme feedbacks possibles :
– création d’un nouveau composant
– évolution sur composant existant
– composant existant
– besoin trop spécifique pour le DS
3. Le composant est ensuite réalisé graphiquement, documenté et codé. Dans certains cas, le composant peut aussi être codé directement puis soumis au designer pour intégration dans la plateforme graphique.
4. Le composant est testé par les designers, les développeurs et le service Qualité
5. Livraison et mise à disposition du composant et de sa documentation, qui devient visible et utilisable par tous.
As-tu pu tester plusieurs outils de conception, maquettage, prototypage, rédaction et présentation des guidelines aux équipes ? Si oui, lesquels te semblent être une combinaison gagnante aujourd’hui en 2020 ?
A.C. “Sketch for teams regroupe sous un même toit la conception, le maquettage, le versioning et, en version béta, les spécifications. Le prototypage y reste encore perfectible. Souvent, il vaut mieux recourir à un outil spécifique (Invision, Marvel, Origami…) si l’on souhaite un prototype haute-fidélité.
Pour la présentation des guidelines du DS, je pense qu’il faut étudier une solution qui convienne à la fois aux développeurs et aux designers”.
Une marque forte, c’est une marque qui arrive à conserver des touches créatives uniques sur ses produits, tout en intégrant l’accessibilité dans son ADN”.
Les outils de maquettage évoluant très vite, encore plus vite récemment, comment pressens-tu ces évolutions ? Se dirige-t-on vers un outil unique pour l’ensemble du workflow ?
A.C. “Encore une fois, tout dépend de l’organisation dans laquelle on évolue et de son budget ! Chaque éditeur semble intégrer un maximum de fonctionnalités sous sa bannière, et l’on se retrouve à devoir faire des compromis sur certaines fonctionnalités.
Sketch et Figma assurent désormais le versioning mais aussi les spécifications pour les développeurs, certains outils deviennent alors redondants. Certaines solutions plus spécialisées permettent de fournir un livrable plus spécifique.
“Privilégier au maximum une accessibilité inclusive, by design”.
Penses-tu que l’atomic design va encore évoluer ?
A.C. “Chacun doit essayer de s’approprier cette méthodologie. Dans notre équipe, j’ai proposé une approche sub-atomique, pour plus de clarté. Après, on voit aussi des organisations qui se détachent de l’atomic design, car trop complexe. Et d’autres qui vont l’étendre, en fonction de leurs besoins. Dans tous les cas, l’atomic design reste une fondation qui peut être agrémentée de nouveaux ingrédients”.
L'atomic Design c'est : - L’abolition de la notion de page - La conception d’interface dans des environnements non connus via des éléments modulaires - Une décomposition des éléments d’interface comme suit : atome, molécule, organisme, layout.
Es-tu partisan d’un Design System inclusif sur les normes d’accessibilité, ou bien d’une adaptabilité via des préférences utilisateur ?
A.C. “Quand je vais voir un film anglais au ciné, perso, j’aimerais bien pouvoir désactiver le sous-titrage. Je pense qu’il faut poser cette question aux utilisateurs des plateformes, mais surtout privilégier au maximum une accessibilité inclusive, by design.
Devoir configurer des préférences utilisateurs n’est pas quelque chose de standard entre les différents sites et applis et vont parfois à l’encontre des préférences définies par l’utilisateur au niveau de son système.
Ou alors, on risque malheureusement encore une fois de se diriger vers une solution définie par le législateur, comme pour les cookies !”
Avec les normes d’accessibilité, les Design Systems se standardisent de plus en plus autour du Référentiel général d’amélioration de l’accessibilité (RGAA). Tu crois qu’on va vers une sorte de template unifié (j‘entends par là qu’on partirait d’un socle commun, comme un framework) ?
A.C. “C’est déjà un peu le cas quand on base son design sur les frameworks d’Apple et de Google. Cela limite la prise de risque graphiquement et au final, toutes les apps se ressemblent. Une marque forte, c’est une marque qui arrive à conserver des touches créatives uniques sur ses produits, tout en intégrant l’accessibilité dans son ADN”.
Il est souvent reproché aux design systems de s’adresser en priorité – ne serait-ce que par son nom – aux designers. Qu’en penses-tu ? Est-ce quelque chose de ressenti au sein de vos équipes ?
A.C. “C’est peut-être là un biais qui apparait quand on fait un calque de l’anglais au français. Un Design System, c’est un système de conception, en bon français de France.
Pour éviter cette appropriation du système par le Design, choisir avec les équipes un nom pour le produit est un bon début. Chez Europcar, c’est “YES” pour “Your Experience System”.
Un design system fonctionne-t-il mieux avec une gouvernance ou bien en collaboratif selon ton expérience ?
A.C.“Au début d’un design system, une gouvernance solitaire (avec une équipe coeur) et /ou centralisée permet d’avancer rapidement. Mais il faudra prévoir un budget pour éviter que cet état initial ne devienne pérenne.
Au fur et à mesure que le produit Design System grandit, passer à une gouvernance hybride (centralisée et répartie) permettra de s’ouvrir au plus grand nombre et assure une contribution/mise à jour continue”.