Balenciaga CSE | Vanta Studio

Cadrage du projet.

Moderniser l'expérience digitale du CSE Balenciaga tout en préservant la Direction Artistique iconique de la maison. L'application existante ressemblait à n'importe quelle app CSE générique : navigation à plat, aucun code visuel Balenciaga.

Survolez les piliers

Recherche quantitative.

47 employés Balenciaga interrogés via les canaux internes, croisés avec les entretiens terrain. Chaque visage, une voix, chaque pastille, une priorité qui ressort.

Panel

0

Employés interrogés

Boutique

0%

des répondants

Bureau

0%

des répondants

Logistique

0%

des répondants

68%ouvrent l'app d'abord pour les avantages

77%ont déjà abandonné l'app en cours de route

78%réclament un accès direct aux avantages

64%veulent contacter leurs élus facilement

61%attendent une interface signée Balenciaga

57%demandent une barre de recherche efficace

68%ouvrent l'app d'abord pour les avantages

77%ont déjà abandonné l'app en cours de route

78%réclament un accès direct aux avantages

64%veulent contacter leurs élus facilement

61%attendent une interface signée Balenciaga

57%demandent une barre de recherche efficace

Recherche qualitative.

Observation terrain de 6 employés représentatifs en train d'interagir avec l'ancienne interface. De ces observations sont nées une Empathy Map et une User Journey Map, pour saisir leurs mots, leurs pensées, leurs gestes et leurs ressentis avant toute décision de conception.

Empathy MapProfil employé.

01Ce qu'ils disent

« L'app ne ressemble pas du tout à Balenciaga. »
« C'est trop compliqué à utiliser sur mon téléphone. »
« Je ne sais jamais où trouver les infos sur les élus. »
« Je préfère demander directement à un collègue. »

02Ce qu'ils pensent

Le CSE ne s'est pas donné les moyens de faire quelque chose de bien.
« C'est compliqué, alors je ne l'utilise quasiment jamais. »
« Si l'app est moche, les avantages doivent être moches aussi. »
« On travaille pour Balenciaga, on mérite mieux que ça. »

03Ce qu'ils font

Ouvrent l'app une à deux fois par mois maximum
Scrollent toute la liste sans catégorisation
Utilisent uniquement les 2-3 partenaires qu'ils connaissent déjà
Font une capture d'écran d'une offre plutôt que de noter le lien

04Ce qu'ils ressentent

Frustration face à une interface qui ne correspond pas à l'image de la marque
Découragement devant la navigation chaotique
Légère honte à montrer l'app à un collègue d'une autre maison Kering
Indifférence progressive : si c'est trop compliqué, autant ne pas y aller

01Découverte02Recherche03Accès04Compréhension05Partage

ScepticismeConfusionEffortFrustrationRésignation

Première approcheListe sans filtresNavigation laborieuseInformation disperséeUsage occasionnel

Une liste non catégorisée, une navigation chaotique et une information dispersée
transforment chaque visite en effort
jusqu'à la résignation et un usage très occasionnel.

Enjeu

Le pic de friction se situe dans la recherche au sein d'une longue liste non catégorisée : faute de filtres, l'employée scrolle, se décourage et finit par se résigner — ce qui explique un usage très occasionnel de l'app.

Opportunités clés.

01

Organiser les offres par catégories claires et visuelles

02

Ajouter une barre de recherche efficace et visible

03

Hiérarchiser l'information et mettre en évidence le code ou le CTA

04

Permettre de sauvegarder, partager et retrouver ses offres facilement

Les deux cibles

Deux profils, un terrain.

Les entretiens et le questionnaire ont fait émerger deux grands types d'usage. 86% des comportements identifiés sont couverts par ces deux personas : l'employée en boutique, mobile-first, qui consulte l'app dans l'urgence entre deux clients ; et le responsable qui, lui, utilise le desktop et cherche avant tout à accéder rapidement aux documents officiels.

Employée boutique Responsable logistique

CSE BalenciagaFiche persona

Léa

28 ans · Employée en boutique · Paris

Mobile-first — iPhone, très à l'aise

« Je veux que l'app du CSE soit aussi soignée que les collections. »

NoviceExperte

Aisance mobile 5/5

Exigence visuelle 5/5

Fréquence d'usage 2/5

Objectifs

Trouver rapidement un avantage précis (cinéma, sport, hôtels).
Savoir qui contacter au CSE en cas de question.
Comprendre ses droits et suivre les actualités du CSE.

Freins

L'app actuelle est « moche » et ne reflète pas l'image de la marque.
Navigation trop longue pour trouver un partenaire précis.
Aucune distinction entre info importante et offre commerciale.

Besoin — une app fluide, visuelle et rapide

CSE BalenciagaFiche persona

Marc

45 ans · Responsable logistique · Lyon

Desktop — accès hebdomadaire

« Je veux trouver l'info rapidement, sans chercher partout. »

NoviceExpert

Préférence desktop 5/5

Recherche d'efficacité 5/5

Tolérance au superflu 1/5

Objectifs

Trouver les informations rapidement.
Accéder facilement aux documents du CSE.
Contacter un élu sans détour.

Freins

Interface peu adaptée au desktop.
Informations mal organisées.
Recherche peu efficace.

Besoin — aller droit à l'information

Touchez une fiche pour la lire

Une arborescence à deux entrées.

L'ancienne structure plate, remplacée par une hiérarchie claire à deux entrées principales. Les données terrain confirment deux besoins qui dominent massivement.

Votre CSE

Présentation · Élus & contacts · Actualités · Documents officiels.

Vos Avantages

Bien-être & sport · Culture & loisirs · Voyages · Achats · Vie sociale.

Arborescence de l'app.

La nouvelle architecture de l'app : un accueil recentré sur deux entrées, un menu burger réduit au secondaire et des avantages enfin catégorisés — chaque information se trouve en deux taps.

01AccueilDeux entrées clairesDeux blocs heroAccès direct
02Votre CSEPrésentationÉlus & contactActualitésDocuments officiels
03Menu burgerNavigation allégéeSondagesContactAchats en ligne
04Vos avantagesBien-être & sportCulture & loisirsVoyages & hôtelsVie sociale

Benchmark & DA de référence.

L'ancienne application,
ce qu'il fallait dépasser.

Fond noir basique, liste plate sans catégorie, aucun code visuel Balenciaga. Le point de départ qui a motivé l'ensemble de la refonte.

Navigation
Navigation minimaliste, logo seul, burger épuré.
Typographie
Typographie uppercase structurante, hiérarchie forte.
Photographie
Photographie produit ou campagne comme matière première visuelle.

Ancienne application Balenciaga CSE — écran Avantages

Avant Liste à plat

La référence absolue.

À l'opposé, le site officiel Balenciaga sert de référence absolue : blanc dominant, typographie Univers bold condensed uppercase, photographie de campagne pleine page. Chaque écran de l'app doit en être digne.

Référence Balenciaga.com — page catégorie — **Sacs**Page catégorie

Référence Balenciaga.com — listing produits — **Automne 26**Listing produits

Référence Balenciaga.com — fiche produit — **Fiche produit**Prêt-à-porter

Charte & design system.

Fond blanc, typographie Univers bold condensed uppercase, photos de campagne en visuels hero. Une mise en page éditoriale, proche d'un lookbook digital — quatre piliers, au fil du scroll.

Aa

La typographie institutionnelle de Balenciaga. Elle structure toute la hiérarchie visuelle de l'interface.

Univers Bold Condensed Uppercase

Titres hero, entrées principales

Univers Bold

Titres de sections, noms des élus, labels de navigation

Univers Regular

Corps de texte, descriptions, informations complémentaires

Univers Light

Légendes, métadonnées, labels secondaires

Titre hero

Votre CSE / Vos avantages

Titre hero — page d'accueil

Titre de section

Vos avantages

Titre de section

Corps de texte

Le CSE Balenciaga est là pour vous accompagner au quotidien et vous proposer des avantages adaptés à vos besoins.

Corps de texte

Métadonnées

Publié le 12.05.2024

Métadonnées, légendes

01 / 03

La typographie.

Univers — la typo institutionnelle de Balenciaga. Quatre graisses qui structurent toute la hiérarchie de l'interface.

UniversHiérarchie

#000000NoirTypographie principale, logo, icônes

#F2F2F2Gris clairFonds de sections secondaires, séparateurs

#999999Gris moyenTextes secondaires, labels, métadonnées

Couleur d'accentuation : uniquement via les photos de campagne — aucune couleur « UI » ajoutée.

02 / 03

La couleur.

Monochrome noir & blanc, aucune couleur d'UI ajoutée : l'accent vient uniquement des photos de campagne.

Noir & blancSans accent UI

Campagne

La photo comme seule couleur.

Aucune couleur d'UI ajoutée : toute la chaleur vient des campagnes. L'image porte l'émotion, l'interface reste en noir et blanc.

Campagne Balenciaga — groupe sur un perron

Éditorial

Un casting, une attitude.

Postures frontales, regards directs, groupes resserrés : la photo installe l'autorité de la marque et ancre chaque écran dans l'univers Balenciaga.

03 / 03

Direction visuelle.

La photographie de campagne comme seule couleur : lumière naturelle, postures frontales — l'image porte l'émotion.

Tests utilisateurs.

6 employés testés sur prototype Figma, mêmes profils que le questionnaire initial. Tests modérés couvrant 5 tâches clés.

Glissez pour comparer

Ancienne app

4 minTemps de rechercheTrouver une offre sport dans la liste.

8–10 clicsActions nécessairesPour accomplir les tâches clés.

AbsenteBarre de rechercheL’information se cherche à la main.

Prototype testé

45 sTemps de rechercheTrouver une offre sport sur le prototype.

3 clicsActions nécessairesSur les mêmes tâches clés.

AjoutéeBarre de rechercheSuite aux retours de la 1^re vague.↻

6 testeurs · 5 tâches clés · Prototype Figma · 2 vagues de tests

Design final.

Deux blocs hero pleine page en accueil, typographie Univers bold condensed uppercase, photos de campagne officielles. Une expérience éditoriale, à la hauteur de la maison.

Accueil Vos avantages

Présentation des élus.

La mise en page s'inspire directement de la DA Balenciaga : photos N&B pleine page, typographie Univers bold condensed uppercase, hiérarchie stricte. Chaque élu a son rôle immédiatement lisible.

Résultats mesurés

Ce que la refonte a changé.

Score SUS

0

Avant : 52 / 100

Clé

Tâche complétée

+0%

Parcours principal

Clics moyens

-0

Sur les tâches clés

Tests utilisateurs

0

Sessions · 2 vagues

Balenciaga CSE.

Cadrage du projet.

Recherche quantitative.