Mise en place du design system PagesJaunes : une nouvelle méthodologie

TL;DR

Arrivée chez PagesJaunes, j’ai découvert des processus de design et une équipe de designers UI fragmentés générant des incohérences sur toutes les plateformes. Il n’y avait aucun référentiel commun pour le design des différentes interfaces.

J’ai transformé des workflows Photoshop isolés en un design system collaboratif, un langage commun, avec librairies partagées, outils modernes et processus de handoff intégrés — établissant une cohérence design à 360° sur le web et le mobile sans nécessiter de supervision quotidienne.

Le défi : chaos design multi-plateformes

En arrivant chez PagesJaunes, j’ai découvert une équipe travaillant en silos. Les designers créaient des maquettes dans Photoshop et les partageaient par email. Les retours arrivaient de façon sporadique via des fils de discussion interminables. Les développeurs recevaient des spécifications incomplètes et reconstruisaient chaque bouton, titre et composant from scratch — à chaque fois.

Les développeurs mobile n’avaient aucune librairie de composants. Les équipes Android et iOS hardcodaient chaque élément de design à chaque occurrence. Le résultat ? Des incohérences visuelles entre plateformes, aucun vocabulaire partagé, et zéro scalabilité.

Mon approche

1. Diagnostic : comprendre les lacunes du workflow

• Audit des outils : Identification des goulots d’étranglement dans les workflows centrés sur Photoshop et les handoffs par email
• Revue de code : Découverte que les équipes dev mobile reconstruisaient les composants from scratch à chaque instance
• Documentation des pain points : Chaque livraison nécessitait des heures/jours de travail pour documenter chaque élément du design

2. Fondation : construire une infrastructure collaborative

• Création du Design System : Mise en place d’un système vivant créé et maintenu de manière collaborative par toute l’équipe UI
• Stratégie de migration d’outils : Pilotage de la transition progressive de Photoshop vers Figma pour une vraie collaboration temps réel
• Programme de formation complet : Déploiement d’ateliers en présentiel et en ligne pour garantir l’adoption complète des nouvelles plateformes
• Librairies partagées : Implémentation de librairies de composants Figma permettant aux designers de contribuer et consommer des assets réutilisables
• Plateformes de handoff : Introduction d’InVision pour la collaboration stakeholders et Zeplin pour les spécifications développeurs précises

3. Adoption : évangéliser de nouvelles façons de travailler

• Formation multi-formats : Animation d’ateliers en présentiel et sessions en ligne pour s’adapter aux agendas et styles d’apprentissage de l’équipe
• Advocacy développeur : Collaboration avec les équipes Android et iOS pour implémenter les design tokens dans les codebases
• Alignement hors-roadmap : Obtention d’un engagement pour l’implémentation technique en dehors de la roadmap produit officielle
• Documentation : Création de guidelines assurant des pratiques d’adoption et de maintenance cohérentes
• Conduite du changement : Accompagnement de l’équipe à travers plusieurs transitions d’outils avec du mentorat hands-on

Résultats

• Cohérence multi-plateformes : Langage visuel unifié sur web, Android et iOS
• Qualité autonome : Intégrité du design maintenue sans supervision quotidienne
• Efficacité de développement : Les équipes mobile réutilisent les composants codés au lieu de reconstruire from scratch
• Vélocité de collaboration : Cycles de feedback stakeholders raccourcis grâce aux prototypes interactifs
• Productivité designer : Les librairies partagées éliminent le travail redondant et accélèrent l’itération
• Adoption fluide des outils : Transition complète de l’équipe de Photoshop vers Figma réussie

Apprentissages clés

• Les systèmes permettent l’autonomie : Des design systems bien structurés réduisent la dépendance à la supervision individuelle
• Le buy-in développeur est critique : L’implémentation technique détermine si les design systems vivent ou meurent
• Les outils sont des multiplicateurs de force : Les bonnes plateformes transforment la collaboration d’obstacle en accélérateur
• Le changement nécessite l’évangélisation : Les nouveaux processus réussissent par la formation et l’advocacy, pas seulement par le mandat
• La formation multi-formats fonctionne : Combiner sessions en présentiel et en ligne accommode les besoins d’apprentissage divers et garantit l’adoption

Au-delà de la livraison : Il ne s’agissait pas simplement d’interfaces plus jolies — mais de construire une infrastructure efficace et pérenne permettant aux designers de « designer » et aux développeurs de développer beaucoup plus rapidement, avec la confiance que le résultat final sera cohérent, scalable et maintenable.