Étude de cas · Design System · 2025
Refonte de 10 sites, un système pour les régir tous.
J'ai refondu tout un portefeuille de médias B2B sans repartir de zéro à chaque fois. La clé, un Design System en cascade : un parent par Business Unit, un enfant par marque.
Design system en solo, maquettes et pilotage projet
10 sites média B2B, France et international
environ 7 à 8 mois, en parallèle d’autres missions
Figma, HTML/CSS, Suite Office, ticketing interne
Le contexte
Un groupe média B2B, plusieurs marques sur des sites datés, sans maquettes de référence.
Ma mission
Refondre tout le portefeuille, vite, avec une charte cohérente et l’identité propre de chaque marque.
Le résultat
Un design system en cascade, dix sites refondus, une production bien plus rapide.
01 · Le défi
Un portefeuille à moderniser,sans tout refaire 10 fois.
NetMedia Group est un groupe de médias B2B spécialisés (IT, marketing, décideurs). Le groupe édite une dizaine de marques média B2B, réparties par Business Unit. La BU IT comprend par exemple silicon.fr, la BU Business e-marketing.fr et la BU Décideurs daf-mag.fr ou encore beaboss.fr. Pour ce projet de refonte, 10 sites ont été identifiés en fonction de leur audience et le CA généré.
La plupart tournaient sur un front-office vieillissant, avec un design d’un autre âge. Aucune maquette de référence n’existait. Les évolutions se faisaient au fil de l’eau, souvent par les développeurs, sans passage par le design.
Le résultat sautait aux yeux. Des sites qui accusaient leur âge, loin des standards du web actuel.
Au-delà d’être des sites d’informations professionnelles, ces sites sont des vitrines commerciales. Ils servent à vendre de la publicité et à générer des leads. Leur image doit donner envie aussi bien à l’audience qu’aux annonceurs.
L’enjeu n’était donc pas de refaire un site. C’était de pouvoir les refaire tous, vite, sans perdre l’identité de chaque marque pour correspondre à sa cible.
Le site en ligne : la seule référence disponible avant le design system.
02 · Les objectifs
Ce que je devais réussir
- Moderniser l’image des marques.
Ces sites sont des vitrines, leur allure pèse directement sur la vente publicitaire et la génération de leads. - Créer plus d’espaces publicitaires, sans surcharger.
Plus d’inventaire à vendre, mais une page qui reste lisible et agréable. - Améliorer l’expérience utilisateur.
Une navigation plus claire et une lecture plus confortable. - Accélérer la production.
Pouvoir refondre et faire évoluer les sites vite, sans repartir de zéro à chaque fois.
03 · Le process
Auditer, systématiser, piloter
Pour chaque refonte, je repartais du même socle. Une méthode que j’ai rejouée site après site en l’améliorant en continue, pour décider sur des faits et garder de la cohérence sur tous les sites.
01
Auditer
Analyse de l’existant et benchmark. Atelier avec les équipes pour confirmer les besoins identifiés. Puis information sur le process et le timing de la refonte.
02
Systématiser
Sur le pilote, création du système parent puis de l’enfant. Sur les sites suivants, ajout des composants manquants au parent et déclinaison sur les enfants pour enrichir l’ensemble.
03
Piloter
Brief des développeurs, puis suivi de la recette jusqu’à la mise en production. Enfin, préparation de la communication, en interne comme en externe.
La bibliothèque de composants parent, créée de zéro.
04 · Décisions de design
Un système en cascade, pensé pour durer.
Trois partis pris ont structuré tout le projet.
Chacun répond à un objectif : cohérence, vitesse, souplesse.
Un design system en cascade. Un parent par business unit, qui porte les tokens et les règles. Un enfant par marque, qui hérite du parent et reçoit sa propre variable : couleurs, typo, logo. Le fichier final appelle l’enfant, pour un site comme pour un support de communication. Tout descend du parent, donc chaque création reste alignée sur la charte.
Un découpage par business unit, né d’une contrainte. L’abonnement Figma limitait le nombre de tokens et de règles. Regrouper les parents par business unit a permis de rester dans le cadre, sans perdre en souplesse. Une contrainte transformée en structure.
Des fonctionnalités partout, activées à la carte. Chaque brique existe dans le système, mais chaque site n’active que ce dont il a besoin. On garde la cohérence du groupe, et chaque marque continue de parler à sa cible.
Concrètement, voici comment ça marche.
Mise en place des variables à appliquer en fonction des marques.
Utilisation du Design System enfant pour monter les maquettes de site.
05 · Résultats
Des sites plus clairs,produits en temps record
Le premier site a servi de pilote. Sur les suivants, le système a payé : maquettage divisé par trois, développement divisé par deux.
Les effets ne se sont pas arrêtés à la production.
- Les audiences mobile ont progressé sur l’ensemble des sites, grâce à un design enfin adapté.
- Les marques ont gagné en modernité et en crédibilité, ce qui pèse pour convaincre les annonceurs.
- Les espaces publicitaires sont plus nombreux et mieux intégrés, donc plus vendables.
- Et en interne, ce grand dépoussiérage a relancé la motivation des équipes.
÷3
temps de maquettage
÷2
temps de développement
10
sites refondus
Avant / après refonte et utilisation de la cascade de Design systems.
06 · Ce que j’en retiens
Un système vivant, jamais figé.
Un design system n’est jamais vraiment fini. Il demande de l’entretien, des mises à jour, des ajustements au fil des besoins. C’est une surveillance continue.
Mais le bilan est clair. À l’échelle du groupe, tout va plus vite. Le vrai livrable n’était pas dix sites, mais un système capable d’en produire d’autres, cohérents et rapides.