Patrón Tequila Selector

Overview

Interactive recommendation promotion for Patrón Tequila, built at SPIKA for use in Spotlight, based on supplied creative and UX designs.

Users choose whether they are buying for themselves or as a gift, then answer a short series of lifestyle and flavour questions. Based on their answers, the promo recommends a Patrón bottle and a matching cocktail.

My work focused on implementing the supplied designs inside Spotlight and building the custom JavaScript layer needed to manage the quiz flow, scoring logic and recommendation data.

The user journey

The flow starts with a simple choice: self or gift. From there, users move through a set of quiz screens before reaching a bottle recommendation.

Once the quiz is complete, a short carousel animation cycles through different Patrón bottles before landing on the selected result. The recommendation has already been calculated by that point, but the animation gives the reveal a more polished campaign feel than jumping straight to the answer.

The result screen shows the selected bottle and flavour profile, with a route through to a matching cocktail, including recipe, ingredients, method, related bottles and a restart option.

Build

The promo needed behaviour beyond Spotlight’s standard campaign features, so I built the quiz and recommendation layer in JavaScript.

The bottle information, flavour profiles, copy, imagery and cocktail matches were kept in a structured data object, with the scoring logic layered on top. This kept the campaign content separate from the display logic and made the implementation easier to adapt.

Producers could update products, copy and images in an isolated Spotlight widget, while I could adjust the scoring rules independently when the client supplied new answer weightings.

The carousel was also kept separate from the recommendation logic, so the scoring stayed straightforward to test and change without touching the presentation layer.

Outcome

The final promo gave users a guided way to discover a Patrón bottle and matching cocktail, while giving the production team a reusable structure that could be adapted for similar campaigns.

What I built

• Front-end implementation of the supplied designs in Spotlight
• Quiz flow and screen transitions, including the carousel reveal
• JavaScript recommendation logic mapping answers to bottle and cocktail matches
• Structured data object for bottles, copy, imagery and cocktail pairings
• Reusable quiz and recommendation layer for future Spotlight promotions