La Salle de Bain par Design
Liens utiles
Voir le site en direct
Une plateforme de commerce électronique et un tableau de bord client conçus pour unifier l'ensemble d'une entreprise
Aperçu du projet
Aperçu du projet
Bathroom by Design vend des produits complexes et réfléchis : des salles de bains sur mesure, un service de conception, des showrooms, des partenariats professionnels et un configurateur en réalité virtuelle. Nous avons d'abord repensé leur site de commerce électronique, puis créé un tableau de bord client qui accompagne chaque projet, du devis à l'installation.
Les deux produits partagent le même système de conception, de sorte que les achats et la gestion d'un projet donnent l'impression d'utiliser une seule et même plateforme, et non deux outils distincts assemblés.
Le projet s'est déroulé de bout en bout : stratégie, UX, UI, logique de commerce électronique, contenu assisté par IA et transfert de développement, à la fois sur le site web et sur le tableau de bord.
Défis et objectifs
Défis et objectifs
L'ancien site web ne parvenait pas à maintenir la cohésion de l'activité. Un vaste catalogue technique, un service de conception, des showrooms, des partenariats commerciaux et un outil de réalité virtuelle devaient tous coexister au sein d'une seule et même expérience cohérente, ce qui n'était pas le cas.
Une fois le site remis en état, un second problème est apparu. Un projet de salle de bains s'étend sur plusieurs mois après le passage en caisse, à travers des devis, des commandes, des livraisons, des concepteurs et des installateurs, et tout cela se gérait encore par des échanges d'e-mails et des appels téléphoniques.
Ces deux problèmes nécessitaient le même type de solution : transformer un processus dispersé impliquant de nombreuses personnes en un produit unique, structuré et bien conçu, sans pour autant ralentir les aspects qui fonctionnaient déjà.
La Salle de Bain par Design
Liens utiles
Voir le site en direct
Une plateforme de commerce électronique et un tableau de bord client conçus pour unifier l'ensemble d'une entreprise
Aperçu du projet
Bathroom by Design vend des produits complexes et réfléchis : des salles de bains sur mesure, un service de conception, des showrooms, des partenariats professionnels et un configurateur en réalité virtuelle. Nous avons d'abord repensé leur site de commerce électronique, puis créé un tableau de bord client qui accompagne chaque projet, du devis à l'installation.
Les deux produits partagent le même système de conception, de sorte que les achats et la gestion d'un projet donnent l'impression d'utiliser une seule et même plateforme, et non deux outils distincts assemblés.
Le projet s'est déroulé de bout en bout : stratégie, UX, UI, logique de commerce électronique, contenu assisté par IA et transfert de développement, à la fois sur le site web et sur le tableau de bord.
Défis et objectifs
L'ancien site web ne parvenait pas à maintenir la cohésion de l'activité. Un vaste catalogue technique, un service de conception, des showrooms, des partenariats commerciaux et un outil de réalité virtuelle devaient tous coexister au sein d'une seule et même expérience cohérente, ce qui n'était pas le cas.
Une fois le site remis en état, un second problème est apparu. Un projet de salle de bains s'étend sur plusieurs mois après le passage en caisse, à travers des devis, des commandes, des livraisons, des concepteurs et des installateurs, et tout cela se gérait encore par des échanges d'e-mails et des appels téléphoniques.
Ces deux problèmes nécessitaient le même type de solution : transformer un processus dispersé impliquant de nombreuses personnes en un produit unique, structuré et bien conçu, sans pour autant ralentir les aspects qui fonctionnaient déjà.
Industrie
Aménagement intérieur et commerce de détail
Services
Design UX/UI
Développement Web
E-commerce
Chronologie
12 semaines
Industrie
Aménagement intérieur et commerce de détail
Services
Design UX/UI
Développement Web
E-commerce
Chronologie
12 semaines
Palette de couleurs
Palette de couleurs
La palette de l'interface utilisateur s'inspire des showrooms : pierre chaude, blanc épuré, anthracite profond et une touche de bleu canard, choisis autant pour le contraste dans un catalogue de produits dense que pour l'ambiance.
Palette de couleurs
La palette de l'interface utilisateur s'inspire des showrooms : pierre chaude, blanc épuré, anthracite profond et une touche de bleu canard, choisis autant pour le contraste dans un catalogue de produits dense que pour l'ambiance.
Notre approche
Notre approche
Nous avons dirigé les deux projets de la stratégie jusqu'aux fichiers prêts pour le développement, en travaillant main dans la main avec les développeurs et les designers internes de Bathroom by Design tout au long du processus. Tout a commencé par des maquettes fonctionnelles, validées avec l'équipe, avant de passer à la conception finale pour ordinateur et mobile. Les deux produits ont été conçus sur le même système de design, permettant ainsi à l'ensemble de la plateforme de se développer de manière cohérente au fil du temps.
Notre approche
Nous avons dirigé les deux projets de la stratégie jusqu'aux fichiers prêts pour le développement, en travaillant main dans la main avec les développeurs et les designers internes de Bathroom by Design tout au long du processus. Tout a commencé par des maquettes fonctionnelles, validées avec l'équipe, avant de passer à la conception finale pour ordinateur et mobile. Les deux produits ont été conçus sur le même système de design, permettant ainsi à l'ensemble de la plateforme de se développer de manière cohérente au fil du temps.
UX
UX
Nous avons étudié trois groupes de visiteurs très différents (les clients particuliers parcourant le catalogue, les clients découvrant le service de conception et les partenaires professionnels) et avons conçu une structure où tous trois peuvent faire leurs achats côte à côte sans se gêner. Les pages de liste, le filtrage et une gamme de modèles de pages produits (produits simples, sélecteurs de couleurs et de finitions, articles entièrement configurables, carrelages) ont tous été conçus en fonction de la manière dont les gens choisissent réellement une salle de bains : comparer, configurer, puis s'engager.
Stratégie UI
Stratégie UI
L'interface remplit deux rôles : showroom et boutique. Le portfolio, le parcours de design et les pages de showroom respirent comme un magazine de décoration d'intérieur, tandis que les modèles de listes et de produits restent denses, fonctionnels et faciles à comparer. Chaque écran s'appuie sur les mêmes blocs de construction partagés (cartes, sélecteurs, navigation, formulaires), de sorte que les nouvelles pages restent cohérentes au fur et à mesure que l'activité se développe.
Stratégie e-commerce
Stratégie e-commerce
Les salles de bains sont considérées comme des achats réfléchis, c'est pourquoi nous avons articulé l'expérience d'achat autour de la confiance plutôt que de l'impulsion : des pages produits dotées de la précision technique dont les acheteurs ont besoin, des configurateurs qui simplifient les options complexes (couleurs, finitions, dimensions), et un service de conception intégré tout au long du parcours, de la page d'accueil à l'application de réalité virtuelle. C'est l'élément de différenciation qu'aucun distributeur purement en ligne ne peut égaler.
Partie 1 — Site e-commerce
Partie 1 — Site e-commerce
UX
Nous avons étudié trois groupes de visiteurs très différents (les clients particuliers parcourant le catalogue, les clients découvrant le service de conception et les partenaires professionnels) et avons conçu une structure où tous trois peuvent faire leurs achats côte à côte sans se gêner. Les pages de liste, le filtrage et une gamme de modèles de pages produits (produits simples, sélecteurs de couleurs et de finitions, articles entièrement configurables, carrelages) ont tous été conçus en fonction de la manière dont les gens choisissent réellement une salle de bains : comparer, configurer, puis s'engager.
Stratégie UI
L'interface remplit deux rôles : showroom et boutique. Le portfolio, le parcours de design et les pages de showroom respirent comme un magazine de décoration d'intérieur, tandis que les modèles de listes et de produits restent denses, fonctionnels et faciles à comparer. Chaque écran s'appuie sur les mêmes blocs de construction partagés (cartes, sélecteurs, navigation, formulaires), de sorte que les nouvelles pages restent cohérentes au fur et à mesure que l'activité se développe.
Stratégie e-commerce
Les salles de bains sont considérées comme des achats réfléchis, c'est pourquoi nous avons articulé l'expérience d'achat autour de la confiance plutôt que de l'impulsion : des pages produits dotées de la précision technique dont les acheteurs ont besoin, des configurateurs qui simplifient les options complexes (couleurs, finitions, dimensions), et un service de conception intégré tout au long du parcours, de la page d'accueil à l'application de réalité virtuelle. C'est l'élément de différenciation qu'aucun distributeur purement en ligne ne peut égaler.
Partie 1 — Site e-commerce
Page d'accueil
Page d'accueil
Une page d'accueil axée sur l'éditorial qui fusionne l'inspiration, les produits et les services de design en une seule expérience guidée.
Page d'accueil
Une page d'accueil axée sur l'éditorial qui fusionne l'inspiration, les produits et les services de design en une seule expérience guidée.
Création de contenu par IA
Création de contenu par IA
Avec un catalogue de cette taille, le contenu est le goulet d'étranglement. Nous avons intégré l'IA dans le flux de production, générant, éditant et vérifiant la qualité des descriptions de produits et des textes de catégories à grande échelle. Cela a permis de maintenir un ton cohérent pour des milliers de produits, tandis que l'équipe s'est concentrée sur le contenu qui nécessite réellement une intervention humaine.
Responsive
Responsive
Chaque modèle a été conçu pour les ordinateurs et les mobiles sur un pied d'égalité, et non comme des mises en page d'ordinateur réduites. La navigation, le filtrage et la configuration des produits ont été résolus de manière délibérée pour chaque taille d'écran, de sorte que la navigation sur un téléphone dans une salle d'exposition fonctionne tout aussi bien que la sélection depuis un ordinateur à la maison.
Wireframes et transfert de développement
Wireframes et transfert de développement
La structure a été validée lors des maquettes fonctionnelles (wireframes) avant tout design visuel, ce qui a permis de limiter le coût des révisions et de clarifier les décisions. Pour la phase d'intégration, nous avons transmis tout ce dont leurs développeurs avaient besoin : écrans annotés, bibliothèque partagée de composants de design, comportement adaptatif (responsive) et chaque état d'interaction, afin de ne laisser aucune place au hasard.
Création de contenu par IA
Avec un catalogue de cette taille, le contenu est le goulet d'étranglement. Nous avons intégré l'IA dans le flux de production, générant, éditant et vérifiant la qualité des descriptions de produits et des textes de catégories à grande échelle. Cela a permis de maintenir un ton cohérent pour des milliers de produits, tandis que l'équipe s'est concentrée sur le contenu qui nécessite réellement une intervention humaine.
Responsive
Chaque modèle a été conçu pour les ordinateurs et les mobiles sur un pied d'égalité, et non comme des mises en page d'ordinateur réduites. La navigation, le filtrage et la configuration des produits ont été résolus de manière délibérée pour chaque taille d'écran, de sorte que la navigation sur un téléphone dans une salle d'exposition fonctionne tout aussi bien que la sélection depuis un ordinateur à la maison.
Wireframes et transfert de développement
La structure a été validée lors des maquettes fonctionnelles (wireframes) avant tout design visuel, ce qui a permis de limiter le coût des révisions et de clarifier les décisions. Pour la phase d'intégration, nous avons transmis tout ce dont leurs développeurs avaient besoin : écrans annotés, bibliothèque partagée de composants de design, comportement adaptatif (responsive) et chaque état d'interaction, afin de ne laisser aucune place au hasard.
Portfolio
Portfolio
Une galerie sélectionnée présentant des projets de salles de bains terminés, pour aider les clients à explorer les styles, les configurations et à trouver de l'inspiration en conditions réelles.
Détails du portefeuille
Détails du portefeuille
Une page de projet immersive mettant en valeur les matériaux, les produits et les décisions de conception derrière chaque salle de bain complétée.
Portfolio
Une galerie sélectionnée présentant des projets de salles de bains terminés, pour aider les clients à explorer les styles, les configurations et à trouver de l'inspiration en conditions réelles.
Détails du portefeuille
Une page de projet immersive mettant en valeur les matériaux, les produits et les décisions de conception derrière chaque salle de bain complétée.
Parcours de Design
Parcours de Design
Une expérience étape par étape qui explique l'ensemble du processus de rénovation, de l'inspiration et la consultation jusqu'à l'installation et la finalisation.
Parcours de Design
Une expérience étape par étape qui explique l'ensemble du processus de rénovation, de l'inspiration et la consultation jusqu'à l'installation et la finalisation.
Partie 2 — Tableau de bord client
Partie 2 — Tableau de bord client
UX
UX
Le tableau de bord est organisé autour du projet, et non de la transaction. Les clients gèrent leurs projets, créent et affinent des planches de tendance, examinent les devis, suivent les commandes, envoient des messages à l'équipe, gèrent les paiements et trouvent des professionnels (designers, architectes, installateurs), le tout au même endroit. Chaque flux a été conçu pour réduire les allers-retours : ce qui était auparavant une chaîne d'e-mails devient un statut, un message ou une approbation.
Stratégie UI
Stratégie UI
Nous avons gardé l'interface sobre et fonctionnelle : une barre latérale claire, des tableaux et des cartes cohérents, afin que les clients sachent toujours exactement où ils en sont dans leur projet. Les moodboards et le pôle d'inspiration apportent le côté visuel et consultable de la marque dans l'outil, équilibrant le côté pratique de la gestion de projet avec la partie que les gens apprécient vraiment, à savoir la conception de leur salle de bains.
Contenu & inspiration
Au-delà de la gestion de projet, nous avons conçu un espace d'inspiration et des outils de création de planches de tendances connectés directement au catalogue. Les clients rassemblent des produits et des styles, les partagent avec leur designer, et passent de l'inspiration au devis sans jamais quitter la plateforme. Le contenu cesse d'être du marketing pour s'intégrer directement au flux de travail.
Partie 2 — Tableau de bord client
UX
Le tableau de bord est organisé autour du projet, et non de la transaction. Les clients gèrent leurs projets, créent et affinent des planches de tendance, examinent les devis, suivent les commandes, envoient des messages à l'équipe, gèrent les paiements et trouvent des professionnels (designers, architectes, installateurs), le tout au même endroit. Chaque flux a été conçu pour réduire les allers-retours : ce qui était auparavant une chaîne d'e-mails devient un statut, un message ou une approbation.
Stratégie UI
Nous avons gardé l'interface sobre et fonctionnelle : une barre latérale claire, des tableaux et des cartes cohérents, afin que les clients sachent toujours exactement où ils en sont dans leur projet. Les moodboards et le pôle d'inspiration apportent le côté visuel et consultable de la marque dans l'outil, équilibrant le côté pratique de la gestion de projet avec la partie que les gens apprécient vraiment, à savoir la conception de leur salle de bains.
Contenu & inspiration
Au-delà de la gestion de projet, nous avons conçu un espace d'inspiration et des outils de création de planches de tendances connectés directement au catalogue. Les clients rassemblent des produits et des styles, les partagent avec leur designer, et passent de l'inspiration au devis sans jamais quitter la plateforme. Le contenu cesse d'être du marketing pour s'intégrer directement au flux de travail.
Responsive
Responsive
Chaque écran du tableau de bord, projets, moodboards, devis, commandes, messages, paiements, profil, a été conçu pour les ordinateurs et les mobiles, avec un modèle de navigation mobile dédié. Les clients peuvent consulter le statut d'une commande depuis leur téléphone aussi facilement qu'ils examinent un devis à leur bureau.
Wireframes et transfert de développement
Wireframes et transfert de développement
Compte tenu du nombre de flux et d'états, les maquettes filaires (wireframes) ont fait le plus gros du travail : chaque écran et interaction a été validé avant toute conception visuelle. La livraison comprenait la bibliothèque de composants partagés, les spécifications adaptatives (responsive) et chaque cas limite (écrans vides, états de chargement, erreurs), afin que l'équipe de développement puisse concevoir le portail sans aucune approximation.
Responsive
Chaque écran du tableau de bord, projets, moodboards, devis, commandes, messages, paiements, profil, a été conçu pour les ordinateurs et les mobiles, avec un modèle de navigation mobile dédié. Les clients peuvent consulter le statut d'une commande depuis leur téléphone aussi facilement qu'ils examinent un devis à leur bureau.
Wireframes et transfert de développement
Compte tenu du nombre de flux et d'états, les maquettes filaires (wireframes) ont fait le plus gros du travail : chaque écran et interaction a été validé avant toute conception visuelle. La livraison comprenait la bibliothèque de composants partagés, les spécifications adaptatives (responsive) et chaque cas limite (écrans vides, états de chargement, erreurs), afin que l'équipe de développement puisse concevoir le portail sans aucune approximation.
Tableaux de bord clients
Tableaux de bord clients
Un tableau de bord centralisé où les clients gèrent leurs projets, devis, commandes, paiements, messages, planches de tendances, inspirations et services tout au long de leur parcours de rénovation.
Tableaux de bord clients
Un tableau de bord centralisé où les clients gèrent leurs projets, devis, commandes, paiements, messages, planches de tendances, inspirations et services tout au long de leur parcours de rénovation.
Livrables
Livrables
Refonte complète du site e-commerce, de la stratégie aux fichiers prêts pour le développement
Un système de conception partagé utilisé sur l'ensemble du site web et du tableau de bord client
Une gamme de pages produits couvrant les produits simples, configurables et sous forme de tuiles
Un flux de travail de contenu assisté par IA pour la rédaction de descriptions de produits et de catégories à grande échelle
Un tableau de bord client couvrant les projets, les planches de tendance, les devis, les commandes, la messagerie et les paiements
Un transfert complet aux développeurs pour les deux produits : écrans annotés, bibliothèque de composants documentée et états d'interaction
Résultat
Résultat
Le nouveau site a été mis en ligne en février 2026 sur un catalogue de 2 567 produits ; le tableau de bord suivra en octobre 2026. Les deux produits partagent désormais la même identité visuelle, de sorte qu'un client passant de la consultation du catalogue à la gestion d'un projet actif n'a jamais l'impression de quitter l'univers de la marque. Ce qui était auparavant dispersé entre les e-mails, les appels téléphoniques, les devis, les validations et le suivi des commandes, réside désormais au sein d'un tableau de bord unique et structuré.
Le projet a également permis à Bathroom by Design de bénéficier d'un flux de travail qu'ils peuvent continuer à utiliser : d'abord les maquettes fonctionnelles (wireframes), toujours des composants partagés, et l'IA pour gérer le contenu à l'échelle qu'un tel catalogue exige.
Livrables
Refonte complète du site e-commerce, de la stratégie aux fichiers prêts pour le développement
Un système de conception partagé utilisé sur l'ensemble du site web et du tableau de bord client
Une gamme de pages produits couvrant les produits simples, configurables et sous forme de tuiles
Un flux de travail de contenu assisté par IA pour la rédaction de descriptions de produits et de catégories à grande échelle
Un tableau de bord client couvrant les projets, les planches de tendance, les devis, les commandes, la messagerie et les paiements
Un transfert complet aux développeurs pour les deux produits : écrans annotés, bibliothèque de composants documentée et états d'interaction
Résultat
Le nouveau site a été mis en ligne en février 2026 sur un catalogue de 2 567 produits ; le tableau de bord suivra en octobre 2026. Les deux produits partagent désormais la même identité visuelle, de sorte qu'un client passant de la consultation du catalogue à la gestion d'un projet actif n'a jamais l'impression de quitter l'univers de la marque. Ce qui était auparavant dispersé entre les e-mails, les appels téléphoniques, les devis, les validations et le suivi des commandes, réside désormais au sein d'un tableau de bord unique et structuré.
Le projet a également permis à Bathroom by Design de bénéficier d'un flux de travail qu'ils peuvent continuer à utiliser : d'abord les maquettes fonctionnelles (wireframes), toujours des composants partagés, et l'IA pour gérer le contenu à l'échelle qu'un tel catalogue exige.