Britannia 5050
Chief Selector
A canvas enabling you to design the next 5050 biscuit
goal
Engaging Britannia consumers during cricket season
my role
Owned UI/UX for all Britannia projects
Stakeholder Mgmt
Motion design
team
Sumit Binwani, HOD
1 PM, 1 Front End Lead and 1 Back End Lead
Take a sneakpeek of the design
0.3
5050CS Flow
> impact
Impressions
>70 million
Localised in
6 languages
Final designs
60,000
> context
Ravi Shastri is the face of 5050.
Cricket season is nearing.
You know what that means?
Time to engage one of the largest Indian demographics in a competitive environment, all while kicking off a long line of consumer engagement experiences.
PSST. On a side note: I worked on another cricket centered project, too. Ask me about it!
High stakes, 2 weeks, one designer(me). And the scope for many more projects.
This was my, as well as Schbang's first project with Britannia, a starter pack to showcase our strength and establish a long term business partnership.
This project did that, and followed 12+ projects(during my tenure)
> the opportunity
Most biscuits are rectangles, circles, or squares.
A unique shape could be the twist factor 5050 needs to differentiate.
> the idea
A drawing tool that lets you shape the biscuit the way you want
> the flow
Designing a biscuit for the eyes of Ravi Shastri('s AI)
> highlight 1.0: authentication
The scan authentication was the ticket to the experience.
Users could only access the app by proving their purchase with a unique code in their 5050 pack.
3.2
Authentication Flow
I eliminated the need to click "Continue"
I put both the authentication and the submissions options together. This told them: "You're so close to unlocking the experience!"
This screen was key to completion, and I iterated multiple times to make scanning as low-effort as possible.
V1
Manual entry option
Continue button
V2
Scan only
Automatic Advance
View your uploaded image
V3
Scan only
Automatic Advance
No image view - only confirmation
The scan process was too complicated for the tech-unsavvy.
I made a gif to ease them into it
We received 0 questions from users about the complexity of the flow, and the team loved it.
The packet zoom gif is amazing
Agam, back end lead
> highlight 2.0: the two options
Users could use the draw tool, or they could bite into their biscuit and upload it.
Small tweaks made a huge impact here.
I gave visual cues with fun animation
For users that were overwhelmed by tech, I made informative yet engaging animations with After Effects.
I drove draw selection up to 80%
Initially, users were picking the upload option more.
I swapped the drawing tool to the left to curb this.
before
No continue button, again
To cut down friction to the real journey, I removed the Continue CTA so the two options take users directly to the tool.
Are you wondering why there are so many different visual designs among these iterattions? Here's why
> highlight 3.0: Learning the stakeholders' language
For some of the client-side folks, 5050CS was their first time interacting with product designers.
They tried their best to articulate design feedback, but, first, we didn't understand it. Here's an example ↓
When we took their feedback as it was
Decoding their meaning
"Make the header VERYYY LONG"
MAKE THE LOGOS PROMINENT
"Make the background a cricket field"
IT SHOULD BE ALL ABOUT CRICKET
"Add in all the 5050 colours"
KEEP THE BRANDING STRONG
"Keep pictures of Ravi Shastri everywhere"
HIGHLIGHT HIS ROLE AS THE JUDGE
7.0
V1, V2, V3
> highlight 3.0: gamification
Adding an element of competitiveness tied in the spirit of cricket here
We presented Ravi Shastri, being the face of cricket for 5050 CS, as the judge
> Motion design
I designed and animated the animations on After Effects
To prevent dropoffs, keep users' attention on the screen and give them visual cues, I created simple animations across the flow.
Drawing the design
uploading an image of your biscuit design
i also animated for bourbon!
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.
> highlight 4.0: visual design
Our revamped design language guided the branding language
Our initial designs were based on proto-marketing material from the marketing team. However, by the end, our design led the face of marketing.
Playful, cinematic, with hints of cricket motifs
Heading
Rowdies
Body
Cabin
Colors
CTAs
"Border stitching" like a cricket ball
7.0
The AI-generated poster we got in the beginning
7.0
The final visual language
> and appreciation
Special mention - we have covered 50% of the project within a day. Great job Nandini
Ambika, TEAM LEAD
Prabha(client) really liked the designs!
Abhishek, PROJECT MANAGER
Well conceptualised and visualised
Bianca, ACCOUNT MANAGER
How exactly was drawing a biscuit related to cricket?
That's a bit of a secret. But I can share it with you on chat. (｡•̀ᴗ-)✧
Some things I learned
This project had an incredible amount of learnings
Developed my graphic skills exponentially
Learned to build a shared language with stakeholders
Understood the mental models of non-tech savvy users.
And a lot more. I applied these learnings to my next Britannia project: BourbonIt. Check it out here
© 2025 Nandini Vyas. All rights reserved.
Made with the love of design, and cricket.
