Naviguer jusqu'au contenu principal

Collaboration, innovation et design system : plongée au cœur de la croissance de Mirakl

Figma

Découvrez comment Mirakl a mis en place un design system qui permet à ses équipes de livrer plus rapidement et de se concentrer sur des missions à haute valeur ajoutée.

Partager Collaboration, innovation et design system : plongée au cœur de la croissance de Mirakl

Des débuts prometteurs…

En 2012, l’organisation de Mirakl est simple : une équipe, un produit. Le CEO et fondateur Philippe Corrot, qui porte également les casquettes de CPO et head of design, travaille en direct avec les développeurs. L’expérience utilisateur est déjà au cœur des préoccupations, et le design est simple, mais efficace.

Image à fond rose pâle uni avec un rectangle violet indiquant CEO, relié par une flèche à un rectangle vert indiquant « Des Devs ». Les mots « + CPO » et « + Head of design » sont reliés au premier rectangle avec une ligne rouge. Un logo Mirakl se trouve en bas à gauche de l’image.Image à fond rose pâle uni avec un rectangle violet indiquant CEO, relié par une flèche à un rectangle vert indiquant « Des Devs ». Les mots « + CPO » et « + Head of design » sont reliés au premier rectangle avec une ligne rouge. Un logo Mirakl se trouve en bas à gauche de l’image.

À partir de 2015, la croissance de Mirakl s'accélère. François Crossette, premier product manager de la société, rejoint l’équipe. L’approche produit commence à évoluer : la discovery prend de l’importance, la roadmap se structure, les retours utilisateurs sont systématiquement récoltés et l’organisation en feature teams se met en place. Les améliorations sont nombreuses, mais l’expérience utilisateur reste perfectible. Les fonctionnalités se multipliant, il devient complexe de garantir la cohérence de la plateforme.

Image à fond rose pâle montrant trois captures d’écran d’e-mail. L’une des captures d’écran est mise en exergue et indique le nom de l’expéditeur : Philippe, et le contenu du message : « est-ce que tu peux mettre l'icône sur la gauche pour éviter que les chiffres dansent quand tu passes sur le formulaire ? Moi je trouve ça pas mal du tout. »Image à fond rose pâle montrant trois captures d’écran d’e-mail. L’une des captures d’écran est mise en exergue et indique le nom de l’expéditeur : Philippe, et le contenu du message : « est-ce que tu peux mettre l'icône sur la gauche pour éviter que les chiffres dansent quand tu passes sur le formulaire ? Moi je trouve ça pas mal du tout. »

…à la professionnalisation du design

François initie la collaboration avec la première designer, ce qui porte rapidement ses fruits. Les products managers et les designers commencent à travailler en binôme, l’interface évolue, des premières guidelines émergent et l’équipe crée un kit UI, embryon du design system. Le design devient plus homogène et plus moderne, alors que le stack technique reste le même.

Image à fond jaune pâle présentant trois captures d’écran superposées de produits numériques Mirakl. Un logo Mirakl se trouve en haut à gauche de l’image.Image à fond jaune pâle présentant trois captures d’écran superposées de produits numériques Mirakl. Un logo Mirakl se trouve en haut à gauche de l’image.

En 2020, Romain Séchan rejoint Mirakl en tant que director of product design, suivi de près par Romain Blatrix, qui prend le rôle d’engineering manager front-end. La collaboration entre tech, produit et design s'intensifie, avec pour objectif de livrer des expériences utilisateur optimales. L'idée d'un design system plus complet commence à prendre forme.

Pourquoi à ce moment-là ?

  • La dette technique et UX due à un manque de gouvernance du design system de l’époque, beaucoup de personnalisation de composants, mais aussi des incohérences entre design et tech au niveau des composants, rendant le travail de toute l’équipe assez difficile.
  • L’équipe devait travailler vite et efficacement, et non dans l’anticipation, ce qui rendait complexe l’application d’un processus design dans les règles de l’art.
  • L’interface utilisateur était en décalage avec les standards du marché.

On commence par quoi ?

Pour assainir les fondations et grandir de manière plus saine, le head of design identifie 5 gros chantiers :

  • Un nouveau stack design, basé sur Figma
  • La gestion de concepts transverses comme l’internationalisation, l’accessibilité et le responsive
  • La création d’une gouvernance pour le design system
  • L’accélération des designs et des développements tout en améliorant la qualité
  • L’efficacité de l’onboarding des nouveaux collaborateurs

Bien que la question d’un nouveau design system se fasse de plus en plus pressante pour le head of Design, l’idée n’est pas priorisée. Il fait valoir son point de vue avec les développeurs pour donner du poids à ses arguments. Romain Blatrix, fraîchement arrivé comme engineering manager front-end, fait le même constat : les développeurs customisent les composants, générant un manque d’homogénéité dans les parcours utilisateur. Les montées de version sont aussi très compliquées et la documentation, limitée, reste à consolider.

Pour tous les deux, c’est le moment : il faut créer un design system. Après de longues discussions avec Philippe Corrot autour du besoin de scalabilité et d’alignement entre équipes, ainsi que de la nécessité de livrer des interfaces cohérentes aux clients, le projet est validé.

L'accélération

Plutôt qu’un déploiement progressif qui risquerait de créer de la friction pour les utilisateurs, ils prennent la décision de relooker la plateforme en CSS pour se focaliser sur l’UI, valider leur design tokens, collecter du feedback utilisateur, mais aussi gagner du temps.

Image à fond bleu pâle présentant deux captures d’écran de produits numériques Mirakl. Un logo Mirakl se trouve en haut à gauche de l’image.Image à fond bleu pâle présentant deux captures d’écran de produits numériques Mirakl. Un logo Mirakl se trouve en haut à gauche de l’image.

En septembre 2020, Mirakl devient une licorne grâce à une levée de fonds. L’augmentation des attentes et des effectifs, de même que l’élargissement des scopes rendent la coordination plus difficile. Isabelle Bénard est nommée CPO et impulse la réorganisation technique, design et produit. Ce dernier est redéfini en piliers et en squads dédiées pour plus d’autonomie, d’efficacité et de scalabilité.

Image à fond violet pâle présentant un diagramme qui détaille le fonctionnement de la plateforme Mirakl. Un rectangle vert indiquant « Platform » est relié par une flèche à un rectangle vert pâle indiquant « Order », lui-même relié par des flèches à trois rectangles bleu pâle empilés indiquant « Workflow », « Fulfillment » et « points de suspension ». À droite de chacun de ces rectangles se trouvent deux rectangles violets indiquant « PM » et « Tech ». À droite de ces six rectangles violet se trouve un rectangle jaune indiquant « Design ». Le premier rectangle « Platform » est également relié à un autre rectangle vert pâle indiquant « Catalog », lui-même relié par des flèches à trois rectangles bleu pâle empilés indiquant « Price and Stock », « Catalog Set-Up » et « points de suspension ». Le premier rectangle « Platform » est également relié à un autre rectangle vert pâle contenant des points de suspension. Un logo Mirakl se trouve en bas à gauche de l’image. Image à fond violet pâle présentant un diagramme qui détaille le fonctionnement de la plateforme Mirakl. Un rectangle vert indiquant « Platform » est relié par une flèche à un rectangle vert pâle indiquant « Order », lui-même relié par des flèches à trois rectangles bleu pâle empilés indiquant « Workflow », « Fulfillment » et « points de suspension ». À droite de chacun de ces rectangles se trouvent deux rectangles violets indiquant « PM » et « Tech ». À droite de ces six rectangles violet se trouve un rectangle jaune indiquant « Design ». Le premier rectangle « Platform » est également relié à un autre rectangle vert pâle indiquant « Catalog », lui-même relié par des flèches à trois rectangles bleu pâle empilés indiquant « Price and Stock », « Catalog Set-Up » et « points de suspension ». Le premier rectangle « Platform » est également relié à un autre rectangle vert pâle contenant des points de suspension. Un logo Mirakl se trouve en bas à gauche de l’image.

C’est alors le bon moment pour déployer un véritable processus design basé sur les concepts de design thinking. La phase de discovery voit le binôme product manager + UX designer renforcé, et inclut aussi les développeurs pour fluidifier le déroulement du processus.

L’équipe design se réorganise elle aussi, avec une branche dédiée à la delivery et une autre à l’expérience. Cette dernière prend en charge le design system (baptisé Roma), l’UX writing, le content system et l’accessibilité avec comme objectif d’offrir la meilleure expérience possible aux product managers, aux designers et aux développeurs.

Image à fond jaune pâle présentant un diagramme qui détaille le workflow du product design au sein de Mirakl. Un rectangle vert indiquant « Product Design » est relié par une flèche à un rectangle vert pâle indiquant « Delivery », lui-même relié par des flèches à trois rectangles bleu pâle empilés indiquant « Order », « Catalog » et « points de suspension ». Le premier rectangle « Product design » est également relié à un autre rectangle vert pâle indiquant « Experience », lui-même relié par des flèches à cinq rectangles bleu pâle empilés indiquant « Design System », « Content System », « UX Writing », « A11Y » et « points de suspension ». Un logo Mirakl se trouve en bas à gauche de l’image.Image à fond jaune pâle présentant un diagramme qui détaille le workflow du product design au sein de Mirakl. Un rectangle vert indiquant « Product Design » est relié par une flèche à un rectangle vert pâle indiquant « Delivery », lui-même relié par des flèches à trois rectangles bleu pâle empilés indiquant « Order », « Catalog » et « points de suspension ». Le premier rectangle « Product design » est également relié à un autre rectangle vert pâle indiquant « Experience », lui-même relié par des flèches à cinq rectangles bleu pâle empilés indiquant « Design System », « Content System », « UX Writing », « A11Y » et « points de suspension ». Un logo Mirakl se trouve en bas à gauche de l’image.

Côté tech, deux voies se dessinent : utiliser des librairies de composants ou tout construire à partir de zéro. Bien que cette dernière option prenne plus de temps et de ressources, ses nombreux avantages (liberté de conception et de personnalisation, meilleur contrôle du code et de la documentation) font qu’elle est retenue. L’accent est donc mis sur la qualité plutôt que sur la rapidité, avec une librairie incluant le responsive, l’accessibilité et l’internationalisation. Tout est centralisé dans Storybook, puis Chromatic et les API Figma permettent une synchronisation des icônes et des couleurs.

Image à fond bleu pâle présentant un composant de l’interface de Mirakl à gauche, et les paramètres de ce composant à droite. Un logo Mirakl se trouve en bas à gauche de l’image.Image à fond bleu pâle présentant un composant de l’interface de Mirakl à gauche, et les paramètres de ce composant à droite. Un logo Mirakl se trouve en bas à gauche de l’image.

L’adoption du design system

Que faire maintenant ? Tout déployer en même temps, ou petit à petit, en commençant par les nouvelles pages ? Au final, l’approche choisie est avant tout pragmatique : chaque page est notée et priorisée en fonction du nombre de visiteurs et du taux d’adoption des features. Les quick wins sont priorisés également.

En juin 2022, Roma est officiellement lancé, mais c’est un produit en constante évolution ; il nourrit la roadmap produit et vice versa. Il peut lui apporter de la business value, être un facteur de priorisation et permettre d’aller plus loin sur certaines fonctionnalités – un cercle vertueux qui persiste aujourd’hui.

Image présentant un diagramme circulaire à trois flèches. En haut à gauche, une flèche bleu pâle symbolise l’adaptation de la roadmap Design System, en haut à droite, une flèche bleu foncé symbolise le développement du Design System, et en bas, une flèche blanche symbolise la priorisation des pages et modules fonctionnels à déployer. Au centre du cercle se trouve la mention « Déploiement du Design System ».Image présentant un diagramme circulaire à trois flèches. En haut à gauche, une flèche bleu pâle symbolise l’adaptation de la roadmap Design System, en haut à droite, une flèche bleu foncé symbolise le développement du Design System, et en bas, une flèche blanche symbolise la priorisation des pages et modules fonctionnels à déployer. Au centre du cercle se trouve la mention « Déploiement du Design System ».

Les équipes design et tech étaient parfois réticentes quant à l’utilisation du nouveau design system. Sa valeur restait à prouver, et des composants manquaient encore, ce qui créait de la frustration.

Pour remédier à ce problème, les directions Design et Tech décident en duo de mettre en place un rituel de gouvernance hebdomadaire entre designers et développeurs front-end. Chaque design est examiné avec précision avant de passer à l’étape de développement. Si des éléments n’existent pas encore dans Roma, l’équipe se pose la question de les ajouter au design system, ou d’utiliser un composant déjà existant. Ainsi, la roadmap du design system est alimentée en continu. Des sessions de gouvernance ont également permis de définir les guidelines manquantes (design et rédaction) en collaboration avec les équipes opérationnelles sur GitBook.

Image à fond vert pâle avec un diagramme expliquant le fonctionnement des processus et de la gouvernance du développement de produit de Mirakl. En haut de l’image se trouve un rectangle noir indiquant « Process et Gouvernance ». Deux flèches partent de ce rectangle et mènent à deux colonnes à trois niveaux. Côté gauche, un premier rectangle rouge clair indique « Guidelines UX et Content », un second de la même couleur indique « Patterns » et un troisième rectangle rouge foncé « Gitbook ». Côté droite, un premier rectangle bleu clair indique « Tokens » et un second de la même couleur indique « Components ». Sous ce rectangle se trouvent deux rectangles bleus, celui de gauche indique « Figma » et celui de droite « Storybook ». Le rectangle « Gitbook » est relié par une double flèche au rectangle « Figma », relié par une double flèche au rectangle « Storybook ». Un logo Mirakl se trouve en bas à gauche de l’image.Image à fond vert pâle avec un diagramme expliquant le fonctionnement des processus et de la gouvernance du développement de produit de Mirakl. En haut de l’image se trouve un rectangle noir indiquant « Process et Gouvernance ». Deux flèches partent de ce rectangle et mènent à deux colonnes à trois niveaux. Côté gauche, un premier rectangle rouge clair indique « Guidelines UX et Content », un second de la même couleur indique « Patterns » et un troisième rectangle rouge foncé « Gitbook ». Côté droite, un premier rectangle bleu clair indique « Tokens » et un second de la même couleur indique « Components ». Sous ce rectangle se trouvent deux rectangles bleus, celui de gauche indique « Figma » et celui de droite « Storybook ». Le rectangle « Gitbook » est relié par une double flèche au rectangle « Figma », relié par une double flèche au rectangle « Storybook ». Un logo Mirakl se trouve en bas à gauche de l’image.

Et le hand-off, alors ? Il a aussi été optimisé : le designer y détaille les composants utilisés pour fournir aux développeurs les bonnes informations sur chaque composant. S’ensuit une phase de vérification (baptisée Fed-Check) pendant laquelle un développeur vérifie que le hand-off préparé par le designer est exploitable et que l’équipe pourra commencer à développer sans friction ni retard. Cela présente l’avantage d’aider les designers et les équipes front-end à assimiler le design system, les patterns et les comportements, jusqu’au point où ce processus ne sera plus nécessaire.

Image à fond vert pâle présentant un diagramme qui explique le processus de création de produits numériques de Mirakl, de la discovery au développement. La première étape de discovery est suivie par celle d’idéation, elle-même suivie par celle du design. Un rectangle noir indique l’intervention de la gouvernance à cette étape. La dernière étape est celle du développement, auquel viennent s’ajouter le handoff et le FED check, chacun dans un rectangle noir. Chaque étape est dans un rectangle de couleur différente : la discovery en violet, l’idéation en bleu, le design en jaune et le développement en vert. Un logo Mirakl se trouve en bas à gauche de l’image.Image à fond vert pâle présentant un diagramme qui explique le processus de création de produits numériques de Mirakl, de la discovery au développement. La première étape de discovery est suivie par celle d’idéation, elle-même suivie par celle du design. Un rectangle noir indique l’intervention de la gouvernance à cette étape. La dernière étape est celle du développement, auquel viennent s’ajouter le handoff et le FED check, chacun dans un rectangle noir. Chaque étape est dans un rectangle de couleur différente : la discovery en violet, l’idéation en bleu, le design en jaune et le développement en vert. Un logo Mirakl se trouve en bas à gauche de l’image.

Le 21 mars 2024, Romain Blatrix (engineering manager front-end), François Crossette (product director) et Romain Séchan (director of product design) de chez Mirakl ont répondu à l’invitation de Figma de partager leur transformation organisationnelle et technique. Voir ou revoir ce Webinaire à la demande.

Un impact quantifiable rapidement

Mirakl a constaté un temps de développement largement réduit depuis l’adoption de Roma : des projets auparavant estimés à quatre ou cinq mois de travail sont terminés en trois. L’étape du hand-off est également en train de disparaître, notamment pour les pages les plus simples ; certaines pages simples sont même réalisées sans maquette.

Lien pour l'étude Impatience, expérimentation et IALien pour l'étude Impatience, expérimentation et IA
Impatience, expérimentation et IA

Les équipes de design numérique ont conscience de l’immense potentiel transformateur de l’IA. Le doute subsiste quant à la nature et la temporalité de ces changement.

Lisez notre étude et découvrez ce que nous avons appris à ce sujet.

L’approche systémique du design a permis de faciliter et d'accélérer le lancement de cinq nouveaux produits, laissant la possibilité aux équipes de se concentrer sur les aspects les plus essentiels, comme la réflexion sur l’innovation ou l’utilisation de l’IA. Un développeur particulièrement convaincu par le design system a même exprimé le souhait de s’attaquer au retrait d’anciennes technologies.

Voici les leçons que retient le trio de la création et de l’implémentation de son design system :

  • Rester agile et réinventer régulièrement son organisation : les changements de processus arrivent souvent. Il est essentiel de s’adapter aux nouvelles compétences et outils.
  • La dette n’empêche pas d’avancer et d’innover : une migration peut être progressive.
  • Avoir une approche pragmatique, être efficace pour trouver la meilleure façon d’avancer.
  • Envisager le design system comme un produit a bien fonctionné pour Mirakl. Après une phase projet en silo pour le design des composants, le design system est aujourd’hui intégré aux squads de designers. Il n’y a d’ailleurs plus d’équipe dédiée au DS.
  • Établir des guidelines suffisamment tôt est important.
  • Intégrer la tech dans les processus du design system et dans les projets est essentiel également.

Mirakl aujourd’hui et demain

Désormais, comme l’équipe produit au sens large est éduquée au design thinking, on ne parle plus de processus design mais de processus de conception, plus englobant. Aujourd’hui, les équipes ne se focalisent plus sur différentes phases (discovery, idéation, design) de manière rigide, mais sur des livrables actionnables (les concepts et les designs).

Image à fond jaune pâle présentant un diagramme à cinq rectangles verticaux, alignés horizontalement. Il y a un rectangle rouge indiquant « Collaboration », un rectangle vert indiquant « Livrables », un rectangle bleu indiquant « Timeboxing », un rectangle jaune indiquant « Autonomie » et un rectangle violet indiquant « Gouvernance » Un logo Mirakl se trouve en bas à gauche de l’image.Image à fond jaune pâle présentant un diagramme à cinq rectangles verticaux, alignés horizontalement. Il y a un rectangle rouge indiquant « Collaboration », un rectangle vert indiquant « Livrables », un rectangle bleu indiquant « Timeboxing », un rectangle jaune indiquant « Autonomie » et un rectangle violet indiquant « Gouvernance » Un logo Mirakl se trouve en bas à gauche de l’image.

Grâce au temps libéré par le design system, Mirakl peut explorer les opportunités offertes par l’IA. La société travaille actuellement sur la génération de maquettes via une IA entraînée sur Roma (composants et guidelines), et envisage la création d'un plugin pour générer du code à partir des maquettes. En parallèle, un énorme challenge technique, le micro front-end, occupe l’esprit de l’équipe front : à la clé, la possibilité d’imbriquer et d’afficher un produit dans un autre pour améliorer l’expérience des utilisateurs.

En conclusion, voici la liste des conseils de l’équipe à quiconque recherche le soutien de parties prenantes pour créer un design system :

  • Mettre l’accent sur la business value en quantifiant l’impact du design system
  • Valoriser les synergies et les gains de temps
  • Convaincre le CTO en priorité
  • Montrer qu’un design system peut aider à livrer plus vite des fonctionnalités et à accélérer à la fois le processus de delivery et l’onboarding
  • Lister les pain points (besoin d’accessibilité, langues RTL) à résoudre
  • Mentionner l’utilité du design system pour le design mobile

Mirakl est une suite de solutions SaaS dédiée aux acteurs du e-commerce, les aidant à transformer leur activité en plateforme. Initialement centré sur les marketplaces, Mirakl a élargi son offre pour accompagner des clients comme Leroy Merlin, Macy’s et Decathlon dans leur croissance.

Articles connexes

Créez et collaborez avec Figma

Lancez-vous gratuitement