Ruelle-Dommange
Refonte de l'expérience digitale d'une maison de champagne familiale
Contexte
(01)Le site devait répondre aux questions des clients. Il en faisait naître de nouvelles.
Ruelle-Dommange est une maison de champagne familiale, de père en fils. Quand elle m'a contacté, son site produisait l'effet inverse de celui attendu : au lieu de renseigner, il suscitait des questions. L'équipe passait un temps important à répondre par e-mail, à réexpliquer certaines informations et à corriger des incompréhensions, des échanges qu'un site clair aurait dû absorber seul.
Le constat dépassait l'esthétique. Le site était peu intuitif et brouillon dans sa présentation, il valorisait mal la gamme, il ne reflétait pas la personnalité de la maison, et le client le trouvait difficile à modifier et à exploiter. Chaque friction côté visiteur devenait du temps de travail côté équipe.
L'enjeu
(02)Comment transformer un site qui nécessite des explications en un véritable outil de communication pour la marque ?
Comprendre en quelques secondes
Ce que propose la maison, ce que l'on peut commander et comment, sans avoir à écrire pour le savoir.
Ressembler à la maison
Faire ressentir un savoir-faire familial et un esprit de partage, plutôt que d'aligner un catalogue neutre.
Moins de clics, moins d'échanges
Raccourcir le chemin vers l'information, et donner au client un site plus simple à modifier et à exploiter.
La démarche
(03)Chaque décision part d'une friction observée et finit dans un choix d'interface.
- Observer le problème
- Comprendre les besoins
- Repenser l'architecture
- Simplifier l'expérience
- Définir la communication
- La traduire en interface
-
L'ancien menu multipliait les sous-pages : une par produit, une par occasion d'étiquette. J'ai regroupé ces contenus. Les produits se parcourent depuis un seul catalogue, trié par filtres de format, et les étiquettes tiennent sur une page qui explique le principe. Le panier et les favoris restent accessibles depuis toutes les pages.
-
Une entrée À propos dans le menu, là où la présentation de la maison se limitait à un bloc de l'accueil. Une page Création d'étiquette qui détaille le fonctionnement en quatre étapes : choisir l'événement, imaginer le design, valider la création, recevoir les bouteilles. Ces informations n'ont plus besoin d'un e-mail pour être comprises.
-
Une foire aux questions, sur l'accueil et sur la page contact, traite les points qui appellent le plus d'explications : où sont élaborés les champagnes, les créations originales, la commande pour un événement, la personnalisation des bouteilles. Le formulaire de contact reste disponible, mais il n'est plus la première réponse.
-
Une fiche produit et une fiche événement répondent chacune à un petit nombre de questions, toujours dans le même ordre : quoi, combien, où, quand. Le détail de ces deux parcours est présenté plus bas.
-
Le logo existait déjà : je ne l'ai pas redessiné. J'ai construit autour de lui l'univers digital de la maison : palette, hiérarchie typographique, traitement des images.
-
J'ai défini la manière dont Ruelle-Dommange se présente et s'adresse à ses clients, puis rédigé et structuré les contenus nécessaires à l'expérience : accroches, explications, descriptions, questions fréquentes.
Les maquettes
(04)Sept pages à parcourir comme un visiteur.
Fais défiler chaque page, puis glisse sur le côté pour passer à la suivante →
Maquettes de travail : contenus, prix, titres et dates provisoires, à remplacer par les contenus réels.
L'expérience produit
(05)Aider le visiteur à comprendre, comparer et choisir, sans écrire à personne.
La gamme avant tout le reste
Sous le premier écran, trois valeurs de la maison, puis directement les bouteilles, avec leur nom et leur prix. Les créations originales, les Bulles de Vanille, ont leur propre mise en avant.
Une page pour toute la gamme
Des filtres par format (bouteille 75 cl, coffret, demi-bouteille, magnum, ratafia, merchandising) et un tri remplacent la multiplication des sous-pages. Nom et prix visibles sans cliquer, un cœur pour garder un produit de côté. Un bandeau en haut de page est réservé aux informations importantes.
Tout ce qui aide à choisir
Catégorie et contenance en pastilles, prix, description rédigée avec cépage, arômes et accords, puis quantité et ajout au panier. En dessous, le processus d'élaboration en quatre étapes et une sélection d'autres bouteilles.
Un panier qui rassure
Le panier récapitule articles, quantités, sous-total, TVA et frais de livraison avant le paiement. Un rappel indique comment joindre la maison en cas de doute, au moment précis où la question peut se poser.
L'expérience événementielle
(06)Savoir en un coup d'œil où rencontrer Ruelle-Dommange, et pourquoi y passer.
Les dégustations et les salons sont l'occasion de rencontrer la maison. Chaque événement répond donc, sans effort, aux quatre questions d'un visiteur : de quoi s'agit-il, où, quand, et pourquoi y aller.
Sur l'accueil, les prochains rendez-vous s'affichent en cartes (photo, titre, lieu, date, heure). La page Événements prend le relais : une liste chronologique où la date se lit en premier, suivie du titre, de l'adresse, d'un court texte et d'un bouton « Voir l'événement ».
La direction artistique
(07)Un univers construit pour que le site ressemble à la maison, pas seulement pour qu'il soit plus beau.
Le logo de Ruelle-Dommange existait avant ce projet. Je l'ai pris comme point de départ, sans le modifier, et j'ai défini autour de lui les codes du site : une palette sobre, une hiérarchie typographique lisible et un traitement des images qui parle de vignes, de terroir et de moments partagés.
Les couleurs, les images et les mots poursuivent le même objectif : que le visiteur reconnaisse une maison familiale, accessible et exigeante, avant même d'avoir lu une ligne. L'esthétique est un moyen, pas la finalité.
Sections sombres, vignettes produit, boutons principaux : la couleur du sérieux et du terroir.
Fond des pages. Un blanc chaud, plus proche du papier que de l'écran.
Accents : bouton Contactez-nous, pastilles, bandeau des valeurs.
Un caractère à empattements pour les titres, dont les mots importants passent en italique (« Découvrez nos bouteilles », « Venez à nos futurs événements »), associé à une sans-serif ronde et légère pour les textes et les informations pratiques. Trois niveaux suffisent à lire une page d'un coup d'œil.
Photographies chaudes de vignes et de dégustations, avec le titre posé directement sur l'image. Les bouteilles, elles, sont isolées sur un fond vert profond pour rester lisibles et comparables d'une fiche à l'autre.
Direct et chaleureux, au vouvoiement, en phrases courtes. Le site annonce ce que la maison est (« L'authenticité du champagne, de génération en génération »), puis explique simplement ce qu'il faut faire (« Comment s'y prendre ? », « Besoin d'infos ? Contactez-nous »).
Les sections sombres, comme le processus d'élaboration et les questions fréquentes, alternent avec les fonds clairs. Elles marquent les pauses et mettent en avant ce que le visiteur doit retenir.
Le résultat
(08)La nouvelle expérience a été conçue et validée avec Ruelle-Dommange.
Le site étant encore en phase de conception et de développement, les résultats quantitatifs seront mesurés après sa mise en ligne. Je préfère l'écrire ainsi plutôt que d'avancer des chiffres qui n'existent pas encore.
Le retour de Ruelle-Dommange sur la nouvelle direction et sur le résultat du projet est très positif. Les maquettes présentées sur cette page sont des versions de travail : elles seront remplacées par les écrans finalisés à mesure que le projet avance.
Conclusion
(09)Il ne s'agissait pas de refaire un site, mais d'en faire un outil : qui communique mieux, représente mieux la marque, présente mieux les produits, guide les visiteurs et réduit les frictions entre Ruelle-Dommange et ses clients.
→ Projet suivant : ResolarUn site à repenser
pour ton activité ?
Décris-moi ton projet : on regarde ensemble ce dont tu as vraiment besoin.
Prendre contact