Match Detail 2.0 — a video-first conversion engine

Rebuilding the most visited page on FanCode

FanCode 2.0 was a platform-wide commitment to the video-first vision — leveraging the core moat of exclusive live sports rights, cutting operational overhead from secondary initiatives, and creating a consistent, sport-specific discovery experience that uses AI-led thinking and storytelling to drive users toward premium video. The Match Detail Page (MDP) is where that vision had to land hardest: it's the surface where fans watch, check scores, follow squads — and decide whether to pay.

High-intent fans were consuming everything except video

The old MDP failed to leverage FanCode's video-first positioning. A significant cohort of regular visitors — especially repeat non-transactors — consumed peripheral content like scores and commentary without ever engaging with the premium video offering. The page made them derive match context themselves, never communicated the PPV model, and gave marketing nothing to work with.

Three rules every unit on the page obeys

Before any screen was drawn, we agreed the principles that would arbitrate every layout debate. Each one is a testable rule, not a poster slogan — any component that violated one was cut or moved.

Pre match · non-entitled — a closed, focused funnel

Post match — highlights & discovery for everyone

The same page, two opposite postures

Side by side, the philosophy is visible. Pre-match, the non-entitled MDP is deliberately sparse: match identity, an AI-written reason to watch, the marquee players — then LOGIN and GET A PASS. There is nowhere else to go.

The moment the match completes, the page inverts: highlights up top, match moments, a contextual tour upsell, related videos, similar tours and more live matches. Discovery isn't a distraction any more — it is the next conversion.

• Pre & live: zero discovery units for non-entitled users
• Post match: highlights surface regardless of entitlement
• Upsells appear in context, never as interstitials

One page. Every user. Every moment.

The MDP had to serve a casual fan three minutes into a free trial and a subscriber catching up post-race — without becoming two different products. Every combination of user entitlement (non-logged-in, logged-in non-entitled, match pass, tour pass, subscription, free match, expired) and match phase (pre, live, stumps, delayed, post) was mapped before visual design began.

Pre match

Live · free trial running

Live · free trial ended

Full MDP scroll — moments & discovery unlocked as the match closes

The free trial is the sharpest conversion mechanic on the page: the video starts playing immediately with a visible countdown ("Free Trial 02:59"), so the user experiences the product before being asked to pay. When the trial ends, the message is match-aware — "BR needs 40 runs to win — Get a Pass to continue watching" — urgency drawn from the live game itself, not a generic paywall.

The cricket state matrix — final UI for every entitlement (non-logged-in · logged-in non-entitled · entitled · free match · renewals/expired) across every phase (pre stream · during match · stumps · match delayed/abandoned · after match). This grid was the engineering spec.

Storytelling, generated — "Death Overs Incoming!"

The centrepiece of the conversion-first MDP is the AI summary unit — a glowing block that tells a fan, in one persuasive line, why this match is worth their money right now. It replaces the old expectation that users would derive context from scorecards and commentary on their own.

Designed to degrade gracefully

An AI unit that sometimes has nothing to say can't just vanish — that trains users to ignore it. Every combination of AI text and squad availability was designed as an explicit case, so the block always feels intentional.

• Text + squads — full glowing unit with top players strip
• Text only — copy carries the unit, players row hidden
• Squads only — "Top Players" empty state with headshots
• Neither — the unit yields its slot, no skeleton left behind

The first-time appearance animates in with a glowing border and typewriter text; refreshes are deliberately quieter so live updates inform rather than interrupt.

AI block case matrix — four availability cases (AI text × squad data) and the design each resolves to.

Making PPV the headline, not the footnote

FanCode's differentiation is that you don't need a subscription — you can buy just this match. The payment listing leads with that: a ₹25 match pass at the top of the ladder, the tour pass next, and unlimited passes presented as the value upgrade, never the default. The free-trial countdown follows the user into the listing so the urgency carries through checkout.

Payment listing · trial countdown carried over

Logged-in · full listing with offers & price breakup

A pass ladder built for quick decisions

The listing stacks options by commitment: Match Pass (₹25) → Tour Pass (₹79) → Monthly (₹199) → Yearly (₹999, "Save 50%"). The selected pass and price stay pinned in the CONTINUE bar, so the user always knows exactly what they're buying.

• Match name in the header — context never lost
• DreamCoins balance and coupons surfaced inline
• Price breakup visible before checkout, no surprises
• "Know more" accordions for each pass — transparency over fine print
• Promo trays (event banners, tour rails) are CMS-driven for marketing's event-led campaigns

Landscape, sheets and four sports

The same principles had to survive fullscreen playback and radically different sports data. In landscape, the free-trial countdown and GET A PASS stay pinned — conversion never leaves the screen. Sport-specific detail lives in bottom sheets (scorecard, squads, standings, race results) so the video-first surface stays identical across sports.

Fullscreen · free trial — the trial countdown and "Get a Pass" persist in the top-left, even with controls dismissed.

Fullscreen · other live matches — an in-player rail lets entitled fans hop between live games without leaving the video.

Football · standings sheet

Formula 1 · post-race results sheet

Three entitled states, one coherent design

Entitled users arrive via three paths — Match Pass, Tour Pass or Subscription — and each unlocks slightly different affordances handled by one flexible component system. A match-pass holder watching a great game is also the best prospect for a tour pass, so the upgrade unit ("Watch Full Tour at just ₹99") sits in the post-match flow, where the value has just been felt.

Entitled · Match Pass — pre match, live, match completed and moments states. The contextual "Watch Full Tour" upgrade appears only after the user has consumed value, never as a blocker.

A sharper funnel, a configurable surface

MDP 2.0 shipped as part of the FC 2.0 platform transformation, with the funnel — match detail → payment listing → order success — as its north-star metric. Beyond conversion, it consolidated fragmented sport-specific layouts into one maintained system and handed marketing a CMS-configurable promotional surface.

What this project taught me