Responses by Dentsu Creative Amsterdam.

Background: In early 2023, renowned Swiss watchmaker Audemars Piguet released its very first ultra-complicated self-winding wristwatch: the Code 11.59 by Audemars Piguet Universelle. This timepiece marks the manufacturer’s uncompromising approach to craftsmanship and engineering for the ultra-complicated watches. We created a website landing page with a level of depth and immersion rivaling that of the watch itself.

The website effortlessly combines video, images and immensely technical 3-D renderings into a single flowing experience that takes the viewer to both the technical and emotional center of a ticking work of art.

Design core: The Code 11.59—also known as RD#4—is the culmination of several years of research, design and manufacturing of many different types of complicated mechanisms that have put ergonomics at the forefront of the process.

Like the watch, the website is simple to use and very intuitive, letting users move seamlessly forward through the content with the sensation of reaching deeper and deeper levels of craftsmanship and complexity as they travel. At the same time, we broke the experience up into sections that mirror the watch’s primary functions to give viewers the chance to pause and reflect on specific technical aspects of the mechanism.

Challenges: Representing the details of the Code 11.59 on the web in 3-D. One of the first hurdles in achieving this was optimizing the model for web display. This optimization process is crucial in ensuring that the website loads quickly, avoiding slow page speeds that could deter visitors. Once the 3-D model was optimized, it needed to be seamlessly integrated into the website’s design framework while ensuring that it is positioned correctly with the appropriate lighting.

In close collaboration with the Audemars Piguet product team, we continued to work on improving the 3-D model’s interactivity, letting users interact with the watch’s various features. This attention to detail was essential in creating a realistic representation of the watch that accurately showcases its craftsmanship.

Navigation structure: While the landing page became quite a long and immersive scrolling experience, we created a simplistic way for people to quickly travel between key sections of the journey or dive straight into the watch’s details. Without interfering with the global site navigation, we designed an elegant side navigation that blends in with the loading animation design, subtly referencing the time marks people will find on the dial itself.

To enhance the user experience, we created small thumbnails for each section, providing visitors with extra visual guidance of where they are about to go.

Technology: There are a few ways to represent a watch in 3-D on the web but very few that can deliver the detail and quality of an engineering marvel like the Code 11.59. Using a combination of Vue.js, WebGL, custom shaders and an extremely optimized 3-D pipeline for the watch, we managed to craft a highly interactive tunnel experience that visualizes the watch and its internal mechanisms with natural dynamic lighting, realistic interactions, and, most importantly, realistic resolution for both mobile and desktop.