Un dossier sur le coût de faire deux fois la même chose

Construire une fois. Réutiliser partout.

Tout produit qui grandit traverse la même crise silencieuse : cinq boutons légèrement différents, trois bleus qui ne se ressemblent pas tout à fait, des espacements qui dérivent de page en page — parce que chaque écran a été refait de zéro par la personne disponible cette semaine-là. Un design system y met fin. C'est la source de vérité unique — composants réutilisables, patterns et design tokens, partagés par les designers comme par les développeurs — qui garde chaque écran cohérent et fidèle à la marque, tout en rendant chaque nouvel écran radicalement plus rapide à construire. Avec lui, échelle et cohérence cessent d'être un compromis.

Photographie de couverture

Une bibliothèque de composants soigneusement organisée à l'écran — boutons, cartes, champs de formulaire et tokens de couleur disposés en système dans une grille impeccable. La source de vérité unique du design d'un produit. Format carré, studio sombre, lumière concentrée, halo d'interface jaune solaire, un sentiment d'ordre et de rigueur.

design-systems/cover.jpg

Une seule source de vérité — des composants et des tokens construits une fois, puis réutilisés partout, qui gardent un produit en croissance cohérent.

La thèse I.

Le chaos s'installe lentement. Un produit est lancé propre et cohérent, puis il grandit — nouvelles pages, nouvelles fonctionnalités, nouvelles recrues, le tout sous la pression des délais. Chaque ajout est construit un peu différemment du précédent, et en moins d'un an, on compte quatre versions du même bouton, des espacements incohérents, une palette de couleurs sur laquelle personne ne s'accorde vraiment, et une interface qui semble conçue par un comité qui ne s'est jamais réuni. Rien de tout cela n'a été décidé ; c'est l'absence de décision qui l'a produit. Un design system est cette décision manquante, prise une fois et appliquée partout.

Dans son essence, un design system est une bibliothèque de pièces réutilisables assortie des règles qui régissent leur usage. La couche la plus fine est celle des design tokens — les valeurs brutes de couleur, de typographie, d'espacement et autres, définies une seule fois comme source de vérité unique. Ces tokens composent des composants — boutons, champs, cartes, navigation — chacun conçu, codé et documenté une fois, puis inséré dans n'importe quel écran. Et autour d'eux se tiennent les patterns et les lignes directrices qui précisent quand et comment employer chacun. Construire une nouvelle page, c'est alors assembler des pièces éprouvées et cohérentes, non les réinventer.

Le bénéfice est double, et les deux termes tirent d'ordinaire en sens contraire : cohérence et vitesse. Cohérence, parce que chaque écran est bâti à partir des mêmes pièces validées, si bien que le produit reste homogène et digne de confiance, quelle que soit sa taille et quel que soit le nombre de mains qui le touchent. Et vitesse, parce que plus personne ne reconstruit un bouton ni ne retranche une échelle d'espacement — le travail nouveau relève de l'assemblage, non de l'invention. Un bon système rend un produit à la fois plus cohérent et plus rapide à étendre, et c'est précisément pourquoi les équipes matures le considèrent comme une infrastructure essentielle plutôt que comme un luxe.

Dans ce dossier

Six choses qu'un design system sérieux apporte.

I.

Une seule source de vérité

Une définition unique et partagée de l'apparence et du comportement du produit, utilisée aussi bien par le design que par l'ingénierie. Plus de débats sur le bon bleu ou le bon bouton — il existe une réponse, documentée, et tout le reste est une erreur à corriger.

II.

Des composants, pas des pages

Nous concevons et construisons les pièces réutilisables — boutons, formulaires, cartes, navigation — une fois, correctement, puis nous assemblons les écrans à partir d'elles. Chaque nouvelle page devient affaire de composition plutôt que de création, ce qui est plus rapide et bien plus cohérent.

III.

Les design tokens

La couche de fondation — couleur, typographie, espacement et mouvement définis comme des valeurs nommées en un seul endroit. Modifiez un token et il se met à jour partout ; un rebranding ou un ajustement qui exigeait autrefois de retoucher mille écrans devient une seule édition, sans risque.

IV.

La cohérence inspire confiance

Un produit homogène paraît professionnel et fiable ; un patchwork paraît improvisé et risqué. Un système rend la cohérence automatique, si bien que la marque s'exprime d'une seule voix assurée sur chaque écran, et non d'une douzaine de voix légèrement différentes.

V.

Plus rapide à construire

Quand les pièces existent déjà, les nouvelles fonctionnalités sortent en une fraction du temps. Les designers composent au lieu de redessiner ; les développeurs réutilisent au lieu de reconstruire. Le système s'amortit par la vélocité qu'il libère sur chaque projet qui suit.

VI.

Gouverné, pas figé

Un système doit évoluer sans se fragmenter à nouveau. Nous fixons la gouvernance — comment les pièces sont ajoutées, modifiées et retirées — pour qu'il reste un standard vivant auquel toute l'équipe se fie, plutôt qu'une relique rigide que l'on contourne discrètement.

Le travail, en détail II.

Construire une fois.
Réutiliser partout.

Le coût caché de l'absence de système se paie chaque jour, par petites touches que personne ne facture. Un designer redessine un composant qui existe déjà quelque part, parce qu'il ignore qu'il existe. Un développeur reconstruit trois fois la même carte pour trois pages. Un simple ajustement de marque — une nouvelle couleur d'accent, une échelle d'espacement resserrée — se transforme en un mois de chercher-remplacer sur des centaines d'écrans, dont la moitié sera oubliée. L'incohérence n'est pas seulement un problème esthétique ; c'est une taxe prélevée sur chaque heure que l'équipe passe à construire. Un design system est le moyen de cesser de la payer.

La couche la plus profonde est celle des tokens, et c'est là que réside le levier. Au lieu de coder en dur une couleur ou une valeur d'espacement à mille endroits, un token la nomme une fois — « action principale », « gouttière de page », « texte courant » — et chaque composant se réfère au nom. Décidez plus tard que le bleu de la marque doit évoluer, ou que l'échelle typographique doit s'élargir, et vous modifiez une seule valeur : tout le produit se met à jour d'un même mouvement, en toute sécurité. Ce qui était une opération terrifiante et sujette aux erreurs devient une seule édition, faite avec assurance. Le système transforme le changement d'envergure d'un risque en une routine.

D'une mission récente
Un produit en pleine croissance était devenu un patchwork — plusieurs équipes, des années de fonctionnalités, et une interface qui ne ressemblait plus à un seul produit. Nous avons construit un design system : des tokens, une bibliothèque de composants documentée et une gouvernance claire. Les nouvelles fonctionnalités ont commencé à sortir sensiblement plus vite, les incohérences se sont effacées, et un rebranding longtemps repoussé a ensuite pris une fraction du temps prévu. Le produit a cessé de lutter contre sa propre croissance et s'est mis à la capitaliser.

Un système est aussi un langage commun entre le design et l'ingénierie, là où se cache d'ordinaire une part surprenante du gaspillage. Quand la « carte » du designer et la « carte » du développeur sont littéralement le même composant documenté — même nom, même comportement, même code — l'interminable traduction, la dérive et les reprises entre les deux disciplines disparaissent en grande partie. La passation cesse d'être une négociation et devient un assemblage. Le système est autant un outil d'organisation qu'un outil de design : il fait construire tout le monde à partir des mêmes pièces, avec les mêmes noms, vers le même standard.

Construire une fois. Réutiliser pour toujours.
Tout l'argument économique d'un design system tient dans ce chiffre : chaque composant est conçu, construit et testé une seule fois, puis réutilisé sur chaque écran et chaque projet futur. Le coût se paie une fois ; l'économie se cumule à chaque page qui suit, sur un produit qui ne fait que grandir.

La version sérieuse du travail sur un design system résiste à deux échecs opposés. Le premier consiste à ne rien faire et à laisser le produit se fragmenter. Le second consiste à surconstruire — un système immense et plaqué or pour un produit qui n'en a pas besoin, et qui devient à son tour une distraction coûteuse. Nous dimensionnons un système à la taille réelle du produit et à sa trajectoire : assez de structure pour mettre fin au chaos et libérer la vitesse, jamais au point que l'entretien du système coûte davantage qu'il n'économise. Et nous intégrons la gouvernance dès le départ, parce qu'un système sans règles d'évolution se fragmente simplement à nouveau, un peu plus lentement.

Photographie du dossier

Une bibliothèque de composants documentée et une palette de tokens à l'écran, à côté d'un produit assemblé à partir de ces pièces — le même bouton, les mêmes couleurs, employés avec constance sur de nombreux écrans. Le système à l'œuvre. Cadrage cinématographique large 21:9, fond de studio sombre et élégant, accent jaune solaire, un sentiment d'ordre et de réemploi.

design-systems/band.jpg

Construits une fois, réutilisés partout — des tokens et des composants qui gardent un produit cohérent et rapide à étendre à mesure qu'il grandit.

Checklist pré-campagne

Cinq questions que nous posons avant de construire un système.

I.
Jusqu'où le produit va-t-il grandir ? Dimensionner le système à la trajectoire — assez pour mettre fin au chaos, jamais plaqué or.
II.
Quelles sont les vraies fondations ? Les tokens d'abord — couleur, typographie, espacement définis une fois comme source de vérité unique.
III.
Quels composants méritent leur place ? Construire les pièces que l'on réutilise — documentées une fois, composées partout ensuite.
IV.
Le design et le code partagent-ils un même langage ? Mêmes noms, mêmes pièces — pour que la passation devienne un assemblage, non une traduction.
V.
Comment évoluera-t-il ? Une gouvernance dès le premier jour — des règles pour ajouter et modifier les pièces, afin qu'il ne se fragmente plus jamais.

L'incohérence est une taxe prélevée sur chaque heure que l'équipe passe à construire. Un design system est le moyen de cesser de la payer — construire la pièce une fois, et la réutiliser partout, pour toujours.

Un design system est le tissu conjonctif de l'Ingénierie de Conversion. Il capture les meilleures décisions de l'UX et du design visuel sous forme de pièces réutilisables ; il offre au développement un kit propre et cohérent à partir duquel construire ; et il porte fidèlement la marque définie dans l'Architecture de Marque sur chaque écran, pour que l'identité ne s'érode pas à mesure que le produit grandit. Parce que nos designers et nos développeurs construisent le système ensemble, il est véritablement partagé — une seule bibliothèque, un seul jeu de noms, employés par tous ceux qui touchent au produit.

Nous construisons les design systems en interne, dimensionnés au produit et gouvernés pour durer, avec des designers et des ingénieurs qui travaillent depuis la même source de vérité. Le brief, c'est un produit qui reste cohérent et devient plus rapide à construire à mesure qu'il grandit — non un produit qui se fragmente sous le poids de son propre succès. Cette combinaison de tokens, de composants réutilisables et d'une gouvernance réelle est exactement ce qui fait d'un design system une infrastructure : la fondation discrète qui rend tout ce qui se construit par-dessus cohérent, fiable et rapide à livrer.

Un dossier dans le dossier Cas représentatif · SaaS en croissance · design system & bibliothèque de composants
Photographie du cas

Un ordinateur portable affichant un produit fragmenté — boutons et couleurs dépareillés — à côté d'un produit unifié, bâti à partir d'une bibliothèque de composants impeccable. L'instant où un système met de l'ordre dans le chaos. Contemporain, faible profondeur de champ, bureau sombre, halo d'écran jaune solaire.

design-systems/case.jpg

Du patchwork au produit unique — un système partagé, et une équipe qui livre plus vite, l'incohérence disparue.

Scénario représentatif · engagement client non nommé

Un produit SaaS s'était fragmenté en grandissant et ralentissait chaque équipe — jusqu'à ce qu'un design system en refasse un produit cohérent.

Le produit avait grandi vite et bien — plusieurs équipes, des années de fonctionnalités — et cela se voyait, de la mauvaise manière. Il existait plusieurs versions du même bouton, une poignée de bleus concurrents, des espacements qui changeaient d'un écran à l'autre, et une interface qui ne ressemblait plus à un seul produit. Pire que l'apparence, il y avait le frein : chaque nouvelle fonctionnalité obligeait à redécider et à reconstruire des pièces qui existaient déjà ailleurs, et un rebranding prévu paraissait si intimidant à l'échelle de cet ensemble tentaculaire qu'il était sans cesse repoussé.

Nous avons construit un design system depuis les fondations. Des design tokens ont capturé la couleur, la typographie et l'espacement comme source de vérité unique ; une bibliothèque de composants documentée a remplacé les pièces éparses créées au coup par coup ; et une gouvernance claire a défini comment les pièces seraient désormais ajoutées et modifiées. Point décisif, designers et développeurs ont travaillé depuis la même bibliothèque et les mêmes noms, si bien que le système était véritablement partagé, et non un document que personne n'ouvrait.

Les nouvelles fonctionnalités ont commencé à sortir sensiblement plus vite, les incohérences se sont effacées, et le rebranding tant redouté s'est réduit à un simple changement de tokens.

Les gains se sont cumulés à chaque projet suivant. Les nouvelles fonctionnalités sont sorties plus vite parce que les équipes composaient à partir de pièces existantes au lieu de les reconstruire ; le produit a retrouvé une apparence cohérente et professionnelle, ce qui a renforcé la confiance des utilisateurs ; et le rebranding repoussé depuis un an a été mené à bien en une fraction du temps prévu, parce qu'il se résumait à modifier des tokens plutôt qu'à retoucher des milliers d'écrans. Le système s'est amorti par la vélocité gagnée — et l'économie s'est renouvelée sur tout ce qui a été construit ensuite.

↑↑
Vitesse de construction · des fonctionnalités livrées plus vite
1
Source de vérité · pour toutes les équipes
Effort de rebranding · un changement de tokens, non une refonte
Voir nos réalisations choisies
De l'atelier · une voix illustrative III.

Notre produit s'était discrètement transformé en cinq produits qui partageaient un logo. Revolutionner nous a construit un véritable design system, et soudain tout le monde construisait à partir des mêmes pièces. Nous livrons plus vite, tout ressemble enfin à un seul produit, et notre rebranding a pris une semaine au lieu d'un trimestre.

Nom non divulgué
VP Design · SaaS en croissance
Mission & investissement IV.

Ce qu'implique réellement un design system sérieux.

Un design system est un investissement dans la vélocité et la cohérence de tout ce que vous construirez ensuite, et il se dimensionne au produit qu'il sert. Les missions vont d'un jeu de tokens fondateur assorti d'une bibliothèque de composants essentiels pour un produit en croissance, jusqu'à un système complet, documenté et gouverné pour un vaste parc multi-équipes, et le périmètre s'élargit avec le nombre de composants, l'étendue des plateformes, et la profondeur de documentation et de gouvernance requise.

Les deux variables majeures sont la taille de la bibliothèque de composants et le niveau de gouvernance dont l'organisation a besoin. Un système central resserré est un chantier contenu ; un système complet, avec de nombreux composants, un support multi-plateformes, une documentation approfondie et un modèle de gouvernance, en est un plus vaste. Nous chiffrons la construction et l'éventuel accompagnement continu en toute transparence, parce qu'un système lancé puis jamais entretenu se fragmente simplement à nouveau avec le temps.

Chaque mission comprend la discipline dans son intégralité : des design tokens comme source de vérité unique, une bibliothèque de composants conçue et codée, des patterns d'usage et une documentation, un langage commun au design et à l'ingénierie, et un modèle de gouvernance pour l'évolution du système — avec, en option, un accompagnement continu pour qu'il reste un standard vivant plutôt qu'une relique.

Nous dimensionnons chaque système au produit plutôt qu'à une grille tarifaire — c'est pourquoi nous ne publions pas de tarifs. Chaque mission commence par un entretien de cadrage gratuit de 30 minutes, et nous vous dirons honnêtement si vous êtes déjà assez grand pour avoir besoin d'un système complet, ou si un jeu de tokens sobre et une poignée de composants essentiels vous serviraient mieux pour l'instant. Nous préférons dimensionner le système au plus juste plutôt que vous vendre une infrastructure dont l'entretien vous coûtera plus qu'elle ne vous fera gagner.

Quand vous serez prêt

Cessez de reconstruire le même bouton.

Dites-nous la taille de votre produit, le nombre de personnes qui le construisent, et là où l'incohérence vous ralentit. Nous vous répondrons sous 24 heures avec une lecture honnête de l'intérêt d'un design system à ce stade — et de ce à quoi ressemblerait un système bien dimensionné, conçu pour vous rendre plus rapides et plus cohérents.

Engager la conversation →