Palette non hiérarchisée
Trop de couleurs codées par usage, sans harmonie. Il faut encore ajouter celles des opérations.
01 / 04
La Halle.
Designer / Design System & Animation 360° / 2025-2026
Mise à jour des interfaces du site et des newsletters au rythme des opérations commerciales, des temps forts et des lancements de marques. Ma mission : auditer, structurer et faire vivre un Design System cohérent, du web jusqu'au magasin.
Contexte & mission.
La Halle enchaîne les opérations commerciales et les lancements de marques. À mon arrivée, ce rythme s'était fait au détriment de la cohérence visuelle. Ma mission : produire les opérations et reprendre la main sur le socle de design.
Survolez le tableau
Audit de l'existant.
La charte avait grossi par accumulation, sans gouvernance. Premier symptôme : une palette éclatée, où chaque couleur est « réservée » à un usage. Aucune marge pour la direction artistique.
Six codes couleurs concurrents, sans hiérarchie.
Chaque couleur est « réservée » à un usage, et l'on en ajoute à chaque opération. Quatre symptômes en découlent.
Promos · rose Services · vert Prix barrés · orange Autres · bleu + couleurs opé.Tailles non définies
Aucune échelle pour les typos, les pastilles ou les chiffres promo. Des éléments finissent étirés.
02 / 04
Système non structuré
On ajoute sans questionner l'existant. Résultat : des disparités et des éléments sans contexte.
03 / 04
Gouvernance subie
Le commercial décide du design, et les designers n'ont pas accès aux KPIs.
04 / 04
Cas Noël & calendrier de l'avent.
L'opération phare de fin d'année, et la seule qui installe un rendez-vous quotidien avec le client.
01 · Mécanique
Une case par jour
Une offre à ouvrir chaque jour, du 1er au 24 décembre.
02 · Objectif
Un rendez-vous quotidien
Faire revenir le visiteur sur le site chaque jour du mois, jusqu'à Noël.
03 · Contrainte
Le rush de décembre
Un pic de trafic majoritairement mobile : parcours court, lisible au pouce.
Le calendrier de l'avent.
Une case interactive par jour, déclinée web et mobile, avec un rappel quotidien en newsletter.
La M'Halle aux Cadeaux.
La homepage habillée aux couleurs de l'opération : enseigne lumineuse, mascotte et sélection cadeaux dès l'arrivée.
Idées cadeaux.
Une landing de sélection pour toute la famille, femme, homme et enfant.
Méthode par opération.
Chaque temps fort suit le même protocole en 5 phases. Cette répétabilité industrialise la production et améliore la performance d'une édition à l'autre.
01Rétrospective
Analyse du dispositif précédent et de ses KPIs : ouverture, clics, conversion.
Ce que dit la donnée01 / 05
02Benchmark
Veille sur les enseignes comparables sur le même temps fort.
Ce que fait le marché02 / 05
03Cadrage
Parti pris visuel propre à l'opération et sa charte dédiée.
Le parti pris03 / 05
04Conception
Landing, newsletters, visuels sociaux et coordination print.
Tous les points de contact04 / 05
05Mesure
Suivi des KPIs et documentation des apprentissages.
Ce qu'on garde05 / 05
01Rétrospective
Analyse du dispositif précédent et de ses KPIs : ouverture, clics, conversion.
Ce que dit la donnée01 / 05
02Benchmark
Veille sur les enseignes comparables sur le même temps fort.
Ce que fait le marché02 / 05
03Cadrage
Parti pris visuel propre à l'opération et sa charte dédiée.
Le parti pris03 / 05
04Conception
Landing, newsletters, visuels sociaux et coordination print.
Tous les points de contact04 / 05
05Mesure
Suivi des KPIs et documentation des apprentissages.
Ce qu'on garde05 / 05
Charte événementielle.
Un système, des variations. Pour chaque temps fort, des éléments UI sont activés temporairement au-dessus du Design System de base.
Une surcouche,
jamais une refonte.
Palette dédiée
Une gamme de couleurs propre à l'opération.
Composants réservés
Bannières, badges et compteurs, le temps de l'opération.
Typo d'accent
Une typographie ponctuelle pour l'événement.
Motifs & textures
Éléments saisonniers qui habillent la surface.
La rentrée
Palette scolaire, motifs et badges dédiés activés le temps de l'opération, sur la structure du Design System.
Design System structuré.
Le cœur de la transformation, en réponse aux problèmes de l'audit : un référentiel partagé, structuré et évolutif, qui accélère la production et renforce la cohérence.
Le référentiel.
Tokens : couleurs, typographie, espacements, rayons. Palette enfin hiérarchisée.
Échelles de tailles définies (typo, pastilles, chiffres promo). Fin des éléments étirés.
Bibliothèque de composants : blocs landing, modules newsletters, gabarits sociaux.
Règles de déclinaison : habiller une opération sans casser le système.
Nettoyage des éléments orphelins hérités des opérations passées.
Bénéfices.
- Production
Accélérée à chaque opération.
- Cohérence
Entre web, CRM, social et print.
- Réutilisabilité
Des composants partagés par toutes les équipes.
Logo
Palette
#E6007E
#1FA64A
#0E62B3
#F15A29
#1A1A1A
#8C8C8C
#EDEDED
#FFFFFF
01 / 03
Logo & palette
La couleur & le logo.
Le socle de marque : magenta signature, couleurs de rayon et neutres, enfin hiérarchisés.
Typographie
Titre principalMontserrat ExtraBold · 48/56px
Sous-titreMontserrat Bold · 24/32px
Titre de sectionMontserrat Bold · 20/28px
Texte courantMontserrat Regular · 16/24px
Boutons & pills
Voir toutJ'en veux un
FemmeHommeFilleGarçonBébé
02 / 03
Échelles & états
Typo & polices.
Montserrat en échelle typographique claire, boutons et pills normalisés.
Iconographie
E-catalogue
Magasins
Favoris
Se connecter
Panier
Bulles de prix
12€99
9€99
6€99
Étiquettes
03 / 03
États & icônes
Les éléments UI.
Icônes, bulles de prix rondes et étiquettes promo : le chrome commercial, réutilisable par toutes les équipes.
Newsletters & réseaux sociaux.
Un même message commercial décliné proprement sur chaque canal, sans rupture d'identité.
Newsletters CRM.
Blocs modulaires assemblables : héros, grille produits, bandeau promo, compte à rebours, footer.
Contraintes email : compatibilité messageries, dark mode, poids des images, accessibilité.
Hiérarchie pensée pour le scan mobile et le clic rapide.
Réseaux sociaux.
- Gabarits
Déclinables : posts, stories, formats carrés et verticaux.
- Charte
Cohérence avec l'opération en cours.
- Plateformes
Messages adaptés aux codes de chacune.
Animation 360° web & magasin.
Une opération réussie est cohérente du site jusqu'au magasin. Avec l'équipe print, j'aligne les partis pris entre web, PLV et vitrine, et j'adapte les contraintes d'écran et d'impression. Objectif : une marque unifiée sur tous les points de contact.
Collaboration & gouvernance.
Mission très transverse, au contact quotidien des équipes CRM, Commercial, Web et Print. Mon rôle de liant : faire dialoguer les contraintes business, relationnelles et techniques en gardant la cohérence design.
01CRM
Calendrier des envois et segmentation des bases, calés avec l'équipe CRM.
Newsletters & temps fortsCRM
02Commercial
Priorités produits, marges et mécaniques promo arbitrées avec le Commercial.
Opérations & paliers de remiseCom
03Web
Intégration, contraintes techniques et mise en ligne, en binome avec l'équipe Web.
Composants & mise en productionWeb
04Print
Déclinaison magasin : PLV et vitrine alignées sur les partis pris du web.
Contraintes d'impressionPrint
Lancement de la marque Atemi.
Faire exister une marque nouvelle dans un écosystème existant, avec sa propre identité, sans rompre la cohérence de l'enseigne : éléments UI de marque, landing de lancement, newsletters de teasing et visuels sociaux.
Résultats & impact
Ce que la reprise du socle a changé.
Temps de prod
0%
de temps gagné / opé.
Clé
CTR newsletters
+0%
vs édition précédente
Temps forts / an
0+
déclinés en 360°
Cohérence
360°
web · CRM · social · magasin
Votre prochain projet
mérite mieux.
30 minutes pour explorer votre problématique et voir concrètement comment Vanta Studio peut y répondre.
Réserver 30 min · GratuitOu par email : contact@vanta-studio.fr