WEB DESIGN
ROUJE

UX/UI sur mobile & desktop

Projet 1 : recherche de pistes graphiques pour le lookbook de la rentrée

Réaliser le contenu mobile et desktop du lookbook du premier drop de la collection A/H 2020-2021 à partir de sept photos. Le contexte du shooting : « Eléonore rentre à Paris avec son amour de vacances, ils flânent dans les rues de Paris et dans son appartement. Cliché romantique du Paris des amoureux ». 

Benchmark

Recherche et analyse des lookbooks de la rentrée A/H des marques concurrentes (Sézanne, Ines de la Fressange, Balzac  Paris, Girls in Paris). Zoning des pages web correspondantes et étude qualitative des caractéristiques relevées. Quatre maquettes différentes : une disposition «pratique» des éléments pour Sézanne, «multiple» pour Ines de la Fressange, «élégante» pour Balzac Paris et «moderne» pour Girls in Paris.
 
Rouje est une marque vintage et poétique. Son storytelling repose sur des valeurs existentielles où la notion de plaisir est primordiale : aimer, flâner, rêver une vie d’ennuie et de douceur rappelant les écrits de vie parisienne de Françoise Sagan. Paris tient une place importante dans la communication de la marque, tout comme l’esthétique des films et de la mode des années 70. L’UI du lookbook de la rentrée devra donc suivre ces codes.
 

Etat de l’art de l’UX

Comparaison de l’UX des lookbooks concurrents pour mettre en avant les relations entre ces différentes structures.

Moodboard

Contexte du shooting :
«Eléonore rentre à Paris avec son amour de vacances, ils flânent dans les rues de la capitale et dans son appartement. Cliché romantique du Paris des amoureux.» 

Lookbook

Trois pistes DA ont été retenues pour  le nouveau lookbook de Rouje : le journal de bord, le magazine et la présentation réseaux sociaux.

 

A droite, la présentation sous forme d’un journal de bord

Les photos sont superposées aux motifs des vêtements afin de mettre en avant les détails des tenues. La composition donne une impression d’aléatoire, des trombones détourés sur les photos apportent encore plus de naturel. La présence d’illustrations sous forme de croquis est spécifique au journal de bord.

 

Avec les titres « jour et heure » des différents paragraphes en fonte manuscrite, ce lookbook se lit telle une histoire : une journée avec Eléonore et ses tenues Rouje. Ce système narratif ancre la marque dans le quotidien des clientes de la marque. Le storytelling :  « les vêtements Rouje vous suivent au quotidien, à toute heure de la journée. Rouje fait partie de vous ». La marque aborde ainsi un lien de proximité fort avec sa clientèle.

 

Voir les maquettes UI des deux autres lookbooks de la rentrée : 

Avant

Après

UX révisé

Une structure à cinq colonnes : quatre pour les visuels et une à droite pour le texte du set produits. L’image de la présentation du set sur laquelle on clique pour accéder à la page n’a pas été gardée afin d’éviter la répétition et d’optimiser l’espace. Un carroussel manuel pour chaque produit permet également d’améliorer la structure du set et de montrer plus de photos-produits aux clientes.

Chaque produit sélectionné apparaît ensuite sous format vignette au-dessus du bouton d’achat. La cliente peut ainsi visualiser la totalité de son set avant de l’acheter. 

Projet 3 : définition d'un nouveau template

Template e-commerce

Proposition d’un template pour permettre la vente d’un total look Rouje avec des produits cosmétiques et des produits prêt-à-porter .

Une structure à deux colonnes : celle de gauche pour le visuel présentant tous les produits (ici un mannequin en photo plein-pied) et celle de droite pour les produits composant le style Rouje.
Des pictogrammes «+» sur le visuel de gauche permettent d’ouvrir en pop-up la fiche de présentation complète de chaque produit (visuel de droite). La petite croix en haut à droite permet de revenir au template de départ.

Outils utilisés : Figma et Photoshop.