An Action-First Movie Page
Rotten Tomatoes Overview Page
The problem and the solution
Problem. Passive consumption: little to tap above the fold, a static information hierarchy, and content that ignored where a movie was in its release lifecycle. People left before trailers, tickets, streaming or reviews.
How do we make a static reference page an interactive decision-making surface?
Solution. A first screen that invites action, with Trailer, Stream, Tickets and Watchlist up top, and modular sections that change as a movie moves through its release lifecycle.
My Role
UI Designer
Timeframe
Early 2023
Platform
Mobile Web / App
Business impact
The page addressed leadership’s concern: more interaction without overwhelming people, faster clarity on available actions, and a reusable pattern for lifecycle-driven surfaces.
Context
By early 2023, the Movie Detail Page was one of the highest-traffic surfaces but underperformed on engagement. People landed, took in a little information, and left without acting. Leadership saw a static reference page, not a decision-making surface.
Design Approach
Two principles: the first screen should invite action, and content should change as a movie moves through its lifecycle.
More to tap above the fold
I raised the number of meaningful, tappable elements on load: Trailer, Stream, Tickets and Watchlist buttons, both critic and audience ratings, and sticky headers.
Content that follows the lifecycle
Below the fold, I defined modular, CMS-driven sections (Where to Watch, Trailers, Movie Details, Reviews) that could be reordered or suppressed. Reviews stayed out of the way until a movie premiered, since there was nothing to review yet.
Scroll as a design tool
As people scrolled, headers collapsed and the primary action updated to likely intent, from Trailer to Stream Now.
Reflection
With more time and instrumentation, I’d test which above-the-fold actions to prioritize, and lifecycle-based personalization.