Créer le design system dans lequel Jumo s’épanouira

Contexte

Un produit R&D basé sur du machine learning

Le CEA (Commissariat de l'Énergie Atomique et Alternatives) est un organisme public de recherche français spécialisé dans les domaines de l'énergie, de la défense et de la sécurité, des technologies de l'information et des technologies de la santé. Il intègre de nombreux projets, de la recherche à la production, dans tous ces domaines.

Jumo est l’un de ces projets : un produit d'apprentissage automatique basé sur du machine learning, capable de simuler des comportements réels dans n'importe quel environnement. En tant que PoC, l'algorithme simule la gestion d’un dock de containers.

Dans ce projet entre la recherche et la production, Romain est intervenu en tant que Design System Manager pour mettre en place un premier design system afin de cadrer la delivery et permettre à l’équipe Jumo d’adresser d’autres uses cases.

‍

Objectifs

Créer un design System pour passer de R&D à Production

Après un kick-off rapide, ils ont identifié plusieurs difficultés à résoudre :

• Une contrainte : le CEA est un acteur public avec de nombreuses frictions administratives. Ils devaient donc finaliser le développement d'un MVP en un minimum de jours ouvrés pour démontrer de l’intérêt d’un design system.
• Un objectif : le CEA prévoit d'accélérer son projet et de le faire passer de la R&D à la production. Pour ce faire, il aura besoin d'un design system robuste garantissant la réplicabilité aisée de son algorithme à grande échelle sur de nombreux cas d'usage et interfaces.
• Un sous-objectif : Dans son équipe, seul le CTO avait une brève expérience des design systems. Il fallait alors former les designers et les développeurs à la méthode, créer un pont entre eux et les rendre autonomes.

Ce design system avait un très fort intérêt stratégique, c’est un peu la maison qui va permettre au projet Jumo de grandir.

‍

Stratégie

Démarrer par les fondations du Design System

On sait qu'un bon design system ne se résume pas à un UI-kit et qu'il repose sur des fondations solides pour soutenir le reste. Ils ont donc commencé par cinq jours consacrés à des ateliers et à l'élaboration de règles de base :

• Design Principles.Ils ont établi 4 règles de base permettant d'orienter les choix et les décisions. Quelles valeurs devons-nous respecter ? Qui bénéficiera de notre design system ? Comment nos composants doivent-ils être utilisés ? Il a été décidé que le Design system devra être Intuitif, Adaptable, Explorable et Actionable.
• Tone of Voice.Pour un produit industriel, les mots ont moins d'importance que pour d'autres produits. Ils ont néanmoins choisi de définir rapidement la manière dont Jumo s’adressera à ses utilisateurs. Ils ont défini des attributs de dialogues, un vocabulaire, des préférences de ton, et des exemples de tournures.
• Naming Convention.Nommer les choses de la même manière fluidifie le dialogue entre développeurs et produits. Ils ont décidé de tout nommer en PascalCase sur une base FamilyFunctionVariant, puis ModifierStateSizeBreakpoint en optionnel.
• Scale Rule.L'échelle de taille a également un impact considérable sur la façon de quantifier et simplifier. Plus c'est simple, mieux c'est. La grande gagnante sera une échelle à 6 niveaux : 1 est le plus petit et 6 le plus grand.

‍

Meubler & Ranger la maison avec l’Atomic Design

Une fois s règles de bases établies, il ne reste plus qu’à faire l’inventaire de ce qu’on a et de ce qui nous manque, et de le ranger par pièces cohérentes. Pour ça, ils ont utilisé la méthode de l’Atomic Design, afin d’imbriquer le plus petit dans le plus grand à la manière de poupées russes.

• Les atomes, rangées dans un style guide. Avec les Principles, le Tone of Voice, la convention de nommage et l’échelle.
• Les molécules, rangées par type. Les principaux composants qui vont composer nos interfaces.
• Les organismes, rangées par use case. Les ensembles cohérents de molécules, voire carrément des bouts de pages appliqués à un use case donné, et réutilisables sur plusieurs use cases.

‍

Résultats

Former les équipes à utiliser et aménager leur design system

Cet inventaire a permis d’identifier en chemin tout un tas d’outils que Romain a pu mettre en place pour aider les équipes Jumo à aménager leur design system :

• Une série de tutoriels Figma prêts-à-l’emploi, pour les aider à garder des bonnes pratiques et créer des habitudes
• Une Definition of Ready et une Definition of Done pour leur permettre d’avancer sereinement dans les prochains composants
• Un mentoring personnalisé de la designer junior CEA

Conclusion

Se projeter sur le futur avec une Roadmap

Cet inventaire a aussi permis aux équipes de prendre conscience de la quantité de travail nécessaire pour repenser l'ensemble du produit. Inconsciemment, ils élaboraient une roadmap. À la fin de cet inventaire, le CEA et Romain a pu prioriser et établir une vision plus précise de ce que sera Jumo dans quelques mois.

‍

“Le niveau de compétence impressionnant de Romain et son approche empathique de la conception ont été déterminants dans notre processus de création de système de conception.”Juan Restrepo, CTO

‍

"Les compétences pédagogiques de Romain nous ont permis de réellement améliorer les compétences de l'équipe dans la conception de notre Design System" .Clothilde De Marcillac, Product Designer Junior