Designing Watch’NPlay
From passive viewers to active players — how did we make VIVO IPL a more intense and engrossing experience? Watch’NPlay is a game that runs under the video stream and lets the viewer engage with the match in a way that no cricket experience has done before.
Here’s what you have to do.
While watching the match, choose what you think will happen on the next ball, and wait for the result. Get it right, win points, redeem prizes with them. All this happens in real time.
The Why
We asked ourselves, “How can we bring the stadium experience home?” What would it take to bring you a little closer to the intense VIVO IPL action?
Watch’NPlay appeals to the inner “guru” in us cricket fans. Calculating the course of a match is like a superpower, and we want you to use that power at will!
Crafting the Experience
We had only three months to develop Watch’NPlay from start to end. Time really was of the essence here. We needed to build a prototype using our intuition and then stress-test it for faults. Done is better than perfect.
Instead of a traditional design process starting with research, we took a different approach with three stages and two guiding principles.
The Guiding Principles
Before commencing the design process, we agreed on two principles to act as guiding lights:
The Match is the Hero
It’s easy to pile on features, but takes restraint to keep only those that are meaningful. We constantly reminded ourselves that Watch’NPlay should not distract from the match, but help you enjoy it even more.
This helped us keep the game simple, and made sure we didn’t include superfluous features.
Attention is Currency
We asked ourselves, “How can the player play without taking their eyes off the match?” Every decision that asks for your attention has to be carefully weighed to make it worth that quick glance at the game.
This got us thinking about how the game could be played in the peripheral vision of your eyes.
The Build Stage
With these principles in mind, we started fleshing out the flows and UI. The idea was not to come up with the perfect design in a single shot, but one that was solid enough to be stress-tested in the stage after Build — the Test stage.
We had to consider that the game could be played for every ball of the whole T20 match — potentially 120 balls, and around 4 hours — of playing along. The UI had to be muscle memory friendly and require as little attention as possible. These are a few of the considerations we made.
Horizontal Options and Iconic Graphics
Choosing a horizontal layout meant that the options would be at an equal distance below the video stream, letting all three be present in your peripheral vision.
Going for large, graphically distinct icons lets you discern the options without having to look at them every time. You could notice them with just your peripheral vision. Colour, shape, and size — three visual fundamentals that go a long way.
We also wanted these to be a signature microinteraction for the game, letting them brand Watch’NPlay in an iconic way.
A Super Clear Timer
We designed a timer that doesn’t need you to directly look at it. A wide, breadth-spanning timer intuitively shows you how long you have left before the question locks up.
States Rich in Visual Information
We wanted every state to be easily discernible in your peripheral vision. We made visually clear states for “answer selected” and “time’s up”. All this while, we kept the user’s mental and emotional state in mind.
Other Considerations
- Giving a clear sense of progress and showing the next prize
- Easy access to prizes and leaderboards
- Making sure that it’s super easy to switch to another tab in case the game doesn’t suit your fancy
- Making the match stream more immersive in portrait mode
- Show a mini scorecard to give you context
- Landscape mode
- Many, many other little considerations that ensured a good user experience
The Test Stage
After working with developers to get a basic prototype ready, we called in folks from around the office to take some time out and play the game in front of us.
It’s one thing to design an experience, but it’s another to experience the design.
Working closely with the product tends to give one tunnel vision, so it helps to step back and let a fresh pair of eyes have a look. Watching people play the game with a match running was an eye-opening experience.
People had interesting things to say.
We organised the feedback and brainstormed over the most pressing problems.
The “Test” stage didn’t just show us where we could improve the game experience, but, even validated many decisions from the “Build” stage. This leads us to the final stage — “Refine”.
The Refine Stage
With the new knowledge gained from the Test stage, we took a fresh take on the design from the Build stage. Once VIVO IPL commenced, we always had one eye on analytics data to observe any usage patterns.
As the tournament progressed, we added valuable features to the game, including a feed layout that exposed more information, animations that celebrated the right answers and cheered you up for the wrong ones.
The Power of a Billion Cricket Fans
VIVO IPL 2018 was a special one for Hotstar.
We broke the world record for the maximum number of concurrent video viewers at 10.3 million concurrent viewers towards the end of the final match. We also made our first foray into the brave new world of live stream play-along gaming with Watch’NPlay. Building this game at the scale of VIVO IPL was a stellar effort from the engineering team — kudos to them!
Having an army of cricket fans allowed us to freely experiment and understand our audience better.
Watch’NPlay players spent ~3x the amount of time watching the match than the non-players did
Prizes worth crores of rupees were given out to the winners, including 60 Mahindra KUV NXT100 cars.
Thank you, India
We’d like to thank the millions of players for participating in and validating this giant experiment. Rest assured, we’re always figuring out new ways to engage and enthral the legions of sports fans, leading to exciting new frontiers in the world of live streaming.
