Britannia
5050 Chief Selector
A canvas that lets you design the next 5050 biscuit
goal
Engaging Britannia consumers during cricket season
my role
Owned UI and 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.1
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.
5050CS Flow
> 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)
3.0
5050 Chief Selector Flow
> 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.
4.0
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!"
4.1
Two screens to onw
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
4.2
Versions
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.
5.1
Animation
I gave visual cues with fun animation
For users that were overwhelmed by tech, I made informative yet engaging animations with After Effects.
5.2
Swapping
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
5.3
Two options - continue
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. I built us a shared language
They tried their best to articulate design feedback, but, first, we didn't understand it. Over the span of our partnership, I had managed to translate their requirements to design.
Decoding their meaning
"Make the header VERYYY LONG"
"Make the background a cricket field"
"Add in all the 5050 colours"
"Keep pictures of Ravi Shastri everywhere"
6.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
7.0
Gamification
> 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, but these didn't feel right. 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
9.0
The AI-generated poster we got in the beginning
9.1
The final marketing material
> 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
I learned so much here:
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.
