2014_2024

What I did for this project:

web-design
3d_modeling
branding

Patek Philippe

Summary

Redesigning the Patek Philippe website and museum is a challenging task. As a luxury brand, navigating e-commerce can be complex as it may alter the close relationship the brand has with its audience. For an institution with such a long history, what's showcased here is less about the products and collections, and more about presenting a manifesto and offering a glimpse into the complex world of Patek Philippe.

Problem

After extensive research, including insights gathered by the brand over time and interviews conducted for the project, we identified the target persona as a sharp connoisseur of both the brand and watchmaking. Our challenge was to avoid relying on digital tricks and gimmicks that could overshadow the genuine interests of the brand's aficionados and users. Every aspect had to be carefully considered to enhance an experience that could not be conveyed in any other way. Furthermore, the client aimed to elevate the brand, and minimize the spotlight on the product. This slight mismatch between the brand's objective and user's needs led us to create an immersive experience, where products serve as narrative elements rather than the end goal of the user's journey.

Role

In this project, I was in charge to do a small portion of the user research, but I've had to do the art direction for the whole project. After this first phase, I created different user journeys, designed the different screens, worked on the micro-interactions and the motion. Finally, I created different immersive 3D prototypes for the museum

Challenge

Providing deeply immersive experience can cause a lot of future work for the team who are going to produce both the visual and textual content. I tried to minimising this by automating many of image creation. Working closely with their team offered us the advantage of testing if our solution were acceptable for them. As the stakeholders and the avid Patek Philipp's fan were in dissonance on some aspect, we had to test the solution desired by one on the other and vise versa.

Solution

The stakeholders had very specific, strategic requirements that differed slightly from the users' needs. Therefore, we decided to approach certain sections of the website differently. Our research helped us identify the critical sections for each group, users and stakeholders, and we tailored these pages accordingly. Our art direction ensured a cohesive link between these different parts. The museum website stands as an exception requiring a different interactive experience. Nevertheless, we applied the majority of the design system to create a seamless experience.

Image showing the header of the calatrava watch
_01

Each collection adopts an immersive approach with its hero model. The aim is to take the user on a journey, starting from the latest model in the collection, delving into the history behind the entire collection, presenting a product-oriented overview of all models, and concluding with a link to the online museum.

From branding to interactive

As Patek Philippe represents a long tradition in watchmaking. The website was designed more as a showcase than a purely commercial platform. The user is encouraged to embrace the brand and its activity rather than just shop. The aim was to replicate the experience found in various "salon de l'horlogerie", but in front of a computer.

Image of two calatrava watches over a cadran
_03

For many models, whether historical or current, we've found that users are as interested in the brand's history as they are in its technical achievements. We've balanced many static visual assets with an interactive module. This module allows users to explore the watches in depth, examine the movements and various parts, and understand the rationale behind each technical choice.

Detail of the desktop and mobile page of the grand master chime
_04

Special models, like the Grandmaster Chime, have been developed with particular attention to user experience. For select high-end models, we have conducted research and interviews to understand this user base better. Based on these findings, we've created a more customized experience where the watch presented as a multi-ending story.

Detail view of the museum interactive website
_05

The museum is a project in its own right, offering an immersive experience through various paths. The first path is the historical one, demonstrated by a timeline highlighting major events. The second path explores the evolution of watch movements. Lastly, the third path involves collections divided into different e-rooms, each displaying themes differently based on the latest model of the collection.

Detail view of product card in Patek Philippe
_06

Working on mobile was challenging due to the limited space and time to recreate the same experience, composed of moments of visual silence and extra-large watch visuals, offered on desktop. However, we leveraged the interactive features available on mobile to immerse users in the models. The sensation of virtually dismantling a Patek Philippe to uncover its secrets was feedback shared by many users during interviews.

Detail view of the museum page on desktop and mobile view of the map
_07

While the e-museum provides a distinct experience compared to the onsite museum, the website should equally highlight these two aspects of Patek Philippe's history. We have created a link on the website and in the museum to encourage visitors to explore their complementary nature. In line with this concept, we developed an interactive map of the museum. This leads users through the physical space to uncover historical artifacts and complements their understanding of a collection or individual piece by directing them to the website.

View of the work done for the Patek Philippe typeface
_08

Initially, we reviewed the entire history of the Patek Philippe brand. We decided to incorporate another craft, also focused on small mechanical pieces, to enhance the online branding. We conceived and designed two typefaces. These especially embellishes the the brand message in the absence of images. In addition to that, the type family allowed us to work with variable fonts to create subtle micro-interactions.