';
Agence Uni

Etude de cas : Charles Jourdan

UNE MÉTHODOLOGIE UNIQUE ADAPTÉE AU SECTEUR DU LUXE

Charles Jourdan

UN SAVOIR-FAIRE À LA FRANÇAISE

Créé au début du 20e siècle, Charles Jourdan, est une marque emblématique de chaussure de luxe française. Devenue célèbre, grâce notamment à ses escarpins aux talons profilés nommés “Louis XV”,  la marque en 1960 produit plus de 650 000 paires par an. C’est l’âge d’or de la firme. Par la suite, elle tombera, en parti à cause de désaccords entre les héritiers, dans l’oublie. Il faut attendre l’année 2009, pour voir la marque de luxe retrouver ses couleurs d’antan.

Dans le cadre de cette renaissance, Charles Jourdan a décidé d’ouvrir un site e-commerce. Pour réaliser le design de la plateforme elle a choisi l’agence, spécialisée dans le luxe digital, Uni.

 Comment créer une plateforme qui allie à la fois le passé riche de la marque et son nouvel élan, plus moderne ?

 

00

Prémisses du projet

COMPRENDRE LES ATTENTES DU CLIENT

La première étape fut de définir clairement les besoins de la marque et la finalité vers laquelle elle souhaitait tendre avec la création d’un site e-commerce. Pour ce faire, nous avons rencontré le directeur et la directrice marketing de Charles Jourdan. Ces derniers nous ont d’abord renseignés, sur l’histoire de la marque, en quoi, celle-ci était emblématique d’une époque, d’un art de vivre et à qui le site serait principalement destiné. À partir de cet échange, nous avons pu déterminer une stratégie que nous leur avons soumise puis modifiée en fonction de leurs demandes.

Définition des objectifs :

Notre stratégie comportait un certain nombre d’objectifs à atteindre avec la création et la mise en ligne de ce site e-commerce. Nous avons ainsi pu déterminer quatre grandes intentions 

  • Créer une vitrine digitale identitaire
  • Développer la commercialité de la marque
  • Augmenter la visibilité des collections Charles Jourdan
  • Recruter de nouveaux clients

Planification du projet

Pour atteindre ses objectifs, nous avons dû définir différentes étapes  intermédiaires de livraison, afin que la directrice marketing et le chef de projet de la marque Charles Jourdan puissent avoir un aperçu du travail effectué :

  • Atelier de co-création (UX design)
  • Design de l’interface (UI design)
  • Prototypage de la plateforme
  • Livraison des maquettes (Styleguide et animation UI)

Après validation du planning nous établissons un devis que nous soumettons ensuite au client.

01

UX Design

POUR UNE EXPÉRIENCE UTILISATEUR OPTIMALE

Afin que l’interface soit intuitive et fonctionnelle à la fois, il fut nécessaire avant de procéder à l’étape du design, de penser à l’expérience de l’utilisateur sur la future plateforme.

Image de plusieurs maquettes de site web

Ateliers de co-création

En collaboration avec le chef de projet et la directrice marketing, nous avons dans le cadre d’ateliers de co-création, défini les différents points essentiels à incorporer au site.

FONCTIONNALITÉS

Déterminer les fonctionnalités qui seront présentes sur le site Charles Jourdan : En quoi celles-ci sont pertinentes au regard du client, où faut-il les placer pour que ce dernier soit le plus susceptible d’y accéder et quelles sont celles qui peuvent être regroupées dans le but de simplifier la navigation.

ERGONOMIE

Adapter le site à l’usage de l’utilisateur, de manière intelligible, en fonction des différents supports sur lesquels le site sera consulté et la façon dont le client va interagir avec ceux-ci (tactile pour les tablettes et mobiles, trackpad pour les ordinateurs etc)

PARCOURS UTILISATEUR

Comment l’utilisateur va réagir face aux différentes fonctionnalités qui lui sont proposées, sur quel CTA (call to action) il va cliquer, quelles informations il souhaite connaître lors de son achat et en fonction de quels paramètres, il va faire son choix.

Conception de l’arborescence du site Charles Jourdan

 

A la suite de ces ateliers, nous pouvons définir toutes les fonctionnalités que comportera le site. La prochaine étape consiste ensuite à les réunir dans ce que l’on appelle l’arborescence du site. Sous la forme d’un schéma, celui-ci organise les pages du site en rubriques et définit les différents niveaux de navigation. Cela nous permet d’avoir une vision globale du site web et des parcours de navigation.

Simuler le fonctionnement du site Charles Jourdan grâce aux wireframes

 

Pour concevoir les différentes interfaces du site Charles Jourdan nous procédons au maquettage wireframe. Sous la forme d’une maquette, nous schématisons les parties et les composants de chaque page du site. Cette étape est primordiale, pour rendre le site le plus ergonomique possible. Ces wireframes sont ensuite soumis au client en vue d’éventuelles modifications.

Wireframes du site Charles Jourdan

Optimisation multi-supports

Le site étant consultable sur plusieurs supports, il a fallu lors de la création des interfaces penser aux différentes façons d’utiliser ces derniers et comment optimiser au mieux la plateforme Charles Jourdan pour qu’elle puisse être consultée de façon similaire sur tous ces supports.

02

Direction Artistique

L'ESTHÉTIQUE CHARLES JOURDAN

Elaboration du design graphique de la plateforme en accord avec la charte graphique de la marque.

Moodboard pour la direction artistique de Charles Jourdan

Conception des planches de recherche graphique

Chacune d’entre elles suit sa propre conception esthétique à travers différents éléments graphiques (photographies, dessins, etc.). Cette étape s’effectue, en gardant toujours à l’esprit, la charte graphique de la marque Charles Jourdan. Par la suite, nous avons soumis ces différents travaux au client, pour lui permettre de déterminer celui qui correspond le mieux à son site.

Mise en valeur des produits

Une question est revenue régulièrement lors de l’élaboration des interfaces : comment sublimer les produits vendus par la marque ? À l’aide des photographies fournis par Charles Jourdan, nous avons pu illustrer chaque page du site. Notre choix s’est porté vers des images recouvrant tout l’écran, magnifiant par conséquent les collections de la marque.

Visuel utilisé par Charles jourdan représentant une femme avec des paires de chaussures
iPhones avec des écrans Charles Jourdan

Élaboration des concepts graphiques

De tous les éléments graphiques pouvant influencer la navigation du client et son émotion ressentie : quelle typographie utiliser, quelle couleur est susceptible de favoriser l’achat ou tout simplement de mettre en valeur un produit, comment agencer au mieux les différents blocs de textes et d’images afin de rendre leur lisibilité attrayante.

03

UI Design

OU COMMENT ALLIER L'UTILE À L'AGRÉABLE

Création des maquettes visuelles et du prototype de la plateforme en respectant les éléments définis préalablement et en accord avec la charte graphique de Charles Jourdan.

Image de plusieurs maquettes de site web

Création d’une interface élégante

Un mot d’ordre fut défini dès la création du design : le dynamisme. A la différence de beaucoup de sites e-commerce déjà existants aux contenus statiques, chaque interaction de l’utilisateur sur la plateforme Charles Jourdan s’accompagne d’une mise en mouvement des informations.

Définition des interactions visuelles

Nous avons pensé chaque interaction du client sur la plateforme, de la couleur des CTA (call to action) lorsque l’utilisateur passe sa souris dessus en passant par la vitesse d’apparition des illustrations, jusqu’à l’orientation du regard de l’utilisateur en fonction de ces apparitions.

Charles Jourdan UI
Image

Aperçu et prototypage de la plateforme

Cette dernière phase avant la livraison des fichiers sources permet à Charles Jourdan d’avoir un aperçu du design final de la plateforme. Grâce au prototype, il peut aussi interagir sur la future plateforme, comme si le site était déjà développé. Cet aperçu, lui permet d’émettre ses critiques, et le cas échéant, de nous transmettre les éventuelles modifications qu’il souhaite apporter au design.

03

Résultat

L'ABOUTISSEMENT D'UN TRAVAIL COLLABORATIF

Lorsque le design du site est terminé et que les retours ont été traités, nous livrons au client les fichiers sources afin qu’il puisse les transmettre à ses développeurs.

Visuel utilisé par Charles jourdan représentant une femme près d'une piscine

Liaison avec les équipes de développement

Le design du site validé, notre travail, pour autant, ne s’arrête pas là. En effet, la transmission des fichiers sources aux développeurs nécessite souvent une rencontre avec ces derniers, afin de leur transmettre toutes les précisions nécessaires, quant à la bonne réalisation de la future plateforme.

Documentation et styleguides

Outre les maquettes, nous livrons également au client, le Styleguide. Ce document rassemble tous les éléments spécifiques au design et aux différentes interactions. Il informe les développeurs sur les couleurs à respecter, les formes, la typographie de chaque texte, les titres et bien d’autres informations primordiales pour le bon développement du site.

Conclusion

Le design validé, la marque Charles Jourdan peut désormais s’atteler à son développement. Cette étape peut s’étaler sur plusieurs mois en fonction de la complexité du design et de l’ampleur des contenus. A ce jour, le site e-commerce Charles Jourdan est encore en phase de développement, sa mise en ligne est prévue pour septembre 2018.

Les projets

24 Sèvres
24 Sèvres
Découvrir >
Alain Afflelou
Alain Afflelou
Découvrir >
Menu

VOIR TOUS LES PROJETS

logo