Weborama - AD tech SaaS, AI Sémantique
Design System
Janvier 2025 à aujourd’hui
Contexte
Weborama — SaaS Ad tech spécialisé dans l’analyse, l’activation et la valorisation de la donnée marketing.
Mission
Concevoir, structurer et documenter un Design System unifié à partir de bibliothèques existantes, afin d’harmoniser l’UI/UX des 4 applications sans interrompre les produits en production.
Contraintes
Le Design System devait être construit en capitalisant sur l’existant, tout en s’intégrant progressivement dans des applications déjà en production, avec des équipes produit et techniques aux rythmes différents.
Use case
Je dois créer un Design System commun à 4 applications. Le Design system comprendra les fondations, les composants, les variables et les templates. L’ensemble du Design system devra être documenté et respecter les règles d’accessibilité.
Résultat
· un Design System commun déployé sur 4 applications,
· 195 composants et 175 variables,
· une documentation rédigés dans Zeroheight,
· un contrôle des composants dans Storybook
Design System : Figma
Documentation : Zeroheight
Étape 1 — Audit de l’existant
Début du use case
Approche
J’ai réalisé une immersion complète dans les bibliothèques des 4 applications pour cartographier l’existant.
Concrètement
J’ai analysé l’ensemble des éléments et composants des interfaces : les composants récurrents et spécifiques, les choix typographiques, la bibliothèque d’icônes, les illustrations, les palettes de couleurs, les mises en page telles, les espacements, les rayons des bordures et les effets utilisés.
Résultats de l'étape 1
2/8
L’audit a été mené sur quatre fichiers Figma distincts, regroupant au total 974 composants, 44 variables et 14 variations de couleurs, offrant ainsi une vision exhaustive de l’existant et des écarts entre les différentes applications.
Étape 2 — Ateliers de co-construction
3/8
Atelier
Afin d’ancrer le Design System dans la réalité produit et technique, j’ai piloté des ateliers de co-construction avec les équipes de développement et de design. Ces temps de travail ont servi à créer un espace d’échange structuré, permettant d’aligner les besoins, de confronter les contraintes et de prendre des décisions éclairées.
Concrètement
Ces ateliers permettent l’adhésion des équipes, de poser des règles et conventions communes et de sensibiliser l’équipe design aux meilleures pratiques (Atomic Design et utilisation des variables).
Résultats de l'étape 2
4/8
J’ai organisé 3 ateliers qui 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.
Étape 3 : Création du Design System
5/8
Création des fondations
La première étape est la création des fondations, elles sont pensées pour couvrir l’ensemble des usages sur les quatre applications.
Concrètement
J’ai commencé par créer les palettes de couleurs pour chaque application, j’ai créé des variables et quatre modes (un mode pour une application).
Je suis ensuite passé à la création des variables de typographie, d’espacements, de bordures et d’élévations. Nous avons conservé la même bibliothèque d’icônes.
J’ai structuré l’ensemble des variables en distinguant les niveaux primitifs, variables et alias afin de faciliter la cohérence et d’arbitrer les choix.
J’ai également porté une attention particulière au nommage et à la catégorisation des éléments, ainsi qu’à l’application de bonnes pratiques de conception (Atomic Design).
L’accessibilité a été vérifiée dès la création des composants (et variants) pour garantir des interfaces inclusives.
Enfin, j’ai conçu des templates réutilisables permettant aux équipes de produire des interfaces plus rapidement.
Ce travail a permis de poser des bases claires favorisant une adoption durable.
Résultat final
6/8
· 195 composants et variants créés vs 974 au départ,
· 175 variables ont été créées et organisées selon une structure claire,
· 4 modes créés pour gérer les couleurs des 4 applications.
Étape 4 — Documentation & adoption
7/8
Outils
Pour assurer une adoption durable du Design System, j’ai structuré une documentation via Zeroheight, cela permet aux équipes d’avoir un point de référence avec les fondations, les variables, les composants, les règles d’usage ainsi que les recommandations et les cas à éviter.
En parallèle l’équipe de développement a créé les composants via Storybook, ce qui m’a permis de vérifier le bon alignement entre le design et le front.
Contenu documenté dans Zeroheight
Résultats
fin du use case
Techniques
Sur le plan technique, l’ensemble des composants a été documenté et revu, garantissant une cohérence complète entre la conception et l’implémentation. Cette structuration a facilité l’intégration des équipes et renforcé leur autonomie dans l’utilisation du Design System.
Produit
Côté produit, l’UI/UX a gagné en cohérence sur l’ensemble des applications, tout en rendant les cycles de conception et de livraison plus rapides et plus fiables. La dette UX/UI a été maîtrisée, la collaboration entre design et développement standardisée, et le Design System s’est inscrit durablement dans les pratiques quotidiennes des équipes.
Recommandation
Pour toute recommandation ou retour sur mon travail chez Weborama, vous pouvez contacter Donia Ben Ghorbal, Lead Product Designer.
Merci pour votre attention
Vous pouvez consulter les autres études de cas
UX Research
UX Research
User Flow
Améliorations UX
Atelier
Entretiens
Figma
Notion
Mobbin
Consulter
Product Design
Améliorations UX
Atelier
Nouvelles fonctionnalités
Entretiens
Figma
Notion
Consulter
Founding Design IA
Parcours utilisateur
Design System
Nouvelle application
Améliorations UX
Figma
Figma Make
Consulter