Microsite

HBD Diners Club!

Explore 75 cocktail recipes to celebrate 75 years of Diners Club

Go to the live site here.

Client

Diners Club (Discover)

Role

UX Strategist

Timeline

5 months

What was the ask?

To commemorate Diners Club’s 75th anniversary, the brand created a beautifully designed printed cocktail recipe book featuring drinks from around the world. We were tasked with creating an online experience to complement Diners Club's physical cocktail recipe book, celebrating their 75th anniversary. Recognizing the global reach of the audience, we focused on designing a user-friendly experience that would resonate with diverse cultures and preferences.

Challenges & Goals

While the printed cocktail book was visually stunning, it had a limited reach. Diners Club wanted to create an online counterpart that would:

  • Extend the book’s content to a global audience

  • Highlight the brand’s international appeal

  • Provide a seamless, engaging user experience across devices

  • Accommodate a variety of cultural tastes and preferences

Picking The Best Platform

Integrated Experience vs. Campaign Microsite

The original scope called for integrating the experience into the existing Diners Club website. However, we realized that the Diners Club’s primary website is built using a standardized design system optimized for displaying branded financial services content. While this system works for promoting their core offerings, it imposed significant constraints on the experience we wanted to build. We quickly realized that embedding the cocktail campaign within this framework would highly limit our creative possibilities and functional capabilities.

Ultimately, we recommended developing a dedicated microsite. This approach allowed us to:

  • Create an immersive, standalone experience that captured the celebratory tone of the 75th anniversary campaign

  • Design outside the limitations of the existing design system

  • Customize the user journey to support exploration and discovery of the cocktail recipe content

  • Optimize performance, personalization and accessibility for a global audience

  • Ensure flexibility for future updates, translations, and potential extensions of the campaign

Bringing The Book to Life

One of the most crucial elements of this project was transforming the cocktail recipe book into a digital experience that not only complements the physical version but enhances it for an online audience. Our goal wasn’t to simply digitize the book, but to create an interactive experience that felt as intuitive and engaging as flipping through a traditional recipe book, while also taking full advantage of the possibilities that an online platform offers.

Designing for Easy Accessibility & Exploration

We focused on simplifying the user journey through offering two distinct but complementary navigation modes. Our goal was to support both intentional navigation and organic exploration, ensuring that users could engage meaningfully with the content—whether they knew exactly what they were looking for or not. The Recipes page allows users to discover recipes in streamlined fashion, helping users filter through cocktails based on liquor type, strength, difficulty and country of origin. For those uncertain about their preferences, we created interactive experiences, such as the "Tour the World" and “The Cocktail Quiz”, helping users explore and discover new cocktails.

Tour The World

The "Tour the World" module presents users with a dropdown menu of different countries, each country has 2-3 corresponding cocktails that are shown to the user upon selection. This design offers a visually engaging and straightforward way for users to explore different recipes.

  • Visual Engagement: Country badges serve as intuitive visual cues, inviting users to and discover cocktails from specific regions.

  • Cultural Connection: By highlighting the connection of each cocktail with its country of origin, it simulates the act of “traveling” through flavor and culture.

  • “Surprise Me”: This option encourages spontaneous exploration without requiring prior knowledge, introducing users to recipes they might not have sought out intentionally.

The Cocktail Quiz

The Cocktail Quiz offers users a fun, personalized way to discover cocktails based on their taste preferences and geographical interests. This feature blends entertainment with discovery, creating an engaging experience that encourages users to explore new flavors.

  • Personalized Experience: Users answer a series of questions about their preferences (flavor profile, strength, etc.).

  • Tailored Recommendations: Based on the quiz results, users are provided with a curated selection of cocktail recipes that match their profile.

  • Easy Exploration: Helps discover drinks that match user preferences - especially helpful for those who feel overwhelmed by the all the options or aren’t quite sure what they’re looking for.

Designing for a Global Audience

Key Information Up Front

To help users quickly assess whether a cocktail suited their tastes and skill level, each recipe page included clear, scannable tags for:

  • Liquor Type (e.g., gin, rum, whiskey)

  • Country of Origin (doubled as a navigational filter)

  • Difficulty Level (easy, intermediate, advanced)

  • Drink Strength (light, moderate, strong)

Clicking on a country or liquor tag would take users to a curated page featuring all cocktails from that region or using that liquor, encouraging exploration and cultural discovery. This interaction pattern helped users find recipes that resonated with their regional interests or liquor of choice, while also subtly reinforcing Diners Club’s global footprint.

Adaptive Measurements

Recognizing that measurement systems differ around the world, we enabled users to toggle between standard (imperial) and metric units in the ingredients list. This not only improved usability but also reduced friction for international users attempting to follow a recipe. The unit toggle responded to user preference and could reflect regional defaults based on location.

Looking Ahead: Language Localization

To further support a global audience, we will be introducing multi-language support in a future release. Users will be able to view all site content in their primary language, with available languages aligned to Diners Club’s active markets. This will ensure better accessibility for non-English-speaking audiences, reinforcing the brand’s commitment to cultural inclusivity.

Bringing The Experience to Life

We moved into development with a clear vision: deliver a lightweight, immersive, and responsive microsite that honored the elegance of the printed book while offering new ways to explore its content digitally.

Key Areas of Focus:

  • Performance Optimization: We prioritized fast load times across global regions by minimizing assets and lazy-loading content.

  • Responsive Front-End: Built mobile-first and rigorously tested across breakpoints to ensure the experience remained visually appealing and usable on all screen sizes.

  • Accessibility: Semantic HTML, keyboard navigation, ARIA labels, and alt text were baked into the development process from the start.

  • Scalability: The modular architecture makes it easy to add new regions, cocktails, or languages in the future—supporting the microsite’s longevity.