Responses by Numbered.

Background: Vintage champagne brand Dom Pérignon commissioned us to reimagine the user journey, revamp the design, generate assets and develop its website, ensuring accessibility across all markets. We established seamless connections from the marketing website to the group’s e-commerce platform for a select range of vintages. Additionally, the website serves as a central hub for individuals interested in exploring the brand, delving into the intricacies of its champagnes and immersing themselves in Dom Pérignon’s rich history.

Design core: Dom Pérignon has a longstanding tradition of presenting its products as a form of art. To emphasize this core identity, we undertook several initiatives: We crafted dedicated landing pages to showcase P2, Rosé and Vintage—its three distinct champagne offerings. We produced videos and images that artfully portrayed the essence of each champagne, highlighting the profound impact of seasonal variations on their unique characters. And we conceptualized an audio module featuring Vincent Chaperon, the cellar master of Dom Pérignon; his eloquent narration serves to convey the distinct qualities of the three champagnes, adding a sensory dimension to the user experience.

To create a truly dynamic and immersive journey, we envisioned a gallery—essentially an expansive mood board—that would guide users through the brand’s history. Unlike conventional timelines and history pages, our vision was to craft a page without a defined beginning or end. This design enabled users to continually explore and rediscover iconic moments in the brand’s illustrious history, fostering a deeper connection with Dom Pérignon’s legacy as a true work of art.

Challenges: The website has been designed to cater to multiple languages and markets, reflecting Dom Pérignon’s global presence. However, the stringent regulations governing alcohol-related communication necessitated careful content adaptation to ensure compliance. Our team meticulously adjusted the content on the pages and the assets we developed to adhere to these regulations.

Furthermore, the website has been designed with scalability in mind. It is meant to evolve continuously, with new pages and features scheduled for gradual deployment throughout the year. This approach ensures that the website remains actual and can adapt to emerging trends or user needs while maintaining compliance with regulatory requirements.

Technology: The website was developed with Next.js—Node.js, React and TypeScript—using Incremental Static Regeneration. Our content management is efficiently handled through Sanity, facilitating the modular assembly of every page. Additionally, we’ve implemented on-demand cache flushing via webhooks. The content is fetched using the GROQ query language, which is a user-friendly alternative to GraphQL.

We’ve made sure to provide a comprehensive list of content blocks, enabling the creation of editorial pages as well as immersive experiences. For instance, we’ve incorporated engaging interactive blocks, such as videos with subtitles that are dynamically animated using the native WebVTT API.

Special technical features: To reduce bandwidth usage and enhance core metrics, we have placed special emphasis on media optimization. This involves delivering images and videos in formats tailored to their displayed dimensions and the customer’s screen resolution.