Weborama - Design System

Janvier 2025 à mai 2026

Contexte

Weborama propose une solution SaaS composée de quatre applications, chacune avec sa propre bibliothèque de composants et de variables Figma, réparties dans différents fichiers.
La dette UX/UI s’accumule : aucun référentiel commun, aucune règle de design, et des composants hétérogènes d’une application à l’autre.

Demande et objectifs

Concevoir un design system pour unifier les quatre applications, réduire la dette UX/UI et améliorer la cohérence produit afin d’accélérer la conception et le développement des nouvelles fonctionnalités.

Mon intervention

J’audite les interfaces existantes (fondations, composants, patterns) et j’anime des ateliers pour définir les standards.
Je conçois le design system (fondations, composants en Atomic Design, variables, modes) et documente son utilisation dans Zeroheight.

Aperçu des résultats

· Un Design System commun déployé pour 4 applications,
· 195 composants et 175 variables (vs 974 composants),
· des templates pour faciliter la conception de nouvelles fonctionnalités,
· Une documentation rédigée dans Zeroheight,
· Un contrôle des composants dans Storybook

Figma

Zeroheight

Audit des bibliothèques existantes

Début du use case

Analyse des interfaces et des composants existants

J’ai mené un audit sur quatre applications regroupant 974 composants, 44 variables et 14 variations de couleur, afin d’obtenir une vision globale de l’existant et des écarts entre les différentes applications. L’accessibilité des composants a également été vérifiée avec Stark.

J’ai analysé les composants récurrents, identifié les incohérences visuelles et les variations de styles, puis recensé les éléments communs afin de supprimer les doublons et proposer une unification des patterns UI.

Résultats

Cette analyse a permis d’identifier les composants, fondations et patterns existants dans les bibliothèques :
974 composants, 44 variables et 14 variations de couleur.

Exemple de bibliothèque avant intervention

Atelier

2/5

Co-conception & evangelisation des pratiques design

Je pilote des ateliers de co-construction avec les équipes pour définir les fondations, composants et patterns du nouveau design system.
L’objectif est aussi de sensibiliser aux conventions design, à l’Atomic Design et à l’usage des variables.

Résultats

Les ateliers m’ont permis de prendre des décisions sur :
· les éléments que nous souhaitons conserver et supprimer (composants, couleurs, typographies, …)
· le nommage des composants,
· l’architecture des variables,
· la sensibilisation à l’importance de l’utilisation des variants et des variables,
· la création de templates et la mise en place de patterns communs pour les 4 applications.

Exemple d'atelier sur les tags et badges

Conception du Design System

3/5

Création des fondations

Je définis les palettes de couleurs par application, crée les variables associées et quatre modes (un par application).
Je structure également les variables de typographie, d’espacement, de bordures et d’élévations, en conservant une bibliothèque d’icônes commune.

Architecture des variables (tokens)

J’organise les variables en trois niveaux : primitives, alias et sémantiques, afin de garantir la cohérence et faciliter les arbitrages.
Je formalise un système de nommage clair et une catégorisation scalable.

Conception des composants (Atomic Design)

Je conçois l’ensemble de la bibliothèque de composants selon les principes de l’Atomic Design.
J’applique des bonnes pratiques de structuration pour assurer réutilisabilité et maintenabilité.

Accessibilité

J’intègre l’accessibilité dès la création des fondations, variables (tokens), composants et variants pour garantir des interfaces inclusives.

Templates

Je conçois des templates réutilisables permettant aux équipes de produire des interfaces plus rapidement et de manière cohérente.

Résultats

· 195 composants et variants (vs 974 composants initiaux)
· 175 variables organisées en design tokens
· 4 modes de couleurs pour gérer les quatre applications (brand colors)

Tous les composants ont été conçus avec leurs états et variantes, selon la méthode de l’Atomic Design.

Documentation du Design System

4/5

Documentation dans Zeroheight

Le Design System a été documenté dans Zeroheight afin de fournir aux équipes un référentiel centralisé : fondations, variables (tokens), composants et règles d’usage.
En parallèle, les composants ont été implémentés côté front dans Storybook, ce qui a permis de vérifier l’alignement entre le design et le développement.

Résultats

· Facilitation de l’adoption du Design System
· Amélioration de la cohérence entre design et code
· Diffusion des bonnes pratiques d’implémentation auprès des équipes design et tech.

Merci pour votre attention

Vous pouvez consulter les autres études de cas

Recherche utilisateur

UX Research

Parcours utilisateur

Ateliers

Entretiens

Documentations

Figma

Mobbin

Notion

Consulter

Product Design

UX Design

Atelier

Fonctionnalité de matching

Entretiens

Figma

Notion

Consulter

Product Designer IA

Parcours utilisateur

Design System

Nouvelle application

UX/UI Design

Figma

Figma Make

Consulter