Design System : industrialisez vos interfaces et normalisez vos développements Front !

La digitalisation croissante de votre entreprise a pour effet la multiplication des plates-formes et applications en ligne à destination de vos clients, de vos partenaires ou encore de vos collaborateurs. Savez-vous que la conception et la maintenance de ces outils peuvent être optimisées afin de faire rimer homogénéité et productivité ? Tout simplement grâce à l'élaboration d'un Design System...

Qu’appelle-t-on Design System ?

Un Design System ou Système de Design est un référentiel qui répertorie les composants graphiques, ergonomiques et techniques des outils digitaux d'une organisation. Sites web, applications mobiles, applications métiers, newsletters, réseaux sociaux…

Le Design System est partagé et alimenté par l’ensemble des métiers concernés (marketing, UX/UI, développement, etc…). Il a pour objectifs principaux de gagner en efficacité et d’aider les différentes équipes ainsi que les prestataires à maintenir la cohérence de l'écosystème digital. Ce référentiel est bien sûr évolutif.

Que trouve-t-on dans un Design System ?

En tant que référentiel global, le Design System regroupe toutes les ressources qui peuvent être utiles dans le cadre de la réalisation d'un produit digital :

• Identité de marque
• Règles typographiques
• Palettes des couleurs et règles associées
• Iconographie et imagerie
• Composants UI et patterns (encarts, boutons, flags, tableaux...)
• Composants fonctionnels
• Gabarits de pages, d'emails
• Grilles pour structurer les éléments
• Règles d'interaction
• Charte éditoriale
• Bonnes pratiques SEO
• Etc...

Exemples de rubriques du Design System de la MAIF

Pourquoi adopter un Design System ?

Faciliter la communication entre les différentes équipes

Le Design System est une véritable solution de travail collaboratif. Il permet de centraliser les informations, de travailler ensemble sur la conception et le développement des nouvelles applis ou encore de notifier les membres du groupe des dernières mises à jour. Il favorise également la cohésion d'équipe et facilite l'intégration d'un nouveau membre ou le remaniement de la team. La maintenance est centralisée : tout est à jour en un seul endroit.

Pauline, expert UX/UI chez Goweb, n'y trouve que des avantages : 

Cette méthodologie de co-conception me permet de mieux organiser mon travail et de mieux communiquer avec mes collègues développeurs. C'est un véritable échange entre eux et moi, ce qui améliore mes connaissances techniques au fil des jours.

Concevoir plus rapidement des applications et services numériques

Dans le contexte d'accélération de la transformation numérique des entreprises, la mise en oeuvre d'un Design System prend tout son sens. Les équipes de développement peuvent consacrer leur temps à innover et monter en compétences plutôt qu'à coder plusieurs fois le même formulaire pour chaque plate-forme...

Le Design System fournit une bibliothèque de code réutilisable. Les équipes techniques peuvent ainsi récupérer des composants écrits dans un langage commun. C'est ce qu'on appelle le "Low code".

L'intégration HTML/CSS est facilitée grâce au processus "Design to code". Le designer prépare sans charge supplémentaire le travail de l'intégrateur. et par la suite n'est plus sollicité en permanence pour la mise à disposition d'éléments visuels. Les itérations sont rapides et aucun conflit CSS ou Javascript n'est causé.

Mathieu, développeur front-end chez Goweb, a bien compris l'intérêt du Design System pour exécuter ses missions :

Le Design System a des avantages sur le long terme, il permet de ne plus perdre de temps à tout recréer en utilisant des composants bien identifiés en amont. Il permet une cohérence entre tous les projets, une mise à jour plus facile, et un transfert de connaissances simplifié.

En bref, le Design System vous permet d'accroître votre efficacité opérationnelle.

Vous êtes développeur et vous aimeriez participer à l'élaboration de Design Systems ? Rejoignez-nous !

Optimiser l'expérience utilisateurs

La cohérence graphique, fonctionnelle et éditoriale garantie par le Design System contribue à la fluidité du parcours utilisateur, à l'appropriation des outils et à la satisfaction ressentie lors de l'utilisation. Le Design System permet d'éviter les points de rupture, les incohérences, les couacs graphiques ou techniques.

En outre, l'approche modulaire de l'atomic design permet aux graphistes et aux développeurs de concevoir des interfaces plus fonctionnelles et mieux adaptées aux besoins et aux usages actuels.

Pauline y voit une valorisation de l'UX.

Le Design System propose, dès sa phase initiale, l'organisation d'ateliers de type Design Thinking. Grâce à cette méthode, le design est mis en avant et ne sert pas juste à "créer de belles maquettes". Longtemps perçu comme non essentiel dans un projet, l'UX est ici l'élément moteur et son rôle est primordial !

On l'aura compris, le Design System contribue également à renforcer l'image de l'entreprise.

 

Quelle méthodologie adopter pour mettre en place un Design System ?

L'élaboration d'un Design System est un véritable projet d'entreprise. Nous recommandons la mise en place d'une équipe dédiée, comprenant un Chef de projet, un UX/UI designer et un développeur front-end.

Faire appel à un prestataire expert en UX/UI et en développement de sites et d'applications est la solution idéale. Il saura vous guider, apporter son regard extérieur et co-construire avec vous le Design System optimal.

Il y a 3 étapes-clés :

1. Définir le projet

• On identifie les objectifs
• On réalise un audit de l'existant
• On mène des entretiens auprès des utilisateurs
• On définit un périmètre et une arborescence
• On sélectionne la solution technique

2. Construire le Design System

• On choisit un projet pilote, par exemple la réalisation d'une application métier
• Les membres de l'équipe participent à des ateliers de co-conception
• Ils alimentent le Design System par un processus itératif
• Des tests utilisateurs sont organisés pour valider le produit final

3. Déployer et faire évoluer le Design System

• On fait la promotion du produit auprès des utilisateurs
• On le fait vivre en le tenant à jour régulièrement
• On prend en compte les feedbacks des utilisateurs
• On répond aux nouveaux besoins et à l'évolution de l'entreprise

 

Quelle solution technique choisir pour créer son Design System ?

Centralisé et partagé par tous, le Design System doit être accessible en ligne.

Il existe de nombreuses solutions sur le marché. L'application Zeroheight dispose notamment d'un plug-in pour Adobe XD. Il propose une interface particulièrement conviviale et intuitive. On peut par exemple générer en un clic un bloc de "do's and don'ts" (pratiques recommandées et pratiques à éviter).

Vous pouvez aussi choisir de faire développer une solution sur mesure.

Sachez enfin que l'exploitation des composants du Design System dans la solution de gestion de contenu de votre site web sera facilitée si vous utilisez un CMS de type modulaire comme Umbraco, Sitefinity, Kentico, Episerver, DNN...

 

Si vous aussi êtes convaincu de l'intérêt du Design System et souhaitez le déployer dans votre organisation, contactez-nous !