TYPE:
TYPE:
WEBSITE DESIGN
WEBSITE DESIGN
CLIENT:
CLIENT:
CHÂTEAU BAGATELLE
CHÂTEAU BAGATELLE
YEAR:
YEAR:
2025-2026
2025-2026
INDUSTRY:
INDUSTRY:
HOSPITALITY
HOSPITALITY
Website Château Bagatelle
Website Château Bagatelle
Website Château Bagatelle
TYPE:
WEBSITE DESIGN
CLIENT:
CHÂTEAU BAGATELLE
YEAR:
2025-2026
INDUSTRY:
HOSPITALITY
Problem
Problem
Problem
Château Bagatelle is a B&B in France run by Tom & Laura. They needed a website that would convey the warmth and character of the place, make it easy for guests to book, and be structured in a way that could grow as the business expands. The existing brand identity was already in place, so the website needed to stay true to that while bringing it to life online.
Project Goal: Create a website that captures the warmth of Château Bagatelle, makes booking effortless, and is built to grow with the business.
Château Bagatelle is a B&B in France run by Tom & Laura. They needed a website that would convey the warmth and character of the place, make it easy for guests to book, and be structured in a way that could grow as the business expands. The existing brand identity was already in place, so the website needed to stay true to that while bringing it to life online.
Project Goal: Create a website that captures the warmth of Château Bagatelle, makes booking effortless, and is built to grow with the business.
Château Bagatelle is a B&B in France run by Tom & Laura. They needed a website that would convey the warmth and character of the place, make it easy for guests to book, and be structured in a way that could grow as the business expands. The existing brand identity was already in place, so the website needed to stay true to that while bringing it to life online.
Project Goal: Create a website that captures the warmth of Château Bagatelle, makes booking effortless, and is built to grow with the business.
PROVIDED BRAND IDENTITY
PROVIDED BRAND IDENTITY
PROVIDED BRAND IDENTITY
ONE OF MY MOODBOARDS
ONE OF MY MOODBOARDS
ONE OF MY MOODBOARDS
Approach
Approach
Approach
Client Input: Brainstormed closely in iteration loops via moodboards with the owners to understand how to express Château Bagatelle's character, atmosphere, and personality.
Client Input: Brainstormed closely in iteration loops via moodboards with the owners to understand how to express Château Bagatelle's character, atmosphere, and personality.
Client Input: Brainstormed closely in iteration loops via moodboards with the owners to understand how to express Château Bagatelle's character, atmosphere, and personality.
Competitor Research: Researched comparable properties' websites and discussed the features and functionality Château Bagatelle needed.
Competitor Research: Researched comparable properties' websites and discussed the features and functionality Château Bagatelle needed.
Competitor Research: Researched comparable properties' websites and discussed the features and functionality Château Bagatelle needed.
Photography & Video: The owners captured stunning, detailed photography and video of the B&B themselves. We explored how to give these a stage on the website and let them speak for themselves, using them as primary storytelling elements to convey the atmosphere of the place.
Photography & Video: The owners captured stunning, detailed photography and video of the B&B themselves. We explored how to give these a stage on the website and let them speak for themselves, using them as primary storytelling elements to convey the atmosphere of the place.
Photography & Video: The owners captured stunning, detailed photography and video of the B&B themselves. We explored how to give these a stage on the website and let them speak for themselves, using them as primary storytelling elements to convey the atmosphere of the place.
Design Direction: Explored three design directions for the homepage, each varying in how much of the existing brand identity was carried through versus reference websites shared by the client. After discussing the broad directions, chose one and use that as a guideline for the other pages.
Design Direction: Explored three design directions for the homepage, each varying in how much of the existing brand identity was carried through versus reference websites shared by the client. After discussing the broad directions, chose one and use that as a guideline for the other pages.
Design Direction: Explored three design directions for the homepage, each varying in how much of the existing brand identity was carried through versus reference websites shared by the client. After discussing the broad directions, chose one and use that as a guideline for the other pages.
Step-by-Step Approach: Once the direction was chosen, the homepage design was finalized in detail including all responsive layouts. Only after approving the homepage, we continued with the dedicated pages. This approach minimizes repetitive work and keeps the client aligned throughout.
Step-by-Step Approach: Once the direction was chosen, the homepage design was finalized in detail including all responsive layouts. Only after approving the homepage, we continued with the dedicated pages. This approach minimizes repetitive work and keeps the client aligned throughout.
Step-by-Step Approach: Once the direction was chosen, the homepage design was finalized in detail including all responsive layouts. Only after approving the homepage, we continued with the dedicated pages. This approach minimizes repetitive work and keeps the client aligned throughout.
Page Structure: Defined the page structure and recommended sections for each page. Each page has a short summary section on the homepage so the content is clear at a glance, with dedicated pages for those who want to dive deeper. The booking flow pages were excluded from the homepage to keep it focused.
Page Structure: Defined the page structure and recommended sections for each page. Each page has a short summary section on the homepage so the content is clear at a glance, with dedicated pages for those who want to dive deeper. The booking flow pages were excluded from the homepage to keep it focused.
Page Structure: Defined the page structure and recommended sections for each page. Each page has a short summary section on the homepage so the content is clear at a glance, with dedicated pages for those who want to dive deeper. The booking flow pages were excluded from the homepage to keep it focused.
Wireframes: Before starting the visual design, we created low-fidelity wireframes for each page to map out the content and determine which modules were needed.
Wireframes: Before starting the visual design, we created low-fidelity wireframes for each page to map out the content and determine which modules were needed.
Wireframes: Before starting the visual design, we created low-fidelity wireframes for each page to map out the content and determine which modules were needed.
FIRST DESING DIRECTIONS
FIRST DESING DIRECTIONS
FIRST DESING DIRECTIONS
PAGE STRUCTURE FLOW DIAGRAM
PAGE STRUCTURE FLOW DIAGRAM
PAGE STRUCTURE FLOW DIAGRAM
WIREFRAME EXAMPLES
WIREFRAME EXAMPLES
WIREFRAME EXAMPLES
Challenges & Tradeoffs
Challenges & Tradeoffs
Challenges & Tradeoffs
It was decided to place the "Book Your Stay" section first on the homepage to encourage bookings, and the "Book Now" button is always reachable from the header. Furthermore, we carefully considered all the different paths a user can follow to land on the booking page.
It was decided to place the "Book Your Stay" section first on the homepage to encourage bookings, and the "Book Now" button is always reachable from the header. Furthermore, we carefully considered all the different paths a user can follow to land on the booking page.
It was decided to place the "Book Your Stay" section first on the homepage to encourage bookings, and the "Book Now" button is always reachable from the header. Furthermore, we carefully considered all the different paths a user can follow to land on the booking page.
Because the owners highlighted that the business will expand in the future, we designed a modular structure with reusable blocks so the website could grow without losing visual consistency. We introduced "Spaces" as a flexible naming convention to bring together any type of bookable space, not just accommodation.
Because the owners highlighted that the business will expand in the future, we designed a modular structure with reusable blocks so the website could grow without losing visual consistency. We introduced "Spaces" as a flexible naming convention to bring together any type of bookable space, not just accommodation.
Because the owners highlighted that the business will expand in the future, we designed a modular structure with reusable blocks so the website could grow without losing visual consistency. We introduced "Spaces" as a flexible naming convention to bring together any type of bookable space, not just accommodation.
The place has a warm, cozy atmosphere that needed to come through in the design. The challenge was capturing that feeling digitally without the website becoming too informal or losing its professional edge.
The place has a warm, cozy atmosphere that needed to come through in the design. The challenge was capturing that feeling digitally without the website becoming too informal or losing its professional edge.
The place has a warm, cozy atmosphere that needed to come through in the design. The challenge was capturing that feeling digitally without the website becoming too informal or losing its professional edge.
The brand identity featured a distinctive striped background, which added character but risked making the pages feel busy. Keeping the content elements simple and modular was key to maintaining a clean, uncluttered design while letting the background do its work.
The brand identity featured a distinctive striped background, which added character but risked making the pages feel busy. Keeping the content elements simple and modular was key to maintaining a clean, uncluttered design while letting the background do its work.
The brand identity featured a distinctive striped background, which added character but risked making the pages feel busy. Keeping the content elements simple and modular was key to maintaining a clean, uncluttered design while letting the background do its work.
The booking flow needed careful thought to keep it as short and simple as possible while still being complete. Every step had to earn its place.
The booking flow needed careful thought to keep it as short and simple as possible while still being complete. Every step had to earn its place.
The booking flow needed careful thought to keep it as short and simple as possible while still being complete. Every step had to earn its place.
Results
Results
Results
Overall: A fully functional website that immediately gives you the feeling of being at home at Château Bagatelle.
Overall: A fully functional website that immediately gives you the feeling of being at home at Château Bagatelle.
Overall: A fully functional website that immediately gives you the feeling of being at home at Château Bagatelle.
Brand Identity: Turned the brand's distinctive stripes into a recurring visual element that adds character without creating a busy or cluttered feel. The result is a unique identity that feels playful but sleek.
Brand Identity: Turned the brand's distinctive stripes into a recurring visual element that adds character without creating a busy or cluttered feel. The result is a unique identity that feels playful but sleek.
Brand Identity: Turned the brand's distinctive stripes into a recurring visual element that adds character without creating a busy or cluttered feel. The result is a unique identity that feels playful but sleek.
Content-First Design: Let the atmosphere speak for itself through rich photography and video, supported by a clean and simple layout that always puts the content and imagery first.
Content-First Design: Let the atmosphere speak for itself through rich photography and video, supported by a clean and simple layout that always puts the content and imagery first.
Content-First Design: Let the atmosphere speak for itself through rich photography and video, supported by a clean and simple layout that always puts the content and imagery first.
Scalability & Modular Blocks: Built a modular block system that allows easy expansion of pages and sections. Each block can be configured with background stripes and accent color, giving the owners full flexibility as the business grows.
Scalability & Modular Blocks: Built a modular block system that allows easy expansion of pages and sections. Each block can be configured with background stripes and accent color, giving the owners full flexibility as the business grows.
Scalability & Modular Blocks: Built a modular block system that allows easy expansion of pages and sections. Each block can be configured with background stripes and accent color, giving the owners full flexibility as the business grows.
Responsive Design: Made the website fully responsive, ensuring a great experience across all devices.
Responsive Design: Made the website fully responsive, ensuring a great experience across all devices.
Responsive Design: Made the website fully responsive, ensuring a great experience across all devices.
CMS: Worked closely with the developer to build a CMS that gives the owners control over their own content. We built the website together.
CMS: Worked closely with the developer to build a CMS that gives the owners control over their own content. We built the website together.
CMS: Worked closely with the developer to build a CMS that gives the owners control over their own content. We built the website together.
HOMEPAGE
HOMEPAGE
ACCESSIBLE ON MOBILE & TABLET
ALL BREAK POINTS DESIGNED
MODULAR & CONFIGURABLE
ACCESSIBLE ON MOBILE & TABLET
ACCESSIBLE ON MOBILE & TABLET
ALL BREAK POINTS DESIGNED
ALL BREAK POINTS DESIGNED
MODULAR & CONFIGURABLE
MODULAR & CONFIGURABLE
Reflections & Takeaways
Reflections & Takeaways
Reflections & Takeaways
One important takeaway from this project was about client communication during the exploration phase. The reference websites shared by the client pointed in a completely different direction than what they actually had in mind, which initially put me slightly on the wrong track. After exploring three directions, it turned out they had a strong preference for the striped background from the original concept. The lesson: clients don't always express their preferences upfront. The exploration wasn't wasted, seeing the alternatives helped confirm the right direction. But next time, I'd ask more explicitly if there is anything from the existing identity that's non-negotiable.
Another learning was that not every project matches your personal taste, and that's fine. What matters is delivering a strong, complete result that serves the client. This project pushed me to separate personal preference from professional craft, and I'm proud of the outcome. Along the way I even started to like it (a lot)!
One important takeaway from this project was about client communication during the exploration phase. The reference websites shared by the client pointed in a completely different direction than what they actually had in mind, which initially put me slightly on the wrong track. After exploring three directions, it turned out they had a strong preference for the striped background from the original concept. The lesson: clients don't always express their preferences upfront. The exploration wasn't wasted, seeing the alternatives helped confirm the right direction. But next time, I'd ask more explicitly if there is anything from the existing identity that's non-negotiable.
Another learning was that not every project matches your personal taste, and that's fine. What matters is delivering a strong, complete result that serves the client. This project pushed me to separate personal preference from professional craft, and I'm proud of the outcome. Along the way I even started to like it (a lot)!
One important takeaway from this project was about client communication during the exploration phase. The reference websites shared by the client pointed in a completely different direction than what they actually had in mind, which initially put me slightly on the wrong track. After exploring three directions, it turned out they had a strong preference for the striped background from the original concept. The lesson: clients don't always express their preferences upfront. The exploration wasn't wasted, seeing the alternatives helped confirm the right direction. But next time, I'd ask more explicitly if there is anything from the existing identity that's non-negotiable.
Another learning was that not every project matches your personal taste, and that's fine. What matters is delivering a strong, complete result that serves the client. This project pushed me to separate personal preference from professional craft, and I'm proud of the outcome. Along the way I even started to like it (a lot)!
