Responses by Brice Martinez, technical director, Troa; and Manuel Tocanne, creative director, Goodkids.

Background: The clients are Château Canon and Château Rauzan-Ségla, two major wine estates in Bordeaux that are part of the Chanel group of wineries. They asked us to create a website that describes the links between the two estates. The target audience is wine professionals and wine lovers not only in France, as Bordeaux wines are recognized all over the world. A media campaign that was mainly on social media linked to this experience.

Design core:  The concept was about switching from one river bank to another, as Château Canon is located on the right bank of the Gironde estuary in Bordeaux, and Château Rauzan-Ségla is on the left. Our website’s logic was simple: we had two films shot in parallel for each Château with a common story, and we would use the online experience to let users flit between the left to the right bank using their keyboards or touchscreens on mobile. We tried to keep the experience as simple as possible—even in the design and motion transitions—to only convey the main concept and show visitors the beauty of the films.

Favorite project details: The two films had been a big deal for us to make, as they had to work separately and together within the experience. The films tell the unique story of each estate but share a common storyline and voiceover. The website had its own identity, and the challenge for us was to keep it as delicate and poetic as the films.

We also wanted the website to be switchable at any point of the experience, even within the content pages, which was a big UX challenge. Obviously, mobile was also a big deal to keep the experience pleasant on those devices.

Challenges: The experience was part of a bigger UX challenge, as we also reworked the two wine estates’ website in tandem with this experience, each one having its own content and playing its own film. The problem lay in making sure everything was coherent between this experience and the two other websites. It also provided us with a big technical challenge, as we needed to load a huge amount of videos and have them transition seamlessly between one and the other.

Time constraints: We had to postpone the launch with the client while we found the right technical solutions for the experience and finished uploading all the content and photos to all three websites. It was a huge amount of work on both our client and us. We also struggled to keep the loading light, which took us longer than planned.

Navigation structure: We wanted something super easy to remember and to use, whatever the age of the audience. It felt super logical for us to use arrows left or right, to switch from the left bank to the right bank, and it followed the main concept. For mobile, we did some prototyping to find the best gestures, and we went with a click-and-drag kind of gesture that was the most fun to use.

Technology: The website’s architecture employs Kirby as its content management system to craft both the overarching user experience and each distinct site within. The system is implemented as a headless CMS, a modern approach that separates the back-end content management from the front-end presentation layer.

Special technical features: Central to the experience is the synchronized playback of two videos, a feature achieved through the deployment of Web Workers. This technique offloads the video processing from the main execution thread, ensuring that the loading performance remains unimpeded. On the client side, the seamless navigational experience is facilitated by the integration of Locomotive Scroll and barba.js, which together provide a smooth and visually cohesive page transition experience.