Design System : les différentes stratégies de déploiement

Vous souhaitez déployer un Design System au sein de votre organisation, mais vous ne savez pas par où commencer? Dans cet article, on vous propose d’explorer les avantages et inconvénients de chaque stratégie pour trouver celle qui sera la plus efficace pour répondre aux besoins de votre entreprise. Avant toute chose, il est essentiel de bien respecter les deux étapes préliminaires pour assurer un déploiement réussi. Une bonne préparation est indispensable pour garantir la réussite de cette mise en place.

Étape 1 : État des lieux

Lors d’un état des lieux, on cherche à étudier 3 aspects clés :

1. Les ressources existantes : recenser les composants déjà disponibles
2. La maturité digitale des équipes : mesurer l’aptitude des équipes à adopter de nouveaux outils et clarifier les objectifs.
3. Clarifier les objectifs : identifier les principaux problèmes à résoudre au sein de l’entreprise.

Une fois l’état des lieux réalisé, il faudra choisir un modèle de gouvernance afin d’assurer la maintenance et l’évolution continue du Design System. En fonction de la taille et de l’organisation de vos équipes, vous pourrez opter pour l’un des modèles suivants.

Étape 2 : Le choix d’un modèle de gouvernance du Design System

Le modèle de gouvernance définit comment le Design System sera géré et mis à jour au sein de vos équipes. Voici les trois principaux modèles possibles :

1. Le modèle centralisé

Le modèle centralisé repose sur une équipe dédiée qui gère l’ensemble du Design System. Il assure l’uniformité et qualité. Ce modèle peut cependant manquer de flexibilité pour répondre aux besoins spécifiques des équipes.

2. Le modèle décentralisé

Dans le modèle décentralisé, plusieurs équipes contribuent au Design System, ce qui permet une grande adaptabilité. Ce modèle peut malgré tout engendrer des incohérences dans les styles et rendre difficile la maintenance.

3. Le modèle hybride

Avec un modèle hybride, une équipe centrale définit les lignes directrices, et les équipes locales les adaptent selon leurs besoins. Ce modèle combine flexibilité et uniformité, mais peut engendrer des ambiguïtés dans les responsabilités.

Les méthodes de déploiement du Design System.

Il existe plusieurs approches pour déployer un Design System. En fonction de la taille et des besoins de l’entreprise. Quelle que soit la méthode choisie, la première étape consiste à convaincre les équipes, notamment les développeurs. D’où l’importance de cet outil en soulignant ses bénéfices en termes de productivité et de cohérence.

1. Le déploiement pilote

Cette approche consiste à tester le Design System en le déployant d’abord sur un produit dit « pilote« , avant de l’étendre progressivement aux autres produits. Ainsi, vous pourrez évaluer son efficacité. Cela permet également d’identifier les ajustements nécessaires et recueillir des retours précieux. Le tout en limitant les risques associés à une adoption à grande échelle.

✅ Les avantages :

• Apprendre de ses erreurs : Réduire les risques avant un déploiement à plus grande échelle.
• Collecte de retours ciblés : les retours détaillés permettent d’affiner les composants, la documentation et les processus.

❌ Les inconvénients :

• Risques de conclusions biaisées : Si le produit pilote n’est pas représentatif des autres produits.
• Effort de redéploiement : Le passage du pilote à un déploiement à plus grande échelle nécessite un travail de planification et d’adaptation supplémentaires.

Étapes du déploiement pilote :

1. Identifier le produit pilote : Sélectionner le ou les produits qui seront concernés pour le pilote, Ce produit peut être un petit site avec une visibilité limitée ce qui permet de minimiser l’impact des éventuels bugs ou au contraire un produit avec une forte visibilité pour une démonstration rapide des bénéfices.
2. Définir les composants : Sélectionner les composants du design System qui seront développé pour cette version pilote.
3. Configuration : Configurer le pilote en définissant les paramètres de mise en production, tels que les versions de logiciels, les environnements de développement, etc.

Le cas d’usage Mirakl :

Un bon exemple est celui de Mirakl qui a décidé de relooker sa plateforme avant de modifier le Design System existant. En d’autres termes, mettre un coup de maquillage sur l’ancienne plateforme pour qu’elle ressemble à la plateforme qu’il souhaiterait avoir. L’objectif était d’aller assez vite pour récolter du feedback utilisateur pour confirmer ou infirmer les intuitions.

Les avantages étaient :

• Se focaliser en priorité sur l’UI
• Valider les designs Token
• Collecter les feedbacks utilisateur
• Avoir un impact rapide
• Gagner du temps

(source : https://www.youtube.com/watch?v=qBUH2tRmFK4)

2. Le déploiement incrémental

Dans le déploiement incrémental, les composants du Design System sont introduits progressivement. On priorise souvent les composants essentiels comme les boutons ou les formulaires.

✅ Les avantages :

• Minimiser les risques : En introduisant des éléments à un rythme maitrisé
• Faciliter l’adoption : En habituant progressivement les équipes à l’utilisation du nouveau Design System

❌ Les inconvénients :

• Gestion complexe : Ajoute de la Complexité avec la gestion des versions.
• Adoption lente : Le système met plus de temps à être pleinement opérationnel.

Étapes du déploiement incrémental :

1. Prioriser les composants à déployer : Identifier les composants les plus critiques à déployer en premier puis établir un ordre de priorité pour les composants restants
2. Lancer une version initiale avec les premiers composants
3. Intégrer les premiers composants dans les projets existants : Introduire les composants de base dans un ou plusieurs projets existants pour tester leur efficacité en conditions réelles.
4. Recueillir des retours et ajuster les composants : Analyser les retours des équipes sur les premiers composants, ajuster les éléments en fonction des besoins, et assurer la stabilité de cette première version.
5. Déployer progressivement les composants secondaires : Communiquer clairement à chaque itération pour que les équipes sachent quels nouveaux éléments sont disponibles et comment les utiliser.

Le cas d’usage Spotify :

C’est la méthode utilisée par Spotify pour la mise en place son système de design, GLUE (Global Language for a Unified Experience), afin d’unifier les interfaces sur toutes ses plateformes. En commençant par des principes de base en 2013, l’entreprise a pu standardiser progressivement ses éléments de design, assurant une cohérence tout en permettant des ajustements selon les besoins des équipes dispersées à travers différents projets.

(source : https://medium.com/@stanleywood_/design-doesnt-scale-4d81e12cbc3e )

3. Le déploiement complet (big bang)

Cette méthode consiste à déployer le Design System en une seule fois à l’ensemble des équipes. Bien que risquée, elle permet une adoption rapide.

✅ Les avantages :

• Uniformité immédiate : Cette approche renforce la cohérence de l’expérience utilisateur et l’identité de marque.
• Gain de temps à long terme : Bien que le déploiement initial soit intense, une fois le Design System intégré dans tous les produits, il devient plus facile et rapide à maintenir et à mettre à jour.

❌ Les inconvénients :

• Risques élevés : Un déploiement global peut perturber l’ensemble de l’organisation.
• Difficulté à gérer les retours d’expérience : Les feedbacks peuvent être difficiles à traiter à grande échelle.

Etapes du déploiement complet :

1. Préparation approfondie du Design System : concevoir et finaliser une version complète du Design System, incluant tous les composants nécessaires, la documentation, les guidelines et les processus de contribution.
2. Audits de compatibilité et de faisabilité technique : analyser les systèmes, produits et technologies utilisés dans l’entreprise pour vérifier la compatibilité avec le Design System.
3. Formation et préparation des équipes : organiser des sessions de formation pour toutes les équipes (designers, développeurs, product owners) afin qu’elles soient prêtes à utiliser le Design System dès son lancement.
4. Déployer et communiquer de manière intensive : effectuer la mise à jour des projets existants en remplaçant les anciens composants par ceux du Design System.
5. Communication interne intensive : assurer une communication claire et régulière pour informer toutes les équipes du changement et leur indiquer où trouver la documentation et les ressources d’aide.

Le cas d’usage Google :

Cette méthode a été utilisée par Google : Le design system de Google, Material Design, a été déployé de manière globale au sein de l’entreprise, avec des outils de développement comprenant du code et de la documentation pour Android, Flutter, et des sites web.

Cela a permis aux équipes de Google de construire une expérience cohérente à travers leurs différents écosystèmes.

4. Le déploiement opportuniste

Le déploiement opportuniste est une approche flexible dans laquelle le Design System est introduit progressivement en fonction des opportunités et des besoins qui surgissent au cours des projets en cours. Cette méthode profite des refontes, des mises à jour et des nouvelles fonctionnalités pour intégrer les composants du Design System.

✅ Les avantages :

• Synchronisation avec les cycles de développement : Elle accompagne les phases de développement sans les perturber.
• Gestion efficace de la dette technique : Cette approche assainit la base de code et améliore la cohérence sans nécessiter de refonte complète.

❌ Les inconvénients :

• Risque d’incohérence : Le déploiement opportuniste peut entraîner une adoption partielle, où certains produits ou sections utilisent le Design System, tandis que d’autres non.
• Absence de feuille de route claire : Sans plan d’adoption global, il devient difficile d’assurer une cohérence à long terme et de prévoir les ressources nécessaires pour maintenir le Design System.

Etapes du déploiement opportuniste :

1. Identifier les opportunités de mise à jour dans les projets existants : Repérer les projets en cours ou les fonctionnalités qui nécessitent une mise à jour, une refonte ou l’ajout de nouveaux éléments, et en profiter pour introduire les composants du Design System.
2. Aligner les équipes sur une approche opportuniste : Informer les équipes de design et de développement de l’approche opportuniste afin qu’elles intègrent systématiquement le Design System lorsqu’elles travaillent sur des améliorations ou des correctifs.
3. Établir des priorités dans le Design System : Prioriser les composants de base à intégrer lors des opportunités (boutons, couleurs, typographie)
4. Expansion progressive et intégration complète : Avec le temps, le Design System sera intégré de manière plus complète dans l’ensemble des produits et services.

Le déploiement opportuniste offre une grande flexibilité et permet une intégration en douceur du Design System sans imposer de contraintes rigides. Il convient particulièrement aux entreprises dynamiques et aux équipes qui adoptent une approche agile, où chaque opportunité est utilisée pour gagner en cohérence visuelle et en efficacité.

Pour conclure

Quel que soit le modèle de déploiement choisi, ils partagent tous un objectif fondamental : Garantir un impact positif sur les équipes et les produits. La phase finale de chaque stratégie de déploiement repose invariablement sur la mesure de cet impact.

Les étapes finales :

1. Suivi et évaluation : Mesurer la mise en place en suivant les performances, les retours des utilisateurs et les coûts associés.
2. Révision et ajustement : Réviser et ajuster en fonction des résultats, avant de le mettre en production à grande échelle.

Quel que soit le modèle de déploiement choisi, la réussite durable d’un Design System dépend de cette boucle de retour et d’amélioration continue, qui garantit son adaptabilité et sa valeur à long terme.Pour en savoir plus sur la mise en place concrète d’un Design System, découvrez les articles de Monsieur Guiz consacrés à ce sujet :

Pourquoi un design system ?
Comment un design system ?
Pour qui un design system ?