Case study — Zupee · Real-money gaming · 2021–22

Zupee SuperApp

Consolidating six standalone games into one platform — building the design system underneath it, and the screens on top.

Role
Hands-on Design Lead
Timeline
Nov 2021 – Apr 2022
Platform
Android · Mobile
Focus
Design System · UI · Product
ZUPEE₹1,057
Ludo SupremePlay
All games
CH.01The Context

Six apps. Six identities. One growing business problem.

When I joined the SuperApp initiative, Zupee was running six standalone real-money games — Ludo Supreme Gold, Ludo Ninja, Ludo Turbo, Snakes & Ladders, Choco Crush and Trump Cards. Each game lived in its own app, with its own identity, its own onboarding and its own engineering overhead.

Every new game meant a new app. Every new app meant paying again to acquire users we already had. Engineering was duplicating the same features across six codebases, and without a unified brand there was nothing holding any of it together.

The cost of staying fragmented was compounding.

1
2
3
4
5
6
Z
Six standalone appsOne SuperApp
CH.02The "Before" State

One shell, shipped six times — and six unrelated game worlds.

Every app shared the exact same shell — sign-up, onboarding, lobby, payments, help & support — rebuilt and maintained across six separate codebases. Only the game changed: each had its own branding, board art and rules. That duplication is what made staying fragmented so expensive.

The shared app shell

built & maintained 6×
Shell
Sign-up
shell-signup
Shell
Onboarding
shell-onboarding
Shell
Lobby
shell-lobby
Shell
Payments / wallet
shell-payments

Six unique game worlds

different brand & board per game
Replace
🎮
Collage of the six unique gameboards (one wide image)
assets/boards-collage.png
CH.03The Challenge

A one-line brief, a brand still forming, no room for error.

The brief was essentially "build a SuperApp" — so we shaped the how as a team, while the brand was still being defined and millions of active users depended on the apps we were about to replace.

An open brief

The destination was set; the route was ours to design. We defined the milestones and shaped the work as we went.

Delayed branding

Brand guidelines kept slipping. We needed a way to keep designing and shipping without waiting for the final identity.

Brand → product gap

Marketing branding doesn't automatically translate to screens. The system had to bridge brand intent and real product UI.

Live data migration

Millions of users across six apps had to move into one — without disrupting their experience or their wallet balance.

CH.04The Approach

One platform, shipped across five milestones.

Rather than building a new app from scratch, we transformed our most popular, revenue-generating game — Ludo Supreme Gold — into the flagship SuperApp. That kept existing engagement intact while we brought all six games under one roof, phased across five internal milestones.

M1Engineering

Technical foundation

Pure engineering release with no UI — validating that the underlying platform could carry the consolidation.

M2Design enters

Design enters — the Ludo pilot

Kept the Ludo Supreme UI but rebuilt the structure for the SuperApp — introduced the Zupee brand, and folded Ludo Ninja and Ludo Turbo into the app as "Ludo Supreme, powered by Zupee."

M3Engineering

Platform build-out

An engineering release — the platform built out from the locked-down designs, in parallel.

M4Engineering

Build-out, continued

A second engineering release, extending the platform toward the final delivery.

M5Delivery

Final SuperApp delivery

The complete design system and the shipped SuperApp — all six games unified under one branded experience.

Milestone 2 · Design enters

Introducing the brand without losing the familiar.

We introduced the Zupee brand on the flagship Ludo Supreme app and folded in two more Ludo games — Ninja and Turbo — as a pilot for the SuperApp, keeping the look close to the original so existing players never felt lost.

Screen
Intro / sign-up
m2-intro
Screen
Onboarding
m2-onboarding
Screen
Home · auto-scroll
m2-home
Screen
Tournament lobby
m2-lobby
Constraint as a tool

Designing in black & white to keep moving.

With brand guidelines still in flux, waiting wasn't an option. We designed the entire app in a deliberate black-and-white scheme — locking down layout, hierarchy and interaction so engineering could build in parallel, and the full styling layer (colour, type, illustration, brand) could be applied later without rework.

No brand yet — the constraint forced the structure to be right first.

B&W
Screen 1
bw-1
B&W
Screen 2
bw-2
B&W
Screen 3
bw-3
B&W
Screen 4
bw-4
B&W
Screen 5
bw-5
B&W
Screen 6
bw-6
B&W
Screen 7
bw-7
B&W
Screen 8
bw-8
The brand arrives

A bold, playful identity — and a plan to put it on screen.

When the brand landed, the direction was clear: a delightful yellow universe anchored by a bold statement purple — with type, illustration and motion carrying the energy and play. My job was translating that whole identity into a system the product could actually use.

Replace
🎨
Brand overview board — logo, OOH, merch, campaigns
assets/brand-board.png
CH.05The Design System

The system everything was built from.

A SuperApp is only as fast as the system underneath it. I led Zupee's design system from the ground up — the foundations, components, icons and governance that let one team design and ship across six games without drifting out of sync.

Foundations

Styles & scale

Colour and type as shared styles, with a consistent scale for spacing, radius and elevation — one source of truth.

8-step type scale × 2 weights · English + Hindi
Components

A library that scaled

Buttons, cards, game tiles, table rows, wallet modules, navigation — flexible components with variants and states, so new screens were assembled, not redrawn.

100+ components · every variant & state
Iconography

A unified icon set

A consistent icon library spanning navigation, game formats, wallet and system states — one visual voice across every surface.

200+ icons · one unified set
Governance

Adoption is the real work

Building the system was the easy half. I maintained it, documented usage, and made it adoptable so the whole team shipped from the same library — consistently, at speed.

Adopted across the team & all 6 games
Brand meets product

Finding how far to push the brand on real screens.

With the styles and scale in place, applying the new brand was the easy part. The exploration was judgment: how much colour, how much game art, how much energy before the lobby stopped feeling usable. We tested variations of the same screen against the new identity.

V1
Exploration A
m4-1
V2
Exploration B
m4-2
V3
Exploration C
m4-3
V4
Exploration D
m4-4
Milestone 5 · Delivered

The SuperApp, shipped.

Six months of iteration, brand alignment and cross-team collaboration — landing as one fully branded platform: onboarding, a unified games lobby, live game tables and a consolidated wallet, all built from the system.

Final
Screen 1
final-1
Final
Screen 2
final-2
Final
Screen 3
final-3
Final
Screen 4
final-4
Final
Screen 5
final-5
Final
Screen 6
final-6
Final
Screen 7
final-7
Final
Screen 8
final-8
Final
Screen 9
final-9
Final
Screen 10
final-10
CH.06The Impact

Six apps became one — and the business grew on it.

The SuperApp gave Zupee one platform to grow on instead of six to maintain — one app, one brand, built from one system.

6 → 1
Standalone apps unified into one platform
150M+
Lifetime downloads of the Zupee app
3
Major brand campaigns the unified system has carried
CH.07Key Takeaways

What building this taught me.

01

Start before you're asked.

The best calls happened because we started shaping the SuperApp ourselves, instead of waiting for a detailed spec.

02

Constraints are a design tool.

Designing in black and white first forced the structure to be right, and made the brand layer a swap — not a rebuild.

03

Scale changes every decision.

Every choice carries weight when millions of users are on the other side of it. The system existed to protect that.

04

A system is only as good as its adoption.

The library was the easy part. Making it usable by everyone, every day, was the real work.

Next project ShopDeck storefront system