|PODCAST| Pourquoi les entreprises performantes mettent en place un Design System ?

Pour mieux en comprendre les enjeux, Adrien Donot, Lead Designer chez Cocorico, vous explique en cinq minutes grâce à un podcast, toutes les caractéristiques définissant un design system.

 

 

Un design system est un outil utilisé pour comprendre et maintenir structuré un produit ou un service. Premièrement utilisé par la NASA dans les années 70, il est maintenant le staple des start-ups de la Silicon Valley. En d’autres mots, ce système revient à fusionner la charte graphique et la charte ergonomique d’une organisation pour obtenir une structure solide de l’activité. Ainsi, le design system est bénéfique à tout métier au sein d’une entreprise : designer, développeur ou encore chef de projet seront amenés à l’utiliser comme base pour vendre correctement le produit ou service. 

 

 

Il est donc important de posséder un design system qui correspond à l’entreprise et à ce qu’elle propose. Il remplit différents objectifs pour faciliter le travail au quotidien de tous les organes d’une entreprise : sans design system, il est impossible de comprendre et maintenir structuré son interface. Cependant, son objectif premier reste celui de placer l’utilisateur au centre de l’attention afin de maximiser l’accessibilité du service. C’est pourquoi il n’est possible de garder une bonne structure qu’en respectant un nombre de règles UX et UI, directement appliquées aux composantes du système. Pour obtenir un design system performant, il existe une méthode appelée Atomic Design, visant à catégoriser de manière fonctionnelle les éléments de l’interface, et ce, à l’aide d’une terminologie inspirée de celle de la matière sur le plan physico-chimique. 

 

 

L’Atomic Design : une organisation adaptée à tous les environnements

 

L’Atomic Design est une méthode d’organisation revenant à créer une structure fonctionnelle divisée en plusieurs éléments connectés les uns avec les autres. Cette méthode a été  imaginée par Brad Frost, web designer passionné, affirmant que tous les objets numériques qui nous entourent sont capables d’accueillir une interface graphique, quelle qu’elle soit. Afin de comprendre précisément en quoi cela consiste, il existe un exemple simple qui permet d’illustrer cette méthode : les Lego. Nous choisissons de nous référer ici à l’Étoile de la mort, une construction imposante composée d’une multitude de pièces que l’on pourrait qualifier d’atomes ou encore briques de l’interface élémentaire. En assemblant ces briques, cela forme des molécules qui s’apparentent aux boutons que l’on peut retrouver sur la plateforme et enfin si l’on assemble ces mêmes molécules, nous obtenons un organisme comme par exemple un formulaire ou un moteur de recherche. C’est grâce à ces liaisons que cette Étoile de la mort, en l’occurrence notre interface, garde une structure solide. En résumé, il faut imaginer que le bac utilisé pour ranger tous ces lego ainsi que sa notice d’utilisation pour construire l’interface, représentent le design system. 

De ce fait, cette construction visant à obtenir une structure solide d’un produit ou d’un service comporte deux avantages importants. D’une part, il existe de nos jours de nombreux environnements numériques que nous côtoyons au quotidien : smartphone, tablette, ordinateur et même pour certains, smartwatch ou smartcar. Il est donc possible de retrouver un écran dans une voiture, et qui dit écran dit interface. L’importance du design system est donc de réfléchir à une stratégie produit/écran qui permet une déclinaison sur n’importe quel type de support. Ainsi, lorsqu’une demande est formulée sur un support en particulier, il est facile d’y répondre grâce à l’Atomic Design déjà présent : il suffit de reprendre les briques et de les insérer dans l’interface choisie

 

Quel design system pour Cocorico ? 

 

Cocorico est une web-app à destination des marketplaces de services. En ce qui concerne son design system, vous retrouverez donc les éléments suivants : des composants et principes visuels UI, une typographie spéciale, une palette de couleurs, les icônes, les grilles de structure, les principes de communications de la marque et enfin les éléments réutilisables de l’interface utilisateur. C’est un système de design qui servira de référence tout au long du cycle de vie de notre service, et qui restera mis à jour pour fournir une expérience utilisateur excellente. L’équipe design de Cocorico, tout particulièrement Adrien, reste à votre disposition et sera ravi de répondre à vos questions sur le sujet !