Making a team gaming format actually fun to play

WinZo app listing screen
Phone mockup
Congratulations trophy screen
Designers
2 Product Designers, 1 Illustrator & 1 Animator
Platform
Mobile App
Domain
UX, UI & Motion Design
Format
Team Tournament
The Impact
33%

more FTU joining their first game within first 10 seconds

65%

Increase in users contributing their first score

27%

Less users dropped off from the listing screen within first 5 seconds

Introduction

What is World War?

A team-based tournament format where a player joins one of 2 teams, plays a casual game and submits their scores. The team with the higher average score wins, and the prize pool is split equally.

It was the second-highest revenue-generating format. This made us hesitant to change, but when we started expanding to other geographies like Brazil and USA, we saw an opportunity to relook at the full experience

World War warriors illustration
Old Screens
Listing screen
Listing Screen
Team selection screen
Team Selection
Scoreboard screen
Scoreboard
The Problem

Where it broke

The data pointed at two major drop-off points and a steady stream of confused support tickets.

61% 78% TAB ENTRY TOURNAMENT ENTERED FIRST GAME PLAYED
~61% clicked away from the World War tab within an average of 4 seconds, without entering a single tournament.
~78% of those users just watched or navigated away and never played.
Note : Many support tickets said the same thing: a user's team would be winning right until the end, only for the opposition to be declared winner the moment timer stopped.
Primary Research

Where the players were getting stuck

We conducted 24 semi-structured in-depth interviews. Below are the major insights from the study:

1

Misleading mascots

Teams were represented by illustrations of two famous Indian cricket players; Virat Kohli and MS Dhoni.

20 of 24 users expressed that they assumed the game would be cricket-related. When they hit play and a completely different game launched, the experience broke their expectations.

Kohli team card — 1st place Dhoni team card — 2nd place
is the app stuck?
Old scoreboard screen
which team is mine?
2

No Sense of the race

17 users said they couldn't tell if their team was ahead or behind. The scores were 6–7 digits long, making them hard to compare.

3

Scoreboard felt frozen

15 users described it as "stuck" or "frozen". Nothing about the screen communicated that a live competition was happening.

4

Lost on arrival

On arriving at the World War tab, there was no way to understand the format. The "How to Play" button was small and easy to miss.

World War listing tab Game detail screen
Secondary Research

Findings from the internal audit

We audited the whole format within the team to identify obvious design issues.

1

Misuse of semantic colors

Teams were differentiated by red and green: colors that carry negative and positive association. A user in the red team would see a red tinted tournament card even if their team was leading. This was a critical miscommunication.

Green card but 0 winnings? Red card but higher winnings? The color and winnings mismatch happened often and was confusing.

Kohli red team card Dhoni green team card
Is it winning? But the winnings are 0?
Karan Your Team shield Highlighted score badge 5,08,953
Arjun Rival Team shield
2

Unreadable score comparisons

Comparing 6–7 digit scores at a glance takes real cognitive effort. By the time a user understood who was ahead, the moment to act had passed.

3

Ambiguous result

When a tournament ended, the only change on the scoreboard was a small "winner tag" on the relevant team side. Winning and losing were visually indistinguishable.

Users who joined a tournament and navigated elsewhere had no way to know when or how it ended.

During tournament screen During Tournament
Result declared screen Winner badge After Result's Declared
The only change
Slide for before and after results
Result declared screen Winner badge
During tournament screen
The Foundation

Design principles

Every decision that followed was informed by one of these.

Game Theory

Game Theory

In competitive formats, players act on perceived advantage. If users can't immediately read who's winning, they can't make a rational decision to participate.

Don't make them think

Don't make them think

Less thinking, more acting. The listing, team selection, and scoreboard were redesigned so the questions like "Are we winning?" "Should I play?" were answered without effort.

Learning by Doing

Learning by Doing

Static tutorials and "How to Play" buttons have near-zero retention. The most effective way to teach a format is to move users through it with the right nudge at the right moment.

Live Feedback

Live Feedback

Every action needs a visible consequence. When actions have no reaction, users disengage. When they see their score affect the outcome, they are more likely to come back.

Brainstorming

Everything, everywhere, all at once

Once we understood the problem, we brainstormed freely. 20+ ideas across four areas: identity, live feel, onboarding, and score readability. Not all of them were good, but they helped us explore options before deciding what to actually build.

A — Color & Team Identity
Swap red & green for neutral colours: neither should imply winning or losing
Replace cricket mascots with fictional characters unrelated to any sport
Animate mascots: they visually react when your team takes the lead
Remove mascots entirely: go text + a colour block only
Give each team a distinct audio identity: sound cue when you join
Let users pick their own team colour from a palette
Add a disclaimer on the card: "This is NOT a cricket game"
B — Scoreboard & Live Feel
Bar height = team average. Readable at a glance
Show score difference prominently: "Your team is ahead by xx."
Score animates to new value when a teammate submits
"Your team just took the lead!" banner fades in and out
Scrolling live ticker at the bottom: like a sports broadcast
Confetti burst when your team overtakes the opponent
Pulsing glow animation on whichever team's bar is leading
Mini player avatars pop in on screen as teammates submit scores
Two racing cars on a track: car position = who is currently winning
C — Cold Start & Onboarding
Free entry for the first tournament: remove the financial risk entirely
Tutorial embedded inside the first game, not before it
Urgency copy on the listing card: "Timer running. Join now."
Social proof on the listing card: xx players active right now
Mascot character physically walks the user through each step
Force a pre-game video explainer before the user can enter
Progressive disclosure: reveal one rule per step as the user hits it
Ghost tournament: a fake round with no stakes before the first real game
D — Score Readability
Abbreviate long scores: show 40K instead of 40,000
Show rank within team instead of raw score: "You're #2 on your team"
Circular progress ring: score shown as % of the average needed to win
Emoji intensity scale next to the score: 🔥🔥
Colour the score label green or red based on team's current standing, separate from team colour
Shipped Influenced Explored
Bar chart reference
Analytics dashboard reference
Football live scoreboard reference
App leaderboard reference
Inspirations for the scoreboard
User Flow

Smoothening the kinks

Old Flow
Start
Listing Screen
Joins a tournament
Team Selection
Selects a team
Live Scoreboard
Plays a Game
Game Server
Game Over → Live Scoreboard
Tournament time-up
Live Scoreboard winner
New Flow
Start
First Time User
Tutorial
Listing Screen
Joins a tournament
Team Selection
Selects a team
Team card Morphs into bar graph
Live Scoreboard
Plays a Game
Game Server
Game over
User score goes into bar graph
Tournament time-up
Winning Animation
Losing Animation
Solution

The improved experience

Team Cards

01
Kohli team card — old Dhoni team card — old
Before
Aqua team card — new Volt team card — new
After
  • Red and green gave false signals
  • “User winning” did not stand out
  • Cyan & Yellow removed the false signal
  • Improved info. hierarchy for quicker decisions

Listing Screen

02
Original listing screen
Original Baseline
Redesign 1.0 listing screen
Redesign 1.0 +40% dropoffs
Redesign 2.0 listing screen
Redesign 2.0 +1.5% first gameplays from baseline
  • No mention of format type
  • Repetitive tags
  • Added a visual to portray team format
  • Users dropped further by ~40%
  • Refined original design
  • A/B tested both, and this design won

Scoreboard

03

The scoreboard is where users spend the majority of tournament time. It's where the race should be felt, and where the format either clicks or doesn't.

Making the race felt
Before — old scoreboard Before
Design iterations Iterations
Final Design — new bar graph scoreboard Final Design
  • Static Scoreboard
  • Red/Green Teams confused with red/green scores
  • Hard to decipher ahead/behind
  • Initially focused on UI improvement
  • Pivoted towards “race” inspired visualisations
  • Final design inspired by simple data viz. (bar graphs)
  • Enhanced the “face-off” feeling
  • Designed micro-animations to make the screen feel alive
  • Bar Graph inspired re-design made it instantly readable
  • Enhanced the face-off feeling
  • Added animations to make it feel alive
Using motion to educate
Phone mockup
Card to Bar Morph
Phone mockup
User's Score Contribution
  • Abrupt screen change → Smooth morph
  • Reduced uncertainty & natural education
  • Users could tell which team was theirs and built a habit of always looking at the left side of scoreboard screen.
  • User’s score visually contributes to team’s bar graph
  • The contribution is felt, not just recorded.
  • Replaced the abrupt screen change with a smooth morph
  • User’s score visibly feeds their team’s bar graph

Winning & Losing

04
Phone mockup
Winning Overlay
Phone mockup
Losing Overlay
  • Unnoticeable result → Real Closure with exciting animation
  • Final individual winnings clearly called out
  • Losing also deserved equal importance
  • No ambiguity about what happened.

Guided Tutorial

05

The 61% drop-off wasn’t a design problem — it was a comprehension problem. Games like Candy Crush and Royal Match have solved this consistently: don’t explain, just move users through it. So we designed a four-step interactive tutorial built into the first tournament for a new user encounters.

World War tournament introduction screen Tournament listing with free entry highlighted

Remove the barrier to entry.

The tutorial tournament is free. No entry fee, no risk. A micro-animation pulses on the “Free” entry button. Timer creates mild urgency.

Pick a team screen with two mascot cards facing off Your team confirmation screen

Introduce the face-off.

The team selection cards are designed so the two mascots face each other. Competitiveness is communicated visually before a word is read.

Live scoreboard with team bars Scoreboard with pulsing Play Now nudge

The nudge to play.

A pulsing highlight draws attention to the “Play Now” button with a single line of copy: “Play now to help your team win”. The connection between user’s contribution in team outcome is made explicit through the nudge.

Score badge merging into the team bar Congratulations and winnings screen

The contribution made visible.

After the user submits their first score, the number appears at the centre of the screen and merges into their team’s bar. The bar grows. The user sees, in real time, that they made an impact. The format is now understood because it was experienced.

Full tutorial phone mockup
Full Tutorial Video
Research

Impact

Measured over a 60-day evaluation period following full rollout.

Listing screen drop-off
60% 44%
27%
Payment success on first game
39% 52%
33%
New users who contributed their first score
30% 50%
65%
Avg. CS queries about unexpected results per month
286 208
27%
User retention (Avg. time spent on scoreboard screen per game, in a month)
20sec → 1 minute
200%
In retrospect

Reflections

Learnings we took away from the project and things we could have done better.

Loop in engineering before the design is locked

We only learned about constraints on the tower size change after handoff, so we had to rework assets to fit the new implementation without losing design intent. It cost us time we could have saved by bringing tech into the conversation earlier. Now we treat early engineering input as part of the design process, not a step that comes after it.

Design for the lowest-end device, not the best one

We leaned into gradient-heavy, dynamic animations to make winning feel rewarding, but they didn't hold up in production on lower-end devices. We ended up shipping no-gradient versions that kept the same emotional payoff while performing reliably for everyone. Performance is part of the experience, not a trade-off against it.

More information ≠ Better Design

Users told us they skipped games because they didn't understand the format, so we added detail to the listing, and the new version actually performed worse. It was a reminder that user feedback points to a problem, not always the solution. Now we take their input seriously but dig into the root cause before designing around it.

Punchier tutorial because our users hate to read

The tutorial was useful but too long for a user base with a short attention span and a desire to jump straight into their first real game. The goal is a shorter flow with punchier copy at each step, so users grasp the value of the format fast without wading through text. Brevity here isn't about cutting content; it's about respecting how people actually use the app.

Thank you for reading! Project by Kartik Goel & Manorama Chauhan