Britannia BourbonIt
An AI tool that lets customers generate their own Bourbon recipe
goal
Establishing Bourbon as a staple dessert ingredient in Indian homes.
my role
Owned UI/UX for all Britannia projects
Project Scoping, Flow Mapping
Stakeholder Mgmt
Motion design
UI
team
Christopher Gibbs, UI/UX
Kushani Waghela, UI
1 PM, 1 Front End Lead and 1 Back End Lead
note: Bourbonit = BBIT
5050 Chief SELECTOR = 5050CS
The design
0.3
BourbonIt Flow
> impact
This project was so successful it was extended to a year. A second phase is in the works.
New recipes cooked by
30,000+ users
Completion Rate
75%
Localised in
6 languages
> context
Britannia needs restaging as the original, classic Bourbon among all the dupes
Britannia launched Bourbon in 1955.
With extensive marketing strategies, BOGOs and discounts, new copycat Bourbon dupes are breaching into our shelf space.
We need to establish Britannia's Bourbon as irreplaceable in quality and flavor among the competitors.
This was a long term goal, and we had a long term plan for it.
BourbonIt was one step in this plan.
* Ask me about the other steps, too. I worked on them.
> the problem
Oreo?
Biscoff?
?
Bourbon's flavors are optimal for a unique, yummy dessert. Bourbon barfi, Bourbon truffles, Bourbon kheer, so many possibilites.
Let's make Britannia Bourbon a staple dessert ingredient in Indian homes.
> here's how
AI that creates your deliciously Bourbonised new recipe
Famous recipes often started off with homemakers and chefs tinkering and sharing their creations.
We made that easy for our customers with BourbonIt.
AI
1.1
Bourbonise your recipe with AI
Users decide the recipe they want to bourbonise. AI adds the Bourbon twist.
1.2
Cook it. Click it.
Cooks try their dish and return to share it to get recognition from a celeb chef.
The target users
tier 2 cities + kirana store shoppers
A primary user base of Britannia interactive products, these users are generally not tech-savvy.
They require clear affordances and instructions.
home+professional cooks
Users that are interested in the recipes and are looking for the potential attention their recipes get.
We want to encourage them to return.
> the first flow
Bourbonising your recipe
hotspots
2.0
BourbonIt Generation Flow
> highlight 1.0: purchase authentication
To enter, you needed a biscuit pack
Users of both tools could only access it by proving their purchase with a unique code.
3.0
5050CS and BBIt Authentication
Then, people came up with creative hacks (⌐■_■) to bypass authentication
Ripping off codes from supermarkets, editing codes, they tried everything to get in(and it worked).
Meanwhile, genuine customers were wondering why we were saying their packs were already used :(
3.1
Cashback hack tips on Youtube
3.1
Cashback hack tips on Youtube
3.2
Daily Limit Error State
We successfully cut hacks down to 0 by limiting daily entries to 5
? We first suggested printing the unique code inside the pack. The packs had already been printed, however.
4.0
Error States
We accounted for every error state
Like the victims of the hacks, 5050CS users emailed us many complaints. I realised that our users required hyperspecific details in their error states, or they were agitated.
We mapped each and every possible error state detail. No chance for obscurity here.
> highlight 2.0: the dashboard
Over the course of 5050CS, I realised that, sometimes, users left halfway through.
When users came back, they expected to continue where they left.
So we made a dashboard that took them there.
5.0
The Dashboard
< we mapped the key checkpoints
Scanned their code and dropped off
Generated recipes but didn't select recipe
Selected recipe but didn't get cashback
Completed first flow; have to cook+click it
↓ Click on any section of the mobile screen to learn more about it
Or, just click anywhere to see everything
The unused codes
I fixed these on top, grouped together, as users didn't care about what code it was, just that it was unused and could be redeemed
I initially planned to keep this sticky at the bottom, but it occupied extensive space. Keeping it scrollable at the top gave it the same exposure.
5.1
Key Checkpoints
NNN
We're just three dividers
> highlight 4.0: recipe regeneration
Sometimes, the AI model messed up or included ingredients users might not have
Which is why we implemented regeneration to let users pick what fit them.
Users should easily compare recipes side by side, but only if they wanted to see a new one.
3.2
Daily Limit Error State
8.0
Recipe Generation Flow
Initially, we simply deleted the older draft, assuming users didn't want it
This did not go well with users, who said they wanted to compare them all and make a choice.
Without comparison - previous recipes lost
Granular regerate edit options X felt tedious
Carousels made comparison difficult
The icon was confusing - it needed copy
The tab layout enabled easier comparison
> the copy
While an AI tool, we didn't want it feeling hyper-technical for our tech unsavvy users, but comfortable and welcoming. Just like a cookbook, actually.
I consulted Schbang's in-house Copywriting team for this.
cookbook instead of dashboard
Ready cook and cooked instead of submitted
detailed instructions with a gif
Recipes instead of drafts
> highlight 4.0: Learning the stakeholders' language
For some of the client-side folks, 5050CS was their first time interacting with product designers.
I spent some time understanding how they articulated their requirements.
Here's an example ↓
7.0
V1, V2, V3
Since Britannia has multiple chains of command, we had to spend time running them through each one, which lagged us. This time, we insisted on showing it to the higher ups directly.
We also gave them multiple options so they realised their own direction. This helped expedite the work.
7.1
The Visual Iterations
I initiated task documentation. This made a huge difference.
Over all the major, overarching feedback the clients gave us, I sometimes missed out on the smaller bits.
This time, I made a simple kanban-esque chart that noted the feedback that was pending, under progress and which needed more clarification, and allotted tasks.
7.2
Crit mapping
During client meetings, this little chart proved to be a lifesaver. My team lead said this >
Great job, Nandini… the client(Prabakaran) is very impressed… he said "I trust you because this really well done, everything is done in detail and you have a great understanding".
Ambika, Team Lead, Schbang
> Motion design
I designed and animated the animations on After Effects
To prevent dropoffs, keep users' attention on screen and give them visual cues, I created simple animations across the flow.
Drawing the design
creating your bourbon recipe
uploading an image of your biscuit design
10.0
Animations
Huge shoutout and thanks to Silas Joe, who helped me understand After Effects workflows and created the first drafts of animations - late at night - when it wasn't even his project.
I was super lucky to have a teammate like him.
> what about the returning users?
Let's keep that for when we chat (-‿◦☀) See you, then.
What's next for BourbonIt?
A large number of users cooked their dish. We had not anticipated so many dishes. Now, we had to share them with the world.
A digital recipe community that shares the creations of 30000+ users is in order.
0.1
Phase 2 Announcement
0.2
A BourbonIt pack at the supermarket
Some things I learned
Give the client options
We gave them two of nearly everything. This saved so much time: Feedback was targeted and allowed clients to identify their own wants.
It's better to ask for a later deadline…
…than agree to an unrealistic one and mess it up completely. Very obvious, I know. But I had to learn it.
I would've liked to meditate more on the motion design
This ended up being an afterthought with our tight timelines, but better motion design could've tied up the project wonderfully.
NEXT >
© 2025 Nandini Vyas. All rights reserved.
Made with love and Oreo milkshake. Don't sue me, I have a family.
