Torani
Torani
Turning a product launch into a living digital experience
Turning a product launch into a living digital experience
Turning a product launch into a living digital experience
A multi-phase, interactive digital campaign to build hype for the release of a top-secret new flavour. The experience centred on a dynamic landing page featuring a countdown timer, periodic clue reveals, and a "Guess the Flavour" engine designed to engage the community and capture marketing leads.
A multi-phase, interactive digital campaign to build hype for the release of a top-secret new flavour. The experience centred on a dynamic landing page featuring a countdown timer, periodic clue reveals, and a "Guess the Flavour" engine designed to engage the community and capture marketing leads.
Industry :
Industry :
Food and Beverage
Food and Beverage
Tools :
Tools :
Figma, Adobe - Illustrator, Photoshop, After Effects
Figma, Adobe - Illustrator, Photoshop, After Effects
OVERVIEW
Torani is a near-100-year-old flavored syrup brand beloved by baristas and home enthusiasts alike. For their 2024 "Flavour of the Year" reveal, I was brought in as sole designer to build anticipation for a top-secret new product, transforming a standard product announcement into a sustained, multi-week digital event.
Torani is a near-100-year-old flavored syrup brand beloved by baristas and home enthusiasts alike. For their 2024 "Flavour of the Year" reveal, I was brought in as sole designer to build anticipation for a top-secret new product, transforming a standard product announcement into a sustained, multi-week digital event.
MY ROLE
This project required wearing every hat in the creative closet. I didn't just hand off files, I owned the outcome.
This project required wearing every hat in the creative closet. I didn't just hand off files, I owned the outcome.
This project required wearing every hat in the creative closet. I didn't just hand off files, I owned the outcome.
Brand immersion & Custom illustrations
Research & stakeholder interviews
Research & stakeholder interviews
I deep-dove into Torani's brand guidelines. These insights fed directly into custom vector illustrations built in Illustrator: the real HQ building, skylines with the Golden Gate Bridge, trees, a countdown timer, and all three-phase backgrounds. No stock assets.
I deep-dove into Torani's brand guidelines. These insights fed directly into custom vector illustrations built in Illustrator: the real HQ building, skylines with the Golden Gate Bridge, trees, a countdown timer, and all three-phase backgrounds. No stock assets.
Motion graphics production
Motion graphics production
I animated GIFs for each clue reveal, built in After Effects. These had to fit in mobile drawers and load quickly, so I optimised file size without sacrificing the quality the brand required.
Translating research insights into flows and wireframes — both on paper and in Figma.
Translating research insights into flows and wireframes — both on paper and in Figma.
High-fidelity prototyping
High-fidelity prototyping
Created Figma prototypes for desktop, iPad, and mobile, covering all four phases. Interactive clue reveals, countdown timer states, and the Guess form flow were all prototyped before any developer saw the brief.
Created Figma prototypes for desktop, iPad, and mobile, covering all four phases. Interactive clue reveals, countdown timer states, and the Guess form flow were all prototyped before any developer saw the brief.
Developer execution oversight
Developer execution oversight
Monitored developer output and maintained pixel-perfect alignment across all breakpoints, catching implementation drift before QA rather than after.
Monitored developer output and maintained pixel-perfect alignment across all breakpoints, catching implementation drift before QA rather than after.
Client Collaboration
Client Collaboration
Served as the creative translator between what the client imagined and what was technically build-able, advocating for design decisions that served the user experience.
Served as the creative translator between what the client imagined and what was technically build-able, advocating for design decisions that served the user experience.
Launch & handoff
Launch & handoff
Delivered a complete asset package: phase-by-phase scene files, motion GIFs, responsive breakpoints, the Guess form with database integration spec, and a countdown timer implementation guide.
Delivered a complete asset package: phase-by-phase scene files, motion GIFs, responsive breakpoints, the Guess form with database integration spec, and a countdown timer implementation guide.
THE CHALLENGE
The team came to me with a deceptively simple brief:
Build anticipation for a top-secret new flavour before its November reveal.
Torani is a near-100-year-old brand known for crafting nature-inspired syrups beloved by baristas and home enthusiasts.
For their 2024 "Flavour of the Year" launch, the marketing team came to me with a deceptively simple brief: build anticipation for a top-secret new flavour before its November reveal.
A static "Coming Soon" page wouldn't be enough. The goal was to keep users returning to the site over several weeks while simultaneously collecting valuable customer data (name, email, phone) for the launch CRM. The challenge was getting users to willingly hand that over.
A static "Coming Soon" page wouldn't be enough. The goal was to keep users returning to the site over several weeks while simultaneously collecting valuable customer data (name, email, phone) for the launch CRM. The challenge was getting users to willingly hand that over.
THE CHALLENGE
The team came to me with a deceptively simple brief:
Build anticipation for a top-secret new flavour before its November reveal.
A static "Coming Soon" page wouldn't be enough. The goal was to keep users returning to the site over several weeks while simultaneously collecting valuable customer data (name, email, phone) for the launch CRM. The challenge was getting users to willingly hand that over.
A static "Coming Soon" page wouldn't be enough. The goal was to keep users returning to the site over several weeks while simultaneously collecting valuable customer data (name, email, phone) for the launch CRM. The challenge was getting users to willingly hand that over.
THE SOLUTION
I designed a multi-phase, time-aware interactive campaign: a landing page that didn't just count down, but transformed as launch day approached. The page itself became a character in the story. Three timed clues revealed drove repeat traffic. A "Guess the Flavor" engine turned lead capture into a game and a day-to-night visual progression: from bright San Francisco morning to a starry galaxy night, subtly hinted at the secret flavor without ever naming it.
I designed a multi-phase, time-aware interactive campaign: a landing page that didn't just count down, but transformed as launch day approached. The page itself became a character in the story. Three timed clues revealed drove repeat traffic. A "Guess the Flavor" engine turned lead capture into a game and a day-to-night visual progression: from bright San Francisco morning to a starry galaxy night, subtly hinted at the secret flavor without ever naming it.
UNDERSTANDING THE BRAND
UNDERSTANDING THE BRAND
COLOURS USED IN PRODUCT
COLOURS USED IN PRODUCT
COMMUNICATION GUIDELINES
COMMUNICATION GUIDELINES
SOCIALS - INSTAGRAM PAGE AND WEBSITE
SOCIALS - INSTAGRAM PAGE AND WEBSITE
THE CONCEPT
THE CONCEPT
How do you keep users engaged and returning to a landing page every day for a product they can’t yet see or taste? A static "Coming Soon" page wouldn’t be enough. We needed a living, breathing digital ecosystem. My strategy was to turn the landing page into a central character in the story. Instead of a static background, I proposed a "time-aware" interface that would evolve visually as the countdown clock ticked closer to the reveal date.
How do you keep users engaged and returning to a landing page every day for a product they can’t yet see or taste? A static "Coming Soon" page wouldn’t be enough. We needed a living, breathing digital ecosystem. My strategy was to turn the landing page into a central character in the story. Instead of a static background, I proposed a "time-aware" interface that would evolve visually as the countdown clock ticked closer to the reveal date.
How do you keep users engaged and returning to a landing page every day for a product they can’t yet see or taste? A static "Coming Soon" page wouldn’t be enough. We needed a living, breathing digital ecosystem. My strategy was to turn the landing page into a central character in the story. Instead of a static background, I proposed a "time-aware" interface that would evolve visually as the countdown clock ticked closer to the reveal date.
1
Time-Aware Visual Progression:
The interface evolves from a bright morning to an evening glow and finally into a starry night to subtly hint at the secret "Galaxy" theme. Since Torani’s brand is built on capturing the "true essence" of nature and the environment. The day-to-night cycle reflected this philosophy by using a natural, environmental progression to introduce a flavor inspired by the cosmos.
The interface evolves from a bright morning to an evening glow and finally into a starry night to subtly hint at the secret "Galaxy" theme. Since Torani’s brand is built on capturing the "true essence" of nature and the environment. The day-to-night cycle reflected this philosophy by using a natural, environmental progression to introduce a flavor inspired by the cosmos.
2
Torani Head Office :
Torani Head Office :
I illustrated the central building to specifically match the actual head office, grounding the digital mystery in the brand's physical reality. Especially since Torani's brand DNA is built around being a real, rooted, human company and not a faceless corporation.
I illustrated the central building to specifically match the actual head office, grounding the digital mystery in the brand's physical reality. Especially since Torani's brand DNA is built around being a real, rooted, human company and not a faceless corporation.
3
San Francisco Heritage :
San Francisco Heritage :
Since Torani is headquartered in San Francisco, I incorporated a stylized SF skyline and the Golden Gate Bridge to honor the brand's roots and location.
Since Torani is headquartered in San Francisco, I incorporated a stylized SF skyline and the Golden Gate Bridge to honor the brand's roots and location.
4
Interactive Clue Access :
Interactive Clue Access :
These points allowed users to watch animated clue videos at a set frequency, driving repeat traffic and community engagement throughout the campaign.
These points allowed users to watch animated clue videos at a set frequency, driving repeat traffic and community engagement throughout the campaign.
5
Lead Generation & Urgency :
Lead Generation & Urgency :
This module features the countdown timer leading up to the date of flavour release and "Guess the Flavor" form, designed to capture user data (Name, Email, Phone) and store it in a database.
This module features the countdown timer leading up to the date of flavour release and "Guess the Flavor" form, designed to capture user data (Name, Email, Phone) and store it in a database.
A "time-aware" visual journey
A "time-aware" visual journey
Phase 1
Phase 2
Phase 3
Phase 4
Phase 1: The Morning of Discovery
Visuals:
Bright blue skies, a high sun, and the clear San Francisco skyline.
The Intent:
This phase represents the "kickoff" of the mystery. It established a grounded, friendly, and approachable atmosphere consistent with the Torani brand.
User Experience:
Clue #1 is introduced here. The mood is one of lighthearted curiosity - the journey has just begun.
Phase 1
Phase 2
Phase 3
Phase 4
Phase 2: The Evening of Anticipation
Visuals:
The UI transitions into warm, golden hour tones with a setting sun.
The Intent:
As the countdown timer approaches its final days, the colors shift to create a sense of transition. The "golden hour" aesthetic builds a subtle tension - daylight is fading, and the mystery is deepening.
User Experience:
More clues are "unlocked" through motion-graphic GIFs, and the "Guess the Flavor" box sees its highest engagement during this high-stakes period.
Phase 4: The Reveal
Visuals:
The "Mystery Building" opens its doors to a full-screen, high-contrast cosmic landscape featuring astronauts in Torani-branded suits and the official "Flavor of the Year" bottle.
The Intent:
This phase serves as the grand finale of the "Visual Journey". The transition from a starry night sky to a deep-space nebula creates a seamless brand transition.
User Experience:
The transition from a starry night sky to a deep-space nebula creates a seamless brand transition, allowing the new flavour to make its debut.
1
2
3
4
Phase :
The Gamified Data Capture
The Gamified Data Capture
Traditional lead gen forms have a clear problem: they feel like a toll gate. Users know they're trading data for access, and they resent it. By wrapping the form in a "Guess the Flavour" mechanic, users submitted their details as an act of participation. They were entering a contest, not filling out a form. The framing shift from "sign up for our newsletter" to "think you already know the flavour?" reduced psychological friction significantly.
Business Value :
The form captured essential PII (Name, Email, Phone) and offered social login, building a curated marketing list for the launch.
Traditional lead gen forms have a clear problem: they feel like a toll gate. Users know they're trading data for access, and they resent it. By wrapping the form in a "Guess the Flavour" mechanic, users submitted their details as an act of participation. They were entering a contest, not filling out a form. The framing shift from "sign up for our newsletter" to "think you already know the flavour?" reduced psychological friction significantly.
Business Value :
The form captured essential PII (Name, Email, Phone) and offered social login, building a curated marketing list for the launch.
Mobile and Tablet Experience:
The desktop landscape is a horizontal panorama which doesn't translate to a vertical mobile screen. Rather than shrink it, I rethought the mobile experience from scratch. This preserved the immersion of the desktop while making the mobile experience feel native rather than compromised.
Traditional lead gen forms have a clear problem: they feel like a toll gate. Users know they're trading data for access, and they resent it. By wrapping the form in a "Guess the Flavour" mechanic, users submitted their details as an act of participation. They were entering a contest, not filling out a form. The framing shift from "sign up for our newsletter" to "think you already know the flavour?" reduced psychological friction significantly.
Business Value :
The form captured essential PII (Name, Email, Phone) and offered social login, building a curated marketing list for the launch.
OUTCOME & IMPACT
The campaign ran for several weeks leading up to the November 2023 reveal. Across the campaign period:
The campaign ran for several weeks leading up to the November 2023 reveal. Across the campaign period:
The campaign ran for several weeks leading up to the November 2023 reveal. Across the campaign period:
3X
3X
Repeat visits driven by timed clue unlock schedule — users returned on three distinct occasions before launch day
Repeat visits driven by timed clue unlock schedule — users returned on three distinct occasions before launch day
PII
PII
High-quality lead list built (Name, Email, Phone) via gamified entry — users participated in a contest, not a form
High-quality lead list built (Name, Email, Phone) via gamified entry — users participated in a contest, not a form
WHAT I LEARNED
Narrative UI sustains engagement
When the visual environment rewards return visits, you don't need to manufacture reasons to come back, the design does the work.Sole ownership is a skill in itself
Managing the full creative lifecycle, from blank brief to live production, requires a different kind of discipline than traditional handoff-based workflows. I learned to design for implementation, not just for presentation.
Adaptability is a designer’s superpower :
Constraints, feedback, and changing requirements are inevitable - staying flexible turns them into opportunities for better solutionsDesign is never done, it evolves :
Every round of feedback, whether from users or the tech team, deepened my understanding that iteration isn’t rework, it’s refinement toward real impact.
Let’s talk projects, collaborations, or anything design!
Contact
Let’s talk projects, collaborations, or anything design!