Weborama - Design System
Design System
Atelier
Atomic Design
Variables
Modes
Documentation
Mai 2023 à janvier 2025
CLIENT
Pepyte
RÔLE
Product Designer
SECTEUR
Recrutement
DURÉE
26 mois
Figma
Zeroheight
CONTEXTE
Weborama est une AdTech spécialisée dans la data et l’intelligence artificielle sémantique, développant des solutions qui permettent aux marques et annonceurs d’analyser les comportements utilisateurs et d’optimiser leurs campagnes digitales.
L’entreprise proposait quatre outils SaaS sans Design System commun, une absence qui engendrait des incohérences entre les interfaces et ralentissait la livraison de nouvelles fonctionnalités. L’enjeu : auditer l’existant, concevoir un Design System unifié et en assurer l’adoption durable à l’échelle des quatre applications.
J’ai pris la direction du projet au sein d’une équipe de trois designers, en pilotant les ateliers de co-construction, les décisions d’architecture et la documentation. Je reportais au Lead Designer et collaborais avec une équipe produit composée de trois développeurs, quatre PO et un CPO, en méthode Agile.
VUE D'ENSEMBLE - DÉMARCHE
01
Audit de l'existant
recenser les fondations
recenser les composants
recenser les patterns
02
Ateliers
Valider les fondations
Rationaliser les composants
sensibiliser aux bonnes pratiques
03
Conception
définir les fondations
structurer les variables
concevoir les composants
garantir l’accessibilité (WCAG)
produire les templates
04
Documentation
documenter dans Figma et Zeroheight
alider les composants dans Storybook
RÉSULTATS
-80%
de composants (rationalisés et unifiés)
175
variables pour 4 applications
4
Modes (un par brand color)
1
Documentation centralisée dans Zeroheight
AUDIT
Analyse de l'existant
Pour obtenir une vision globale et identifier les écarts entre les applications, j’ai audité les quatre bibliothèques de composants, soit 974 composants, 44 variables et 14 couleurs. J’ai repéré les incohérences et recensé les éléments communs pour éliminer les doublons et proposer des unifications. L’accessibilité a été vérifiée composant par composant.
Analyse de l'existant
Cartographie des fondations, composants, variables et patterns sur les quatre applications pour identifier les écarts avant toute décision.
Rationalisation des composants
Identification des composants récurrents et des incohérences visuelles pour éliminer les doublons et proposer des unifications de composants et patterns.
Test de l’accessibilité
Pour chaque composant, j’ai vérifié l’accessibilité avec Stark : contraste des couleurs, lisibilité et conformité WCAG.
Résultats
J’ai audité les quatre bibliothèques de composants des applications Weborama, soit un inventaire exhaustif couvrant composants, variables et variations de couleurs.
Cet audit a permis d’identifier 11 composants en doublons, point de départ pour la réduction de 80% du nombre de composants dans le nouveau Design System.
Composants et variants
inventaire exhaustif répartis sur les quatre applications
Variables recensées
dans les quatre bibliothèques Figma
Variations de couleurs
identifiées sur les quatre applications
Composants
identifiés, point de départ pour la réduction de 80%
ATELIER
Atelier de co-conception & évangélisation
J’ai piloté une série d’ateliers de co-conception avec les équipes Design et Développement pour définir collectivement les fondations, composants et patterns du nouveau Design System. Au-delà des décisions de conception, ces ateliers avaient un objectif d’évangélisation : sensibiliser les équipes aux conventions design, à l’Atomic Design et à l’usage des variables pour garantir une adoption durable.
01
Définir les fondations
les couleurs
les typographies
les espacements
la bibliothèque d’icônes
02
Définir les composants
les composants à conserver
la suppression des doublons
l’unification des composants
03
Définir les règles
une convention de nommage
les typographies
04
Définir les variables
définir les règles
une structure claires
Résultats
Les ateliers ont permis d’aligner les équipes Design et Développement autour d’un fichier commun, source de vérité unique pour les 4 applications.
24 composants ont été validés en consensus avec l’équipe, et l’architecture en 4 modes de variables a été définie collectivement selon les principes primitives, alias et sémantiques.
Fichier commun
source de vérité unique pour les 4 applications
Composants validés
sélectionnés et approuvés en consensus avec l’équipe
Modes de variables
architecture définie en primitives, alias et sémantiques
CONCEPTION
Conception par étapes
Fort des décisions prises en atelier, j’ai conçu l’ensemble du Design System à partir de zéro, créé les fondations, les variables, les composants, les templates et vérifié l’accessibilité.
Fondations
Je définis les palettes de couleurs communes et les déclinaisons par application ainsi que les typographies, les icônes, les logos et les bordures.
Variables
J’organise les variables en trois niveaux : primitives, alias et sémantiques. Je formalise un système de nommage clair.
Composants
Je conçois l’ensemble de la bibliothèque de composants selon les principes de l’Atomic Design.
Accessibilité
J’intègre l’accessibilité dès la conception des fondations, variables et composants pour garantir des interfaces inclusives et conformes WCAG.
Templates
Je conçois des templates réutilisables permettant aux équipes de produire des interfaces cohérentes, conformes au Design System, plus rapidement.
Résultats
L’ensemble des résultats du questionnaire, complété par 15 recrute
Le Design System a été conçu intégralement à partir de zéro, couvrant fondations, variables, composants, accessibilité et templates.
24 composants déclinés en 195 variants ont été produits selon l’Atomic Design, organisés en 5 collections de variables structurées en primitives, alias et sémantiques.
urs via Notion Form est détaillé dans un tableau et exprimé en pourcentages.
Les résultats ont permis d’identifier 10 champs prioritaires à intégrer immédiatement dans le produit, avant la création du menu de personnalisation.
Ces recommandations ont été présentées aux équipes et déployées en priorité, le reste des champs étant traité dans une seconde phase via le menu de personnalisation des formulaires.
Composants
déclinés en 195 variants, conçus selon les principes de l’Atomic Design.
Collections de variables
structurées en primitives, alias et sémantiques.
Modes
associés à chaque application pour gérer les palettes de couleurs de marque.
Templates
associés à chaque application pour gérer les palettes de couleurs de marque.
DOCUMENTATION
Zeroheight & Storybook
J’ai documenté le Design System dans Zeroheight afin de fournir aux équipes un référentiel centralisé couvrant les fondations, les variables (tokens), les composants (et variants) ainsi que leurs règles d’usage.
En parallèle, les composants ont été implémentés dans Storybook par l’équipe front-end. Ce tandem Zeroheight / Storybook assure l’alignement entre design et développement tout au long du projet.
Synchronisé
Figma, Zeroheight et Storybook
Composants documentés
dans Zeroheight avec variants et règles d’usage
Tokens documentés
Colors, spacing, border et shadow
MES RECOMMANDATIONS
Des idées transformées en produits
En tant que Product Designer, Thomas a su faire de l’IA un véritable allié stratégique, l’intégrant avec maîtrise dans ses méthodes de conception pour créer des produits plus intelligents, optimiser les parcours utilisateurs et renforcer durablement la performance des produits Weborama.
Donia Ben Ghorbal
Donia Ben Ghorbal
Merci pour votre attention
Vous pouvez consulter les autres études de cas
Recherche utilisateur
Atomic Design
Atomic Design
Variables
Modes
Documentations
Figma
Zeroheight
Consulter
Product Design
Améliorations UX
Atelier
Nouvelle fonctionnalité
entretien
Figma
Notion
Consulter
Product Design IA
Parcours utilisateur
Design System
Nouvelle application
Améliorations UX
Figma
Figma Make
Consulter