Mettre en place les fondations du Design System Clarins
SEPTEMBRE 2020
Contexte
Clarins m’a confié la mission de poser les bases de son Design System, dans un contexte de refonte de son identité.
Le site souffrait d’une forte dette graphique : styles dispersés, composants dupliqués, manque d’alignement. Une expérience peu fluide pour les utilisateurs, un frein pour les équipes, et une image de marque affaiblie.
Ce travail s’inscrivait dans un tournant stratégique pour la marque, avec le lancement de sa nouvelle expression : Live beautifully.
Mon rôle
Structurer une base UI claire, solide et alignée avec ce nouveau territoire de marque.
Objectifs
• Rationaliser les styles UI pour poser les bases solides d’un futur Design System.
• Renforcer la cohérence visuelle à travers tous les parcours utilisateurs.
• Aligner l’interface avec la nouvelle identité Clarins, autour de la signature “Live beautifully”.
• Améliorer la vélocité des équipes (design et tech) grâce à des composants standardisés.
• Créer un langage visuel clair et fonctionnel, tout en conservant l’élégance et la sensibilité propre à la marque.
Problématique
Les incohérences visuelles impactaient trois niveaux
L’expérience utilisateur
Des composants non standardisés rendaient les parcours confus, parfois contre-performants.
La productivité des équipes
Sans règles claires, les développeurs recodeient à chaque fois les mêmes éléments — perte de temps et dette technique.
L’image de marque
Le site ne reflétait pas la nouvelle identité de Clarins.
Solutions mises en place
Rationaliser
les styles
Les couleurs :
Définition d’une palette cohérente autour du Red Clarins (#BA0C2F), couleur iconique et porteuse d’émotion. Les teintes secondaires (Linen, Rosewood, White Sand…) viennent structurer l’interface tout en respectant l’ADN beauté et premium de la marque .
Les typographies :
Hiérarchisation précise des tailles de titres et textes, en accord avec la charte Clarins (Clarins Regular, Gotham). Objectif : améliorer la lisibilité et poser des standards applicables à l’international.
Boutons :
Le bouton “Primary” utilise le rouge Clarins pour incarner l’action. Il devient un repère fort dans la navigation.
Checkbox & Radio buttons : Déclinés à partir des mêmes codes pour maintenir la cohérence dans les filtres, formulaires ou sélections.
L’enjeu : créer une interface claire, intuitive, cohérente — sans sacrifier la dimension émotionnelle chère à la marque.
Rationaliser les composants
Pour favoriser l’adhésion, j’ai :
• Présenté des guidelines claires : Do/Don’t,
• Illustré l’impact concret sur l’UX et la marque,
• Présenté ces éléments à chaque partie prenante,
Pour qu’un design fonctionne, il doit être compris et porté par toutes les équipes, pas seulement par les designers.
Etre pédagogue auprès des équipes
Mise en situation
Impacts & conclusion
Côté UX
Les parcours sont devenus plus fluides, mieux structurés et cohérents, renforçant l’ergonomie et la lisibilité sur tous les supports.
Côté UI
Le style visuel est désormais plus clair, harmonisé et ancré dans l’identité Clarins, avec des règles UI partagées et appliquées à l’échelle.
Côté Dev
Les développeurs bénéficient de composants standardisés, ce qui réduit la dette technique et accélère les temps de production au quotidien.
Côté Business
Un parcours plus fluide et engageant, une meilleure hiérarchisation des contenus et des CTA plus visibles soutiennent la conversion.
Côté Marque
Le site reflète une identité forte et moderne, alignée avec la plateforme de marque « Live beautifully » et ses codes d’élégance durable.
Côté Product (PO, CPO, PM)
Les PO et PM disposent de fondations claires pour cadrer les projets, prioriser les besoins et aligner toutes les équipes plus facilement.
Et si on travaillait ensemble ?
Je vous aide à transformer vos idées en expériences digitales réussies.