Design System
Les interfaces présentaient un manque de cohérence globale, avec des composants hétérogènes et peu harmonisés. Ces incohérences nuisaient à la lisibilité, ralentissaient le développement et dégradaient la qualité globale de l’expérience utilisateur.
Constats utilisateurs
Les tests utilisateurs ont mis en évidence une perception globalement négative du design, principalement liée à un manque de lisibilité et à une esthétique perçue comme vieillissante.
Problématique
Comment aligner des équipes aux pratiques hétérogènes autour d'une vision design commune, tout en structurant des process durables capables de soutenir la montée en maturité produit et technique ?
Objectifs
L’objectif était de poser les bases d’un Design System structurant, capable d’aligner les équipes design et tech autour d’un langage commun.
Mon rôle
-
Traduire les enjeux UX en interface
-
Co-construire et faire évoluer le Design System
-
Améliorer la lisibilité et l’accessibilité des interfaces
-
Itérer grâce aux tests
-
Collaborer avec les devs
Durée
Projet mené sur 12 mois
Equipes
4 designers UI/UX + 2 développeurs
Cadrage
Le design souffrait d’un manque de structuration, avec une dette technique importante et des pratiques UX hétérogènes selon les produits. Les designers d'interface étaient désorientés face à l'absence de source unique de référence. Les développeurs étaient frustrés par la duplication des composants, ce qui ralentissait leur travail. Les utilisateurs peinaient avec les interfaces chargés d'informations. Ces problèmes n'allaient faire qu'empirer avec la croissance de notre équipe produit. Faute de budget et de ressources pour créer une équipe dédiée au Design system, nous avons progressé tant bien que mal, en créant progressivement de nouveaux composants et styles. Dans ce contexte, un travail de cadrage et d’alignement a été initié côté Product Design, et un audit ux approfondi a été réalisé afin de comprendre les incohérences de conception.
L'enjeu majeur a été de rationaliser un existant graphique devenu incohérent, avec une utilisation non maîtrisée des couleurs et un éloignement progressif de la charte initiale du à des besoins réguliers de renouvellement visuel d'interface demandé en interne. J’ai ainsi participé à la redéfinition d’un système de couleurs plus sobre, minimaliste et structuré, permettant de rétablir une harmonie visuelle, d’améliorer la lisibilité des interfaces et de faciliter leur implémentation côté développement. En tant que UI designer, mon rôle a été de traduire cette vision en solutions concrètes, en structurant les interfaces et en apportant de la cohérence visuelle à l’ensemble des produits.
Le Design System a également servi de base pour instaurer un langage commun entre designers, intégrateurs et développeurs, tout en optimisant le temps de production des maquettes et la cohérence globale des livrables.
Audit & constats
Pour structurer l’existant, nous avons commencé par centraliser l’ensemble des styles et composants, puis éliminé ceux qui ne répondaient pas aux standards de qualité attendus. Nous avons collecté et documenté des captures d’écran de tous les éléments d’interface, avant de les organiser par catégories : styles typographiques, couleurs, icônes, boutons, navigation, en-têtes, footer, cartes, formulaires, listes et autres composants.
Cette analyse a mis en évidence plusieurs problématiques :
-
Multiplication de composants similaires avec des variations incohérentes
-
Absence de règles typographiques et de hiérarchie visuelle claire
-
Utilisation excessive de couleurs, non conforme à la charte initiale
-
Manque de documentation et de standards partagés
-
Dette technique rendant difficile l’implémentation des composants côté développement
Plus globalement, le produit manquait d’un cadre structurant, ce qui conduisait à des décisions design isolées et à une multiplication de composants sans réel besoin.
Le regroupement de tous nos styles et composants par catégories a considérablement facilité l'identification de nos ressources et des points à optimiser. Les styles et composants inutiles ont été supprimés et les éléments similaires fusionnés. La décision de conserver ou de supprimer a été prise collectivement, principalement par une évaluation heuristique.
Bibliothèque de composants
Après un audit des composants existants et la définition de directives de style globales, l’étape suivante a consisté à concevoir une bibliothèque de composants, accompagnée d’une nouvelle charte de couleurs et de leurs usages.
Jusqu’alors, l’équipe design travaillait sur Adobe XD. Cette phase a également été l’occasion de questionner les limites de l’outil, notamment en matière de collaboration et de partage. Nous avons donc choisi de migrer vers Figma, pour sa flexibilité et ses capacités collaboratives.
Chaque composant a été documenté, ainsi que ses règles d’usage, afin d’assurer une cohérence durable.
Côté développement, une librairie technique basée sur Tailwind a été mise en place pour faciliter l’implémentation et la réutilisation des composants, tout en garantissant la cohérence entre design et code.
Faute de temps et de ressources pour refondre l’ensemble du produit en une seule fois, nous avons adopté une approche progressive. Designers et développeurs ont travaillé en étroite collaboration pour intégrer les nouveaux styles et remplacer les anciens composants en fil rouge.
Nous avons commencé par les éléments les plus structurants — couleurs, en-têtes, pieds de page et boutons — afin de maximiser rapidement l’impact visuel et fonctionnel.
Cette approche nous a permis d’améliorer progressivement la cohérence de l’expérience utilisateur à l’échelle du produit, tout en maintenant le rythme de développement, sans gêner les projets déjà en cours.
Styles
Nous avions beaucoup de couleurs très similaires, ce qui était inutile et source de confusion. Une palette plus restreinte a été proposée pour plus de simplicité avec des directives succinctes concernant leur utilisation ont été ajoutés afin de clarifier leurs utilisations.
Typographie
De nombreux styles de texte et polices étaient utilisés sur différentes pages. Nous avons considérablement réduit leur nombre et nous avons opté pour une police avec une bonne neutralité visuelle, optimisé web, la Roboto.
Iconographie
Les icônes manquaient également d’harmonisation : plusieurs styles — pleins et filaires — coexistaient sans règle claire d’utilisation, ce qui nuisait à la cohérence visuelle.
Pour gagner du temps tout en garantissant une meilleure homogénéité, nous avons fait le choix de nous appuyer sur une bibliothèque d’icônes existante. Notre sélection s’est portée sur la bibliothèque d’icônes de Google, reconnue pour sa cohérence, sa lisibilité et sa richesse.
Exemples de composants
Test & itérations
Un test de discovery a été mené sur la page « offres » afin d’évaluer les perceptions et ressentis des utilisateurs. Les retours ont montré que, de manière globale, l’interface était perçue comme peu attractive, jugée vieillissante, avec une lisibilité limitée liée notamment à une taille de texte insuffisante, en particulier sur mobile.
Dans ce contexte, une nouvelle version de la page « offres » a été conçue afin de tester les premiers éléments du Design System en cours de construction. Certains choix de conception, comme une palette volontairement restreinte, s’inscrivaient dans une approche progressive, en préparation d’un système chromatique différencié selon les catégories de données.
Suite à ces enseignements, plusieurs éléments ont été ajustés et simplifiés afin de renforcer la clarté, l’intelligibilité et la qualité globale de l’expérience utilisateur.
Ci-dessous, la page « Offres », première interface à intégrer et tester le Design System.
Avant
.png)
Aprés
Des tests sur d’autres projets ont permis de recueillir des retours utilisateurs afin de valider la pertinence du Design System.
Verbatims utilisateur :
« La page est bien structurée, plus claire. »
« Les couleurs sont agréables et c'est aéré. »
« Je trouve que ça change, c'est plus agréable à l'oeil. »
« C'est moderne, j'aime bien le nouveau branding. Ça donne confiance et ça fait plus premium. »
« C'est très bleu, ça manque de couleur. »
Application du Design System
Quelques exemples de pages entièrement refondues avec le Design System.
À gauche, l’ancienne interface ; à droite, la version après implémentation du Design System.
Cartographie
Création d'un compte & connexion
Tunnel de paiement
Compte client
Résultats
Le Design System est devenu un socle commun pour aligner design, développement et produit. Il a facilité la collaboration, clarifié les décisions et renforcé la cohérence des interfaces. Progressivement adopté par les équipes, il a été un levier pour concevoir plus efficacement et avec plus de qualité.
Résultats (partiels)
+ 5% amélioration du taux de conversion
+100 composants créées dans le Design System
+ 50 % de temps gagné à la conception
Réflexion
Un design system doit être ancré dans les usages réels et ne pas rester théorique. Sa réussite repose en grande partie sur une collaboration étroite avec les développeurs dès les premières étapes, afin d’en assurer la faisabilité et l’adoption.
Les tests d’utilisabilité, visant à vérifier la compréhension et l’appréciation globale des composants, constituent également une étape essentielle. La documentation joue un rôle clé pour garantir une bonne appropriation par les équipes. Enfin, la simplicité et la clarté doivent toujours primer sur la complexité afin de concevoir un système réellement efficace et durable.