The redesign of Audemars Piguet’s global site involved modernizing the brand’s aesthetic, the creation of an in-depth modular system, and the introduction of highly-interactive tools that deepen customer experiences.

Role —

I designed the themeboard that set the style direction for the redesign. After the team implemented the design across a few pages, I worked closely with developers to establish a system of modules that allowed for new pages to be built quickly without losing consistency. I also designed a highly-interactive and responsive watch strap configurator and full-screen map experience to live on the site.

Url —

Year —


A New Look & Feel

I created one of the two themeboard directions we presented for the redesign. My direction was chosen and essentially (with a few tweaks) became the design that went live on the site. This design was a drastic departure from their previous style, bringing the aesthetic from soft & classical to modern & bold by embracing large images that highlight the exqusite details in the watches.


Final Design

An extensive modular system

Beyond watch pages, AP needed a system that allowed their content to change and expand. To accomplish this, I organized a system of 60+ modules to be used across the site. By using these modules and following our guidelines, AP's team could easily build new pages when necessary.

Below are pieces of the site created using the modular system I established, including, but not limited to: introduction module, theme header, section header, image carousel, tabbed carousel, download tout, timeline, pull-quote, and stats module.

I worked steadily with front and back-end developers while creating the system, making sure each module was set up to be reused easily, could work on both light and dark themed pages, and that spacing between modules was controllable in the CMS. I created an extensive spreadsheet that broke down the elements within each module, layout variations, character counts, image aspect ratios, and general content guidelines.

A New Take on Where to Buy

When possible, the team found ways to push interactivity on the site. I worked with the UX team to completely revamp the Where to Buy section from a list & image format to a searchable, full-screen map experience. It was important that the map encourage customers to visit AP-exclusive boutiques over general watch retailers, so I gave AP boutiques special result tiles with a photo of the boutique and made their map pins gold to stand out against the black retailer pins.

Landing State

Result Based on Geo-Location

Browsing Combinations

Some AP watches come with a range of case and strap options to choose from. I designed this light-weight watch strap configurator for the Millenary collection that allows users to browse different case & strap combinations to find the one that best matches their style. Users can even pair the watch they created with a themed background at the end to complete the look.

Each pairing is accompanied by a collapsable details with a recap of the case and strap selection along with the buckle that comes with it. This information can then be recorded and given to a watch salesperson when a customer visits an AP Boutique.

Some watch detail pages needed a simple version of this configurator without case options. These required a different landing state, showing the same case with different straps. Because of development constraints, all the straps needed to be presented in the same order for each configurator, so it was important to assign default straps to each case and create an array of straps that looked good no matter which strap you started with.

Always Improving...

Odopod is AP’s long-standing digital partner. Working on multiple projects for them continues to deepen my insight into the brand, the watchmakers, and their loyal customers. Between projects, we regularly measure site analytics and make adjustments to flows and designs when necessary to continue to improve the user experience.

Next Project

Roche PD News App