Case study / 01 — OTT · Streaming

One streaming experience, three screens.

End-to-end product design for INDIAFIRST — an OTT video-streaming platform delivering a unified viewing experience across web, mobile, and connected-TV apps.

Role
Product / UI-UX Designer
Platforms
Web · Mobile · Connected TV
Scope
Research → Design System
Type
OTT Streaming Product
0
Platforms
0
Process phases
0
Key decisions
0
Research insights

OVERVIEWA unified viewing experience

INDIAFIRST needed to let users discover, browse, and stream content effortlessly across three very different form factors and input methods — mouse, touch, and TV remote — while maintaining one consistent, scalable design language across all platforms.

THE PROBLEMThree inputs, one brand

What works for a cursor fails for a thumb, and both fail for a remote from ten feet away. Navigation, focus states, typographic scale and content density had to be rethought per platform — without fragmenting the product into three different designs.

MY ROLEOwning UX and UI end-to-end

As Product / UI-UX Designer I owned the experience across web, mobile, and TV — from content-discovery research and information architecture through high-fidelity UI, interactive prototypes and the cross-platform design system.

DESIGN PROCESSFrom research to system

01 Content-discovery research
02 Information architecture
03 Cross-platform user flows
04 Platform-specific wireframes
05 High-fidelity UI
06 Interactive prototypes
07 Cross-platform design system

METHODThe workflow, end to end

01
Step 01
Content-discovery research
02
Step 02
Information architecture
03
Step 03
Cross-platform user flows
04
Step 04
Platform-specific wireframes
05
Step 05
High-fidelity UI
06
Step 06
Interactive prototypes
07
Step 07
Cross-platform design system

KEY DECISIONSWhat made it work

📺

10-foot TV layout

Remote-friendly focus states and generous targets designed for the living room, not ported from desktop.

👆

Touch-first mobile patterns

Swipe-driven browsing and thumb-reachable actions instead of shrunken desktop navigation.

🧩

Reusable content-card system

One component system across all three platforms for visual consistency and faster delivery.

🎬

Content-forward discovery

Layouts that prioritize discovery and continue-watching — getting users to playback in fewer steps.

RESEARCH & INSIGHTSWhat shaped the direction

Before a single screen was drawn, I studied how people actually watch: living-room viewing sessions, remote-navigation patterns, and how discovery behaviour differs between a phone in a queue and a TV after dinner. Competitive teardowns of leading OTT platforms revealed a consistent failure: mobile patterns lazily scaled up to TV.

🛋️

Viewing is contextual

The same user behaves completely differently on the couch versus the commute — one design language, three behaviour models.

🎯

Discovery beats search

Most sessions start with browsing, not typing. The interface had to sell content before users knew what they wanted.

⏱️

Seconds to playback matter

Every extra step between opening the app and pressing play measurably increases abandonment.

WHO IT'S FORDesigning for real people

PRIMARYThe evening browser

Opens the app without a plan, scrolls with a remote from three metres away, and decides based on artwork and a synopsis. Needs big focus states, forgiving navigation and confident recommendations.

SECONDARYThe intentional viewer

Knows exactly what to continue watching. Needs their episode surfaced on the first screen of every device — phone, laptop or TV — with one action to resume.

DESIGN LANGUAGEThe visual system

A dark, cinematic canvas keeps the content the hero: imagery does the talking while UI recedes. A strict type scale holds up at 10-foot distance, focus states glow rather than outline, and one tokenised component library flexes across all three form factors without forking the design.

Dark cinematic theme
10-foot type scale
Focus-glow navigation
Content-first cards
Cross-platform tokens

TESTING & ITERATIONPressure-testing the design

Prototypes were tested on real devices — a TV with an actual remote, not a browser simulating one. Remote-navigation walkthroughs exposed focus traps and dead-ends that never appear with a mouse; each round tightened the traversal order until every screen could be navigated blind.

PROJECT SCREENSInside the design

INDIAFIRST — UI/UX design screen by Vasudev R

Screens scroll automatically — hover to pause

OUTCOMEOne design language, three platforms

The platform shipped with a single scalable design language spanning web, mobile and connected TV — platform-appropriate navigation on every screen, and a component system that keeps future features consistent by default. Detailed metrics available on request.

See more on Behance

KEY LEARNINGSWhat I'd carry forward

01 Design for the input, not the screen size — a remote is not a big thumb.
02 A shared token system is what makes multi-platform consistency survivable.
03 Continue-watching is the most valuable screen in the product; treat it that way.
← Back
All case studies