Design system pour scale-up : comment les licornes francaises industrialisent leur UI

Quand une startup grandit, l’une des premieres victimes de la croissance est la coherence visuelle. Ce qui etait un produit elegant et unifie devient rapidement un patchwork de composants developpes par des equipes differentes, a des moments differents, avec des priorites differentes. Le design system est la reponse a ce probleme. Mais le construire et le maintenir est un investissement lourd, que les licornes francaises ont appris a maitriser.

Pourquoi un design system est indispensable a partir de 50 ingenieurs

Le seuil de 50 ingenieurs est souvent le moment ou le chaos visuel devient ingerable. Avant, nous pouvions nous passer d'un design system formel. Chaque equipe avait ses propres couleurs, ses propres espacements, ses propres composants. Mais a partir de 5 equipes produit travaillant en parallele, c'etait intenable, temoigne un VP Design de Doctolib.

Doctolib, la plateforme de sante valorisee 5,8 milliards d’euros, a investi plus de 2 millions d’euros dans son design system interne, baptise Pulse. L'investissement est considerable : une equipe dediee de 8 personnes, des audits reguliers et une gouvernance stricte. Mais le retour sur investissement est la : nous avons reduit de 40 % le temps de conception des nouvelles pages et de 30 % le nombre de bugs visuels, detaille le VP Design.

Le calcul est simple : si chaque ingenieur passe deux heures par semaine a recoder des composants qui existent deja, le cout cumule est de 100 heures par semaine pour 50 ingenieurs, soit 5 000 heures par an. Un design system bien concu reduit ce gaspillage de 80 %.

Les composantes d’un design system performant

Un design system ne se limite pas a une bibliotheque de composants Figma. Les equipes francaises les plus matures incluent plusieurs couches : les tokens de design (couleurs, espacements, typographie), les composants UI (boutons, champs, modales), les patterns (formulaires, tableaux, navigation) et les guidelines editoriales.

Chez Back Market, nous avons pousse le concept plus loin avec des "composants metier" : des blocs fonctionnels complets qui encapsulent non seulement le design mais aussi la logique produit, explique un Design Director de Back Market. Par exemple, notre composant de "carte produit reconditionne" gere l'affichage des notes, des garanties et des badges de qualite, avec toute la logique de state management integree.

Back Market, valorise 5,7 milliards d’euros, a developpe son design system en open source, une approche encore rare dans l’ecosysteme francais. Nous avons fait ce choix pour attirer les talents et contribuer a l'ecosysteme. Notre design system est utilise par plus de 200 entreprises dans le monde, se felicite le Design Director.

La gouvernance du design system : l’enjeu cle

Le plus grand defi d’un design system n’est pas technique mais politique. Comment convaincre les equipes produit de l’utiliser ? Comment gerer les compromis entre standardisation et flexibilite ?

La tentation est grande de vouloir controler chaque pixel. Mais si votre design system est trop rigide, les equipes le contourneront. Nous avons appris a faire des compromis, temoigne un Design Ops Manager de Pennylane.

Pennylane, la licorne francaise de la comptabilite, a adopte une approche de governance federale. Chaque equipe produit a un representant dans le comite de gouvernance du design system, et les decisions sont prises collectivement. Nous avons des "component owners" dans chaque equipe, qui sont les interlocuteurs privilegies de notre equipe design system. Cela cree un sentiment d'appropriation et evite la dictature du design centralise, explique le Design Ops Manager.

La regle d’or chez Pennylane est que le design system doit faire gagner du temps aux equipes produit, pas leur en faire perdre. Si un composant du design system est plus lent a utiliser qu'un composant custom, c'est qu'il y a un probleme. Nous mesurons en continu la vitesse de developpement des equipes qui utilisent le design system par rapport a celles qui ne l'utilisent pas. Si l'ecart se reduit, nous enquettons, ajoute-t-il.

L’impact du design system sur la qualite produit

Les benefices d’un design system bien concu vont bien au-dela de la coherence visuelle. Notre design system a eu un impact direct sur notre accessibilite. En centralisant les composants, nous pouvons garantir que chaque bouton, chaque formulaire, chaque notification respecte les normes WCAG, explique un PM de Doctolib.

Nous avons reduit de 60 % le nombre de tickets d'accessibilite depuis que nous avons integre les regles d'accessibilite directement dans les composants de notre design system, ajoute-t-il.

De meme, la performance globale du produit s’en trouve amelioree. Avant le design system, chaque equipe chargeait sa propre version de la bibliotheque de composants. Le poids de notre application avait augmente de 300 %. Avec un design system centralise et optimise, nous avons reduit le bundle size de 45 %, illustre un ingenieur front-end de Pennylane.

Design system et experimentation

Un design system bien structure est un accelerateur d’experimentation. Nous pouvons creer des variantes de test A/B en quelques clics, parce que nos composants sont parametrables. Sans design system, chaque test necessitait des jours de developpement, explique un Growth PM d’Aircall.

Aircall, la licorne de la telephonie cloud, a integre son design system avec sa plateforme d’experimentation. Chaque composant expose des proprietes que nous pouvons modifier dynamiquement pour les tests : couleur du bouton, texte, position. Cela nous a permis de multiplier par 5 le nombre de tests que nous pouvons mener chaque mois.

Cette capacite d’experimentation acceleree est un avantage concurrentiel significatif dans le SaaS. Les equipes qui peuvent iterer rapidement sur leur UI gagnent un temps precieux dans la course a l'optimisation des taux de conversion, note un Growth Product Manager.

Les erreurs a eviter

La premiere erreur est de vouloir construire un design system trop tot. J'ai vu des startups de 15 personnes investir 6 mois dans un design system. C'est une erreur : a ce stade, vous n'avez pas assez de recul pour savoir ce dont vous avez besoin. Construisez d'abord votre produit, industrialisez ensuite, conseille un designer freelance qui a accompagne plusieurs scale-ups.

Deuxieme erreur : le design system comme projet one-shot. Un design system n'est jamais termine. Il doit evoluer avec le produit. Nous avons une release bi-mensuelle de notre design system, comme pour n'importe quel produit, explique un Design Ops Manager.

Troisieme erreur : negliger l’adoption. Le meilleur design system du monde ne sert a rien s'il n'est pas utilise. Nous avons mis en place des "design system clinics" hebdomadaires : les equipes viennent avec leurs problemes et nous les aidons a les resoudre avec les composants existants, temoigne un Design Director de Back Market.

Le futur des design systems : vers des composants intelligents

L’IA commence a transformer les design systems. Nous experimentons des composants qui adaptent leur comportement en fonction du contexte utilisateur. Par exemple, notre composant de navigation peut se reordonner automatiquement pour mettre en avant les sections les plus utilisees par un client specifique, revele un VP Design de Doctolib.

Cette approche, encore experimentale, pourrait rendre les design systems plus dynamiques et personnalises. Le prochain palier, c'est le design system qui apprend des utilisateurs et qui optimise l'interface en temps reel. C'est un changement de paradigme : on passe d'un design system statique a un design system vivant, anticipe un designer senior de Pennylane.

Pour les equipes qui debutent leur demarche design system, le conseil des experts est simple : commencez petit, mesurez l’impact, et faites du design system un produit au meme titre que votre application. Le retour sur investissement, bien que long a se manifester, est considerable.

Pour en savoir plus sur la construction d’une equipe produit performante, lire notre article sur PayFit et les coulisses du virage PLG et notre guide sur l’onboarding et le taux d’activation.