B2B : Design System Syndigo - Bibliothèque de composants unifiée et pipeline Design-to-Code
À propos du projet
Aperçu du projet
- Rôle: Senior Manager, UX Design chez Syndigo — nov. 2023 à aujourd’hui (plus de 10 ans d’expérience UX)
- Solution: Un design system unique, consolidé et code-connected couvrant la suite de produits de Syndigo…. remplaçant des bibliothèques de composants fragmentées et dupliquées par une source de vérité unique et gouvernée, directement câblée à Storybook, GitHub et aux outils de prototypage IA de l’entreprise.
- Objectif: Donner aux designers, aux développeurs front-end et aux product managers un système cohérent unique sur lequel construire, en éliminant le drift, en comblant l’écart entre design et code, et en permettant à toute l’organisation d’aller plus vite sans sacrifier la cohérence ni l’accessibilité. J’ai rejoint Syndigo… une plateforme B2B de données produit couvrant les produits MDM, PXM et de syndication… en tant que Senior Manager of UX Design. Ma responsabilité était triple :
Diriger le design produit de bout en bout sur les produits clés, dont la plateforme Nutrition Analysis et le Syndication Tracker , tout en supervisant le designer qui travaillait avec moi dessus.
Prendre en charge un design system fragmenté et non gouverné et le reconstruire en une source de vérité unique, cohérente et code-connected.
Gérer et faire grandir une équipe de plus de 8 designers produit, tout en rendant compte au VP of Design et en collaborant avec le Director of Design et l’ingénierie front-end.
Processus de design
J’ai abordé la reconstruction par étapes claires, chacune ancrée dans l’audit.
- Audit: J’ai inventorié chaque composant à travers les produits, comparé Figma à la production, et signalé chaque doublon et incohérence.
- Consolidation: J’ai réduit chaque ensemble de doublons à un seul composant canonique, documenté chacun avec son anatomie, ses variantes et son historique de versions, et introduit un workflow clair — idéation, en cours, terminé — avec des tickets rattachés aux frames de design.
- Code Connect & Storybook: Pour l’ensemble des 70+ composants, j’ai rédigé les fichiers Code Connect et les fichiers de code des composants et configuré Storybook pour afficher côte à côte le design et la forme codée en direct.
- Intégration GitHub: En l’absence de représentant UX dans le dépôt, l’ingénierie m’a accordé l’accès et j’ai committé directement dans GitHub les fichiers de composants et de Code Connect, bouclant ainsi la boucle design-to-code.
- Prototypage propulsé par l’IA: J’ai été le premier de l’entreprise à utiliser Figma MCP pour transformer des designs en prototypes codés et cliquables destinés aux tests avant développement, puis j’ai verrouillé Lovable et Claude Design sur les composants du système afin que les équipes ne puissent générer que du travail conforme au système.
- Accessibilité: J’ai construit et vérifié chaque composant pour qu’il respecte les standards WCAG AAA.
Accessibilité
Le système a été conçu pour respecter les standards WCAG AAA. Les composants ont été pensés pour les lecteurs d’écran — avec une structure sémantique, des rôles ARIA et des libellés clairs — et testés directement avec des logiciels de lecture d’écran. La couleur a été gérée pour plusieurs formes de daltonisme, de sorte qu’aucune information ne reposait jamais uniquement sur la couleur. La conformité a été vérifiée avec des outils d’accessibilité automatisés et consignée dans des directives écrites, afin que chaque équipe puisse construire et contribuer au système de façon accessible.
Métriques d’impact
Plus de 70 composants consolidés en une source de vérité unique et code-connected.
Le premier pipeline design-to-engineering de Syndigo, validant les designs avec des prototypes codés avant le build.
Prototypage conforme au système adopté à l’échelle de l’entreprise dans les équipes produit et design via Lovable et Claude Design.
Réduction du temps de cycle design-to-development grâce à des composants cohérents et code-connected.
Contexte & énoncé du problème
Le design system n’avait aucune structure et peu de gouvernance. Le même composant existait souvent en plusieurs versions incohérentes à travers les produits, et rien ne reliait le design au code livré : pas de Storybook, pas de composants code-connected, et aucune présence UX dans GitHub.
Le résultat était le drift. Designers, développeurs et product managers interprétaient chacun le système différemment, ralentissant la livraison et forçant les développeurs à reconstruire l’UI à partir de specs incohérentes.
Analyse des parties prenantes
- Développeurs front-end: Avaient besoin de composants correspondant à l’intention de design et intégrables directement en production, au lieu de reconstruire à partir de specs incohérentes.
- Designers produit: Mon équipe avait besoin d’un kit de composants gouverné unique pour se concentrer sur la résolution de problèmes plutôt que sur la recréation d’UI.
- Product Managers: Avaient besoin de prototyper et tester des idées rapidement sans s’éloigner du produit réel.
Audit du système
Avant de changer quoi que ce soit, j’ai audité la façon dont le système était réellement utilisé, afin que la reconstruction soit fondée sur des preuves.
- Inventaire des composants: Catalogué chaque composant en usage et identifié les doublons.
- Correspondance Figma-Production: Comparé les bibliothèques de design à l’UI livrée pour localiser le drift.
- Entretiens d’équipe: Échangé avec les designers et développeurs sur les endroits où le système aidait et ceux où ils le contournaient.
- Plugin UI Relay: Construit un plugin Figma sur mesure pour piloter le système — mappant les composants au code, suivant la couverture et la santé du code, générant et synchronisant le code des composants, gérant les tokens et templates, et signalant les lacunes à corriger — transformant la gouvernance et le design-to-code en un workflow continu plutôt qu’en un nettoyage ponctuel.
Défis et solutions
Le défi central était le lien manquant entre design et code. En l’absence de présence UX dans le dépôt, j’ai obtenu l’accès à GitHub et pris en charge moi-même les fichiers Code Connect et de composants, afin que les décisions de design atteignent la production fidèlement au lieu d’être réinterprétées.
La fragmentation était le deuxième. Plutôt que de contrôler la cohérence à la main, j’ai consolidé les doublons en composants canoniques et construit le plugin UI Relay pour empêcher le système de dériver à nouveau.
L’adoption était le troisième. En câblant le système dans les outils que les équipes voulaient déjà — prototypes codés, Lovable et Claude Design — j’ai fait du travail conforme au système la voie de moindre résistance.
