← All work

Case study · Tata IPL · Sports · Web & mobile

IPL Fan Experience.

A mobile-first redesign of the Indian Premier League’s website and app, built for fans following live matches.

IPL website home on desktop: blue top navigation with the IPL logo and menu, a large photo of a batter mid-shot with a story headline and Play button, and a live-score strip with Schedule, LIVE score and Match Centre

At a glance

A live-match app rebuilt around what fans do most.

The challenge

Late scores, hard menus, fantasy elsewhere.

Scores lagged during tense moments, a menu-heavy structure hid team pages and stats, fantasy sat in a separate section, and the app had little to offer between matches. Many fans were on budget phones.

What I led

The redesign, from research to handover.

As Senior UX/UI Designer for BCCI, via Tech Mahindra, I ran the research, rebuilt the information architecture and user flows, set the style guide, designed the web and mobile UI, A/B tested key screens and handed over to developers. I worked with BCCI and with the UX, design and development teams.

The outcome
+30%user engagement
+40%mobile traffic

App ratings went up on both stores. Fantasy now lives inside match cards and player profiles, and non-match days have their own content.

MethodsUser interviewsApp store review analysisSession analyticsCompetitor benchmarkingInformation architectureUser flowsStyle guideA/B testingAdaptive design
My role
Senior UX/UI Designer
Client
BCCI (IPL), via Tech Mahindra
Team
UX, design and development teams
Platform
Website, iOS and Android apps
Scope
Research, IA, user flows, wireframes, style guide, UI, A/B testing, adaptive design

Impact

Higher engagement, and more fans arriving on mobile.

+30%

user engagement

+40%

mobile traffic

↑

app ratings on both stores

Context

One tournament, fans with very different levels of cricket knowledge.

The IPL, launched in 2008, draws fans with very different levels of cricket knowledge, from people who track every ball to casual viewers. Match situations change fast, so the app has to keep up in real time while also carrying highlights and other video.

The redesign covered the IPL website and the iOS and Android apps, for BCCI via Tech Mahindra. It was mobile first, built for fans following live matches, with the website following the same structure.

The problem

Scores arrived late, the menus were hard to use, and fantasy lived somewhere else.

The old app felt overwhelming during matches and had little to offer on days without one.

01

Delayed live scores

Fans expect updates the moment something happens. Delays pushed them to other apps.

02

Complex navigation

A menu-heavy structure made team pages, fixtures and player stats hard to find.

03

Disconnected fantasy

Fantasy sat in a separate section, away from the match and player data it depends on.

04

Quiet non-match days

With little content between matches, daily active users dropped sharply.

Redesign goal

A fast, fan-first app: real-time match updates, simpler navigation and fantasy built in.

Business goal

Increase engagement and retention, and drive traffic on both match days and non-match days.

User goal

Fast scores, easy access to match content, and a fantasy experience that works inside the app.

My role

Senior UX/UI designer on the redesign, working with BCCI and with design and development teams.

I took the redesign from research and wireframes through to developer handover. I worked with BCCI on requirements and with the UX, design and development teams to get the design built.

Research

Ran requirement gathering, user interviews, app store review analysis and session analytics.

Structure

Rebuilt the information architecture and user flows around the most frequent fan tasks.

Engagement

Turned research insights into six engagement features for match and non-match days.

Design

Wireframes, style guide and UI for web and mobile, in line with IPL branding.

Testing

A/B tested key screens and used the results to refine them.

Delivery

Adaptive designs for different screen sizes and budget devices, and handover to developers.

Process

Four phases, from empathy to delivery.

01

Empathise

Requirement gatheringResearchAnalytics dataUser interviews
02

Define

Information architectureUser flowsWireframes
03

Design

Style guideUser interfaceA/B testing
04

Deliver

Final UIAdaptive designDeveloper handover

01 · Empathise

Interviews, app store reviews and session data all pointed to the same frustrations.

Discovery started with the existing app, user feedback and analytics. We interviewed fans, read through app store reviews, analysed session data across previous IPL seasons, studied trends in sports app engagement and spoke with stakeholders. The same themes kept coming up: late scores, cluttered layouts and features that were hard to move between.

User interviews

Fans across the range, from die-hard followers to casual viewers.

App store reviews

Complaints and requests in existing ratings.

Session analytics

Behaviour across previous IPL seasons, match days and off days.

Benchmarking

Cricbuzz, ESPNcricinfo and the ICC app.

Key findings

2–3 s

Small delays cost attention.

Even a 2 to 3 second lag in scores during tense moments led to frustration and fans switching apps.

Drop-off

The journey was cluttered.

Fans struggled to reach team pages, upcoming matches and player stats quickly, which led to high drop-off.

Fantasy

Fantasy needed match data in one place.

Fantasy players wanted player performance, stats and suggestions without jumping between apps or screens.

Off days

Engagement fell between matches.

On non-match days the app had little content, and daily active users declined steeply.

Devices

Many fans use budget phones.

A large share of users were on budget devices. Heavy UI and media caused slow loads and occasional crashes.

Identity

Fans wanted to feel closer to their team.

Fans liked short content and game-like interactions, and wanted personalisation and a fan identity inside the app.

Users

Five groups of fans, each using the app differently.

Die-hard fans

Track live scores, player stats and team updates throughout the match, and want real-time data with strong visuals.

Fantasy players

Most active during match hours. Need quick access to player form and live updates to make team decisions.

Casual viewers

Want a simple interface with quick highlights, key moments and the essential match information.

Content followers

Watch interviews, behind-the-scenes video and expert commentary, including on non-match days.

Regional & rural users

Often on budget phones and slow networks. Need a light app, fast loading and local languages.

Benchmark

The old IPL app against three cricket apps, and where the redesign landed.

None of the competitors offered fantasy inside the app, which made it the clearest gap to close. On scores, navigation and performance, the old IPL app trailed all three.

ExperienceIPL beforeCricbuzzESPNcricinfoICC appIPL after
Live score speed✕Delayed✓Real-time✓Real-time✓Real-time✓Real-time
Navigation✕Complex✓Intuitive!Slightly cluttered✓Simple✓Simplified
Fantasy✕Disconnected✕Not available✕Not available✕Not available✓Built in
Visual design!Outdated✓Modern✓Clean✓Minimal✓Rich visuals
Video & highlights!Limited✓Rich content✓Comprehensive✓Available✓Prominent
Budget devices✕Laggy✓Optimised!Medium load✓Smooth✓Light
Personalisation✕None✓Basic!Limited✕None✓Recommendations
Notifications!Limited✓Strong alerts✓Custom alerts!Limited✓Improved

Ratings are my assessment at the time of the redesign.

02 · Define

The structure rebuilt around the four things fans do most.

Fans mostly check live scores, manage fantasy teams, watch highlights and browse stats. The new information architecture puts those first, organises video and news by type and recency, and gives fans something to open on non-match days.

  • Put real-time match data and upcoming schedules first
  • Create clear paths into fantasy
  • Organise video and editorial content by type and recency
  • Give quick access to teams, players and stats
  • Support discovery on non-match days

What the findings asked for

Fast scores Main tasks easy to reach Fantasy next to match and player data Content for non-match days Light on budget phones Personalisation and fan identity

Old vs new structure

BeforeAfter
Home: a cluttered mix of featuresHome: a personalised feed with the live match, news and fantasy
Match CenterMatches: Live, Upcoming and Results tabs
TeamsTeams & Players
Stats, buried in the menuStats, with filters for players, teams and formats
Fantasy, a separate sectionFantasy, built into match cards and player profiles
Videos, hard to findMedia hub: highlights, interviews, behind the scenes, trending
News, a basic listNewsroom: categorised, with match-related news
Menu-heavy navigationBottom navigation, contextual actions and search

Bottom navigation

HomeMatchesFantasyMediaMore

Contextual tabs inside each section (Live, Upcoming and Results under Matches), search, and deep links let fans jump straight to a player, team or match from inside or outside the app. The new structure reduced cognitive load and shortened the time it takes to reach content.

Key decisions

Five decisions, each traced back to a finding.

01

Five-tab bottom navigation

The menu-heavy structure caused drop-off. Home, Matches, Fantasy, Media and More keep the main tasks one tap away.

02

Live score above the navigation

A 2 to 3 second delay was enough to send fans elsewhere, so a live score bar sits just above the bottom navigation.

03

Fantasy inside match cards and player profiles

Fantasy players did not want to switch screens. Player form and stats now sit where they make their picks.

04

Pick your team and player at onboarding

Fans asked for personalisation and a fan identity. Choosing a favourite team and player sets up the home feed and alerts.

05

Light by default

Many fans use budget phones, so screens were designed to load fast and adapt to different devices.

03 · Design

Mobile first, with the website following the same structure.

Onboarding asks fans to choose a favourite team and player, which sets up the home feed. A style guide kept the bold IPL branding consistent across mobile and web.

Onboarding screen: Choose your favourite team carousel on blue with the Sunrisers Hyderabad logo selected, Skip link and Confirm button Onboarding screen: Choose your favourite player with a large photo of Virat Kohli, a row of player avatars and a Confirm button App home feed with a Top Highlights video card, a Magic Moments row and a live score bar above the bottom navigation IPL website home with a featured video story, a curated shorts row, quick links to Fixtures, Points Table, Stats and Teams, and Magic Moments video cards
01 — Onboarding

Choose your favourite team

Fans asked for personalisation and a fan identity. Onboarding starts with a favourite team, which sets up the home feed.

Onboarding screen: Choose your favourite team carousel with the Sunrisers Hyderabad logo selected and a Confirm button
02 — Onboarding

Then your favourite player

Choosing a favourite team and player sets up the home feed and alerts.

Onboarding screen: Choose your favourite player with a photo of Virat Kohli and a row of player avatars
03 — Home

Highlights, with the live score one glance away

The home feed with top highlights, magic moments and the live score bar above the navigation.

App home feed with Top Highlights, Magic Moments and a live score bar above the bottom navigation
04 — Website

The same structure on the web

Website home: a featured story with video, and navigation for Matches, Points Table, Videos, Teams, News, Fantasy and Stats.

IPL website home with a featured video story, quick links and Magic Moments video cards

03 · Design: engagement

Six features to bring fans closer to their teams, on match days and off days.

Interviews and behaviour across previous IPL seasons showed that scores alone would not keep fans coming back. These features answer the research insights on team loyalty, short content, game-like interactions and fan identity.

01

Matchday hype

Pre-match countdowns, team trivia and lineup predictions, with animation that matches the IPL brand.

02

Fan challenges & badges

Daily prediction contests, fantasy mini-leagues, rewards, and badges such as “Super Selector” and “Match Predictor” to bring fans back.

03

Interactive player cards

Tap any player for stats, performance heatmaps and fan polls, and follow them for alerts.

04

Behind the scenes

Exclusive videos, player stories and locker-room moments, aimed at non-match days.

05

Personalised feed & alerts

A home feed shaped by favourite teams, players and recent activity, with alerts for match start, milestones, fantasy tips and player updates.

06

Fan Wall

A moderated space for reactions, memes and match commentary, linked to Instagram Stories and YouTube Shorts.

04 · Deliver

A/B tested, then adapted for different screen sizes.

Key screens were A/B tested. Final designs were adapted for different screen sizes and lighter devices, and handed over to developers.

A/B testingFinal UIAdaptive designDeveloper handover
IPL website home on a tablet: top navigation with Matches, Points Table, Videos, Teams, News, Fantasy and Stats, a featured video story about Rohit Sharma's 76 not out, and a Good Evening row of curated match shorts

The website home adapted for tablet.

Outcomes

What changed after launch.

+30%

user engagement

+40%

mobile traffic

↑

app ratings on both stores

  • Live matches, fantasy and media are one tap away from the bottom navigation.
  • Fantasy now sits inside match cards and player profiles.
  • Non-match days have their own reasons to open the app: behind-the-scenes video, challenges and the Fan Wall.

Learnings

What I took away from designing for a live tournament.

Seconds matter

A 2 to 3 second delay was enough to lose a fan to another app, so the live score bar sits above the navigation.

Plan for the off days

Engagement fell between matches, so non-match days needed their own content and features.

Design for the cheapest phone

Many fans were on budget devices, so keeping screens light became part of the design brief.

Let's build something people love to use.

Open to UX/UI leadership roles, design advice and friendly chats.