{"id":17,"date":"2021-02-05T16:38:57","date_gmt":"2021-02-05T15:38:57","guid":{"rendered":"http:\/\/remidudragne.com\/le-blog\/?p=17"},"modified":"2021-02-18T16:19:36","modified_gmt":"2021-02-18T15:19:36","slug":"grace-au-design-system-nous-avons-gagne-en-efficacite","status":"publish","type":"post","link":"https:\/\/remidudragne.com\/le-blog\/grace-au-design-system-nous-avons-gagne-en-efficacite\/","title":{"rendered":"\u00ab\u00a0Gr\u00e2ce au Design System, nous avons gagn\u00e9 en efficacit\u00e9\u00a0\u00bb"},"content":{"rendered":"\n

Au cours d’\u00e9changes par t\u00e9l\u00e9phone et par mail, j’ai eu la chance de pouvoir interroger Ali Chemlal \u00e0 propos du Design System Europcar…<\/h4>\n\n\n\n
<\/div>\n\n\n\n

En tant que Senior Principal Designer chez Europcar, quelles sont tes missions au quotidien ?<\/span><\/strong><\/p>\n\n\n\n

Ali Chemlal<\/span><\/strong>. \u00ab\u00a0Je suis en charge du Design System, de produits BtoC et de sujets transverses (Accessibilit\u00e9\u2026)\u00a0\u00bb.<\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n

Selon toi, qu’est-ce que l’utilisation d’un Design System a apport\u00e9 au sein de ton entreprise ?<\/span><\/strong><\/p>\n\n\n\n

A.C<\/span><\/strong>. \u00ab\u00a0Nous avons grandement gagn\u00e9 en efficacit\u00e9, les choix design sont d\u00e9sormais consign\u00e9s dans un environnement centralis\u00e9, et partag\u00e9s via diff\u00e9rents composants r\u00e9utilisables. Les nouveaux designers sont rapidement op\u00e9rationnels, car tout est accessible sur Sketch Cloud.Avec l\u2019approche multi-marques mise en place, il est aussi possible d\u2019appliquer une feuille de style graphique diff\u00e9rente sur les composants fonctionnels\u00a0\u00bb.<\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n
\"roadmap\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n

Quel est selon toi le workflow id\u00e9al pour permettre une fluidit\u00e9 dans la cr\u00e9ation ou la modification de composants dans le Design System ?<\/span><\/strong><\/p>\n\n\n\n

A.C<\/span><\/strong>. \u201cDans un monde id\u00e9al, il faudrait pouvoir embarquer les nouvelles recrues dans l\u2019\u00e9quipe Design System – au moins lors des premi\u00e8res semaines – afin qu\u2019elles puissent int\u00e9grer, prot\u00e9ger, et \u00e9vang\u00e9liser l\u2019esprit Design System par la suite.<\/em> Pour le workflow, c\u2019est \u00e0 d\u00e9finir selon chaque organisation. D\u2019embl\u00e9e, il faut essayer de mettre en place une gouvernance claire avec un bin\u00f4me designer\/d\u00e9veloppeur qui servira comme r\u00e9f\u00e9rent\/curateur du Design System.<\/em> Les sous-atomes, atomes et mol\u00e9cules sont cr\u00e9\u00e9s en amont par le bin\u00f4me de d\u00e9part et tous les designers peuvent soumettre des composants plus complexes par la suite.<\/em> C\u2019est un peu un mode centralis\u00e9 hybride.<\/em> On peut faire appara\u00eetre les diff\u00e9rentes \u00e9tapes de vie et d\u2019\u00e9volutions des composants dans un Kanban ou un tableau Trello\u00a0\u00bb.<\/em> <\/p>\n\n\n\n

<\/div>\n\n\n\n
Atomes et mol\u00e9cules...<\/strong>\n\nLes atomes<\/strong> d\u00e9signent le composant le plus petit du Design System (exemple : un bouton). Il ne peut pas \u00eatre divis\u00e9. \n\nLa mol\u00e9cule<\/strong> est une composition d'atomes (exemple : un menu avec plusieurs boutons). \n\nEnfin le subatomique<\/strong> est la mani\u00e8re de d\u00e9finir l'atome dans ses d\u00e9clinaisons (exemple : \u00e9tats du bouton, survol, d\u00e9sactiv\u00e9...).<\/pre>\n\n\n\n
<\/div>\n\n\n\n
Le workflow id\u00e9al d’Ali :<\/strong>
<\/span>1.<\/span><\/strong> Identification \/ v\u00e9rification du besoin puis prototype rapide avec les atomes existant. 
2.<\/span><\/strong> Soumission du composant aux curateurs du Design System, avec comme feedbacks possibles :
 – cr\u00e9ation d\u2019un nouveau composant
 – \u00e9volution sur composant existant
 – composant existant
 – besoin trop sp\u00e9cifique pour le DS
3.<\/span><\/strong> Le composant est ensuite r\u00e9alis\u00e9 graphiquement, document\u00e9 et cod\u00e9. Dans certains cas, le composant peut aussi \u00eatre cod\u00e9 directement puis soumis au designer pour int\u00e9gration dans la plateforme graphique.
4.<\/span><\/strong> Le composant est test\u00e9 par les designers, les d\u00e9veloppeurs et le service Qualit\u00e9
5.<\/span><\/strong> Livraison et mise \u00e0 disposition du composant et de sa documentation, qui devient visible et utilisable par tous.<\/p>\n\n\n\n
<\/div>\n\n\n\n
\"atomic<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
As-tu pu tester plusieurs outils de conception, maquettage, prototypage, r\u00e9daction et pr\u00e9sentation des guidelines aux \u00e9quipes ? Si oui, lesquels te semblent \u00eatre une combinaison gagnante aujourd’hui en 2020 ?<\/span><\/strong><\/p>\n\n\n\n
A.C<\/span><\/strong>. \u201c<\/em>Sketch for teams<\/em><\/strong> regroupe sous un m\u00eame toit la conception, le maquettage, le versioning et, en version b\u00e9ta, les sp\u00e9cifications. Le prototypage y reste encore perfectible. Souvent, il vaut mieux recourir \u00e0 un outil sp\u00e9cifique (<\/em>Invision<\/em><\/strong>, Marvel<\/strong>, Origami<\/strong>\u2026) si l\u2019on souhaite un prototype haute-fid\u00e9lit\u00e9.<\/em> 
Pour la pr\u00e9sentation des guidelines du DS, je pense qu\u2019il faut \u00e9tudier une solution qui convienne \u00e0 la fois aux d\u00e9veloppeurs et aux designers\u201d.<\/em> <\/p>\n\n\n\n
<\/div>\n\n\n\n
Une marque forte, c\u2019est une marque qui arrive \u00e0 conserver des touches cr\u00e9atives uniques sur <\/em>s<\/em>es produits, tout en int\u00e9grant l\u2019accessibilit\u00e9 dans son ADN\u201d.<\/em><\/p><\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
Les outils de maquettage \u00e9voluant tr\u00e8s vite, encore plus vite r\u00e9cemment, comment pressens-tu ces \u00e9volutions ? Se dirige-t-on vers un outil unique pour l’ensemble du workflow ?<\/span><\/strong><\/p>\n\n\n\n
A.C<\/span><\/strong>. \u201cEncore une fois, tout d\u00e9pend de l\u2019organisation dans laquelle on \u00e9volue et de son budget !<\/em> Chaque \u00e9diteur semble int\u00e9grer un maximum de fonctionnalit\u00e9s sous sa banni\u00e8re, et l\u2019on se retrouve \u00e0 devoir faire des compromis sur certaines fonctionnalit\u00e9s.<\/em> 
Sketch<\/em><\/strong> et <\/em>Figma<\/em><\/strong> assurent d\u00e9sormais le versioning mais aussi les sp\u00e9cifications pour les d\u00e9veloppeurs, certains outils deviennent alors redondants.<\/em> Certaines solutions plus sp\u00e9cialis\u00e9es permettent de fournir un livrable plus sp\u00e9cifique.<\/em> <\/p>\n\n\n\n
<\/div>\n\n\n\n
 \u201cPrivil\u00e9gier au maximum une accessibilit\u00e9 inclusive, by design\u201d.<\/em> <\/p><\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
Penses-tu que l’atomic design va encore \u00e9voluer ?<\/span><\/strong><\/p>\n\n\n\n
A.C<\/span><\/strong>. \u201cChacun doit essayer de s\u2019approprier cette m\u00e9thodologie. Dans notre \u00e9quipe, j\u2019ai propos\u00e9 une approche sub-atomique, pour plus de clart\u00e9. Apr\u00e8s, on voit aussi des organisations qui se d\u00e9tachent de l\u2019atomic design, car trop complexe. Et d\u2019autres qui vont l\u2019\u00e9tendre, en fonction de leurs besoins. Dans tous les cas, l\u2019atomic design reste une fondation qui peut \u00eatre agr\u00e9ment\u00e9e de nouveaux ingr\u00e9dients\u201d.<\/em> <\/p>\n\n\n\n
<\/div>\n\n\n\n
L'atomic Design c'est :\n- L\u2019abolition de la notion de page\n- La conception d\u2019interface dans des environnements non connus via des \u00e9l\u00e9ments modulaires\n- Une d\u00e9composition des \u00e9l\u00e9ments d\u2019interface comme suit : atome, mol\u00e9cule, organisme, layout.<\/pre>\n\n\n\n
<\/div>\n\n\n\n
Es-tu partisan d’un Design System inclusif sur les normes d’accessibilit\u00e9, ou bien d’une adaptabilit\u00e9 via des pr\u00e9f\u00e9rences utilisateur ?<\/span><\/strong><\/p>\n\n\n\n
A.C<\/span><\/strong>. \u201cQuand je vais voir un film anglais au cin\u00e9, perso, j\u2019aimerais bien pouvoir d\u00e9sactiver le sous-titrage. Je pense qu\u2019il faut poser cette question aux utilisateurs des plateformes, mais surtout privil\u00e9gier au maximum une accessibilit\u00e9 inclusive, by design. <\/em>
Devoir configurer des pr\u00e9f\u00e9rences utilisateurs n\u2019est pas quelque chose de standard entre les diff\u00e9rents sites et applis et vont parfois \u00e0 l\u2019encontre des pr\u00e9f\u00e9rences d\u00e9finies par l\u2019utilisateur au niveau de son syst\u00e8me.<\/em> 
Ou alors, on risque malheureusement encore une fois de se diriger vers une solution d\u00e9finie par le l\u00e9gislateur, comme pour les cookies !\u201d<\/em>  <\/p>\n\n\n\n
<\/div>\n\n\n\n
\"workflow\"\/<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
Avec les normes d’accessibilit\u00e9, les D<\/strong>esign <\/strong>S<\/strong>ystems<\/strong> se standardisent de plus en plus autour du<\/strong> <\/strong>R<\/strong>\u00e9f\u00e9rentiel<\/strong> g\u00e9n\u00e9ral d\u2019am\u00e9lioration de l\u2019accessibilit\u00e9 (RGAA)<\/strong>.<\/strong> Tu crois qu’on va vers une sorte de <\/strong>template<\/strong> unifi\u00e9 (<\/strong>j<\/strong>‘entends par l\u00e0 qu’on partirait d’un socle commun, comme un <\/strong>framework<\/strong>)<\/strong> ?<\/strong><\/p>\n\n\n\n
A.C<\/span><\/strong>. \u201cC\u2019est d\u00e9j\u00e0 un peu le cas quand on base son design sur les frameworks d\u2019Apple et de Google. Cela limite la prise de risque graphiquement et au final, toutes les apps se ressemblent. Une marque forte, c\u2019est une marque qui arrive \u00e0 conserver des touches cr\u00e9atives uniques sur ses produits, tout en int\u00e9grant l\u2019accessibilit\u00e9 dans son ADN\u201d.<\/em> 
 <\/p>\n\n\n\n
<\/div>\n\n\n\n
Il est souvent reproch\u00e9 aux design systems de s’adresser en priorit\u00e9 – ne serait-ce que par son nom – aux designers. Qu\u2019en penses-tu ? Est-ce quelque chose de ressenti au sein de vos \u00e9quipes ?<\/span><\/strong><\/p>\n\n\n\n
A.C<\/span><\/strong>. \u201cC\u2019est peut-\u00eatre l\u00e0 un biais qui apparait quand on fait un calque de l\u2019anglais au fran\u00e7ais. Un Design System, c\u2019est un syst\u00e8me de conception, en bon fran\u00e7ais de France.<\/em> 
Pour \u00e9viter cette appropriation du syst\u00e8me par le Design, choisir avec les \u00e9quipes un nom pour le produit est un bon d\u00e9but. Chez Europcar, c\u2019est \u201cYES\u201d pour \u201cYour Experience System\u201d. <\/em> <\/p>\n\n\n\n
<\/div>\n\n\n\n
Un design system fonctionne-t-il mieux avec une gouvernance ou bien en collaboratif selon ton exp\u00e9rience ?<\/span><\/strong><\/p>\n\n\n\n
A.C<\/span><\/strong>.\u201cAu d\u00e9but d\u2019un design system, une gouvernance solitaire (avec une \u00e9quipe coeur) et \/ou centralis\u00e9e permet d\u2019avancer rapidement. Mais il faudra pr\u00e9voir un budget pour \u00e9viter que cet \u00e9tat initial ne devienne p\u00e9renne.<\/em> 
Au fur et \u00e0 mesure que le produit Design System grandit, passer \u00e0 une gouvernance hybride (centralis\u00e9e et r\u00e9partie) permettra de s\u2019ouvrir au plus grand nombre et assure une contribution\/mise \u00e0 jour continue\u201d.<\/em> <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Au cours d’\u00e9changes par t\u00e9l\u00e9phone et par mail, j’ai eu la chance de pouvoir interroger Ali Chemlal \u00e0 propos du Design System Europcar… En tant que Senior Principal Designer chez [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":102,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[11,9,8],"class_list":["post-17","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interview","tag-design-system","tag-ui-design","tag-ux-design"],"_links":{"self":[{"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/posts\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":22,"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/posts\/17\/revisions\/104"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/media\/102"}],"wp:attachment":[{"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/remidudragne.com\/le-blog\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}