Bathroom by Design
Important Links
View Live Website
An e-commerce platform and a customer dashboard built to hold a whole business together
Project Overview
Project Overview
Bathroom by Design sells complex, considered products: fitted bathrooms, a design service, showrooms, trade partnerships, and a VR configurator. We redesigned their e-commerce website first, then built a customer dashboard that carries every project from quote to installation.
Both products share the same design system, so shopping and managing a project feel like one platform, not two separate tools bolted together.
The project ran end to end: strategy, UX, UI, e-commerce logic, AI-assisted content, and development handoff, across both the website and the dashboard.
Challenges & Objectives
Challenges & Objectives
The old website couldn't hold the business together. A large technical catalogue, a design service, showrooms, trade partnerships, and a VR tool all needed to live inside one coherent experience, and they didn't.
Once the site was in better shape, a second problem showed up. A bathroom project runs for months after checkout, across quotes, orders, deliveries, designers, and installers, and all of that still lived in email threads and phone calls.
Both problems needed the same kind of fix: turn a scattered, many-person process into one structured, well-designed product, without slowing down the parts that already worked.
Bathroom by Design
Important Links
View Live Website
An e-commerce platform and a customer dashboard built to hold a whole business together
Project Overview
Bathroom by Design sells complex, considered products: fitted bathrooms, a design service, showrooms, trade partnerships, and a VR configurator. We redesigned their e-commerce website first, then built a customer dashboard that carries every project from quote to installation.
Both products share the same design system, so shopping and managing a project feel like one platform, not two separate tools bolted together.
The project ran end to end: strategy, UX, UI, e-commerce logic, AI-assisted content, and development handoff, across both the website and the dashboard.
Challanges & Objectives
The old website couldn't hold the business together. A large technical catalogue, a design service, showrooms, trade partnerships, and a VR tool all needed to live inside one coherent experience, and they didn't.
Once the site was in better shape, a second problem showed up. A bathroom project runs for months after checkout, across quotes, orders, deliveries, designers, and installers, and all of that still lived in email threads and phone calls.
Both problems needed the same kind of fix: turn a scattered, many-person process into one structured, well-designed product, without slowing down the parts that already worked.
Industry
Interiors & Retail
Services
UX/UI Design
Web Development
E-commerce
Timeline
12 weeks
Industry
Interiors & Retail
Services
UX/UI Design
Web Development
E-commerce
Timeline
12 weeks
Colour Palette
Colour Palette
The UI palette draws from the showrooms: warm stone, clean white, deep charcoal and a teal accent, chosen for contrast in a dense product catalogue as much as for mood.
Colour Palette
The UI palette draws from the showrooms: warm stone, clean white, deep charcoal and a teal accent, chosen for contrast in a dense product catalogue as much as for mood.
Our Approach
Our Approach
We led both projects from strategy to build-ready files, working hand in hand with Bathroom by Design's developers and internal designers throughout. Everything started in wireframes, got validated with the team, then moved into full design for desktop and mobile. Both products were built on the same design system, so the whole platform can grow consistently over time.
Our Approach
We led both projects from strategy to build-ready files, working hand in hand with Bathroom by Design's developers and internal designers throughout. Everything started in wireframes, got validated with the team, then moved into full design for desktop and mobile. Both products were built on the same design system, so the whole platform can grow consistently over time.
UX
UX
We looked at three very different groups of visitors, retail customers browsing the catalogue, clients exploring the design service, and trade partners, and designed a structure where all three can shop side by side without getting in each other's way. Listing pages, filtering, and a family of product page templates (simple products, colour and finish selectors, fully configurable items, tiles) were all designed around how people actually choose a bathroom: compare, configure, then commit.
UI Strategy
UI Strategy
The UI does two jobs: showroom and shop. Portfolio, Design Journey, and showroom pages breathe like an interiors magazine, while listing and product templates stay tight, functional, and easy to compare. Every screen draws from the same shared building blocks, cards, selectors, navigation, forms, so new pages stay consistent as the business grows.
E-commerce strategy
E-commerce strategy
Bathrooms are considered purchases, so we shaped the shopping experience around confidence rather than impulse: product pages with the technical depth buyers need, configurators that make complex options (colours, finishes, sizes) feel simple, and the design service woven through the entire journey, from the homepage to the VR app. That's the differentiator no purely online retailer can match.
Part 1 — E-commerce website
Part 1 — E-commerce website
UX
We looked at three very different groups of visitors, retail customers browsing the catalogue, clients exploring the design service, and trade partners, and designed a structure where all three can shop side by side without getting in each other's way. Listing pages, filtering, and a family of product page templates (simple products, colour and finish selectors, fully configurable items, tiles) were all designed around how people actually choose a bathroom: compare, configure, then commit.
UI Strategy
The UI does two jobs: showroom and shop. Portfolio, Design Journey, and showroom pages breathe like an interiors magazine, while listing and product templates stay tight, functional, and easy to compare. Every screen draws from the same shared building blocks, cards, selectors, navigation, forms, so new pages stay consistent as the business grows.
E-commerce strategy
Bathrooms are considered purchases, so we shaped the shopping experience around confidence rather than impulse: product pages with the technical depth buyers need, configurators that make complex options (colours, finishes, sizes) feel simple, and the design service woven through the entire journey, from the homepage to the VR app. That's the differentiator no purely online retailer can match.
Part 1 — E-commerce website
Homepage
Homepage
An editorial-first landing page that blends inspiration, products, and design services into a single, guided experience.
Homepage
An editorial-first landing page that blends inspiration, products, and design services into a single, guided experience.
AI content creation
AI content creation
With a catalogue this size, content is the bottleneck. We built AI into the production workflow, generating, editing, and quality-checking product descriptions and category copy at scale. That kept tone consistent across thousands of products, while the team focused on the content that genuinely needs a human hand.
Responsive
Responsive
Every template was designed for desktop and mobile as equal citizens, not desktop layouts squeezed down. Navigation, filtering, and product configuration were resolved deliberately at each screen size, so browsing on a phone in a showroom works just as well as specifying from a desktop at home.
Wireframes & dev handoff
Wireframes & dev handoff
Structure got agreed in wireframes before any visual design, which kept revisions cheap and decisions clear. For the build, we handed over everything their developers needed: annotated screens, a shared library of design components, responsive behaviour, and every interaction state, so there was nothing left to guess.
AI content creation
With a catalogue this size, content is the bottleneck. We built AI into the production workflow, generating, editing, and quality-checking product descriptions and category copy at scale. That kept tone consistent across thousands of products, while the team focused on the content that genuinely needs a human hand.
Responsive
Every template was designed for desktop and mobile as equal citizens, not desktop layouts squeezed down. Navigation, filtering, and product configuration were resolved deliberately at each screen size, so browsing on a phone in a showroom works just as well as specifying from a desktop at home.
Wireframes & dev handoff
Structure got agreed in wireframes before any visual design, which kept revisions cheap and decisions clear. For the build, we handed over everything their developers needed: annotated screens, a shared library of design components, responsive behaviour, and every interaction state, so there was nothing left to guess.
Portfolio
Portfolio
A curated gallery showcasing completed bathroom projects, helping customers explore styles, layouts, and real-world inspiration.
Portfolio Details
Portfolio Details
An immersive project page highlighting materials, products, and design decisions behind each completed bathroom.
Portfolio
A curated gallery showcasing completed bathroom projects, helping customers explore styles, layouts, and real-world inspiration.
Portfolio Details
An immersive project page highlighting materials, products, and design decisions behind each completed bathroom.
Design Journey
Design Journey
A step-by-step experience that explains the entire renovation process, from inspiration and consultation to installation and completion.
Design Journey
A step-by-step experience that explains the entire renovation process, from inspiration and consultation to installation and completion.
Part 2 — Customer dashboard
Part 2 — Customer dashboard
UX
UX
The dashboard is organised around the project, not the transaction. Clients manage their projects, build and refine moodboards, review quotes, track orders, message the team, handle payments, and find professionals (designers, architects, installers), all from one place. Each flow was designed to cut back-and-forth: what used to be an email chain becomes a status, a message, or an approval.
UI Strategy
UI Strategy
We kept the interface calm and functional: a clear sidebar, consistent tables and cards, so clients always know exactly where they stand in their project. Moodboards and the inspiration hub bring the visual, browsable side of the brand into the tool, balancing the practical side of managing a project with the part people actually enjoy, designing their bathroom.
Content & inspiration
Beyond project management, we designed an inspiration hub and moodboarding tools that connect directly to the catalogue. Clients collect products and looks, share them with their designer, and move from inspiration to quote without leaving the platform. Content stops being marketing and becomes part of the workflow.
Part 2 — Customer dashboard
UX
The dashboard is organised around the project, not the transaction. Clients manage their projects, build and refine moodboards, review quotes, track orders, message the team, handle payments, and find professionals (designers, architects, installers), all from one place. Each flow was designed to cut back-and-forth: what used to be an email chain becomes a status, a message, or an approval.
UI Strategy
We kept the interface calm and functional: a clear sidebar, consistent tables and cards, so clients always know exactly where they stand in their project. Moodboards and the inspiration hub bring the visual, browsable side of the brand into the tool, balancing the practical side of managing a project with the part people actually enjoy, designing their bathroom.
Content & inspiration
Beyond project management, we designed an inspiration hub and moodboarding tools that connect directly to the catalogue. Clients collect products and looks, share them with their designer, and move from inspiration to quote without leaving the platform. Content stops being marketing and becomes part of the workflow.
Responsive
Responsive
Every dashboard screen, projects, moodboards, quotes, orders, messages, payments, profile, was designed for desktop and mobile, with a dedicated mobile navigation pattern. Clients can check an order status from their phone as easily as they review a quote at their desk.
Wireframes & dev handoff
Wireframes & dev handoff
Given the number of flows and states, wireframes did the heavy lifting: every screen and interaction got agreed before any visual design. Handoff included the shared component library, responsive specs, and every edge case (empty screens, loading states, errors), so the development team could build the portal without guesswork.
Responsive
Every dashboard screen, projects, moodboards, quotes, orders, messages, payments, profile, was designed for desktop and mobile, with a dedicated mobile navigation pattern. Clients can check an order status from their phone as easily as they review a quote at their desk.
Wireframes & dev handoff
Given the number of flows and states, wireframes did the heavy lifting: every screen and interaction got agreed before any visual design. Handoff included the shared component library, responsive specs, and every edge case (empty screens, loading states, errors), so the development team could build the portal without guesswork.
Customer Dashboards
Customer Dashboards
A centralised dashboard where customers manage projects, quotes, orders, payments, messages, moodboards, inspiration, and services throughout their entire renovation journey.
Customer Dashboards
A centralised dashboard where customers manage projects, quotes, orders, payments, messages, moodboards, inspiration, and services throughout their entire renovation journey.
Deliverables
Deliverables
Full e-commerce website redesign, from strategy to build-ready files
A shared design system used across the website and the customer dashboard
A product page family covering simple, configurable, and tile-based products
An AI-assisted content workflow for product and category copy at scale
A customer dashboard covering projects, moodboards, quotes, orders, messaging, and payments
Full developer handoff for both products: annotated screens, a documented component library, and interaction states
Outcome
Outcome
The new site went live in February 2026 across a catalogue of 2,567 products; the dashboard follows in October 2026. Both products now share the same look and feel, so a customer moving from browsing the catalogue to managing an active project never feels like they’ve left the brand. What used to be scattered across email and phone calls, quotes, approvals, order status, now lives inside a single, structured dashboard.
The project also left Bathroom by Design with a workflow they can keep using: wireframes first, shared components always, and AI handling content at the scale a catalogue this size demands.
Deliverables
Full e-commerce website redesign, from strategy to build-ready files
A shared design system used across the website and the customer dashboard
A product page family covering simple, configurable, and tile-based products
An AI-assisted content workflow for product and category copy at scale
A customer dashboard covering projects, moodboards, quotes, orders, messaging, and payments
Full developer handoff for both products: annotated screens, a documented component library, and interaction states
Outcome
The new site went live in February 2026 across a catalogue of 2,567 products; the dashboard follows in October 2026. Both products now share the same look and feel, so a customer moving from browsing the catalogue to managing an active project never feels like they’ve left the brand. What used to be scattered across email and phone calls, quotes, approvals, order status, now lives inside a single, structured dashboard.
The project also left Bathroom by Design with a workflow they can keep using: wireframes first, shared components always, and AI handling content at the scale a catalogue this size demands.