Turning widescreen trailers into vertical previews

Netflix’s mobile app had a discovery problem: how do you help someone find something new to watch without making it feel like work? We wanted something light and fun that matched how people were already watching short videos on their phones.

Taking cues from the buzz Snapchat Stories was generating, we explored a portrait-oriented, phone-native UI that surfaced trailers for recently added movies and TV shows. The concept was a row of circular thumbnails that expanded into full-screen vertical video when tapped. The bet was that short vertical trailers, opened from a row on the home screen, would make members more aware of Netflix originals and make it easier to find something to watch. Other designers on the team designed the feature; my role was building the prototype.

Reframing the trailers and making the transitions feel native

The feature had two hard problems. The first was visual: how do you take trailers shot and edited for widescreen and reframe them as portrait video without losing what makes them compelling? We spent a lot of time with our engineering partners working out how to crop and reframe the footage while keeping what made each trailer work.

The second was interaction: the transition from a small circular thumbnail to full-screen video had to feel seamless and native.

Building a prototype that looked like the real thing

We had two goals for the prototype: make it high-fidelity enough that it was nearly indistinguishable from a finished product, and make it specific enough that engineers could use it as a direct blueprint for what to build.

I built it in vanilla HTML, CSS, and JavaScript, running inside of a native Swift wrapper to give it the look and feel of a real iOS app. I worked closely with one of our motion designers, tuning every transition in the prototype to their direction.

The launch transition was the hardest piece. When a user taps a circle in the Previews row, the circle needs to expand smoothly into a full-screen portrait video, with no visible cut. I cloned the circular image and the logo, placed the copies over the originals in the row, then animated each piece to its final position. Slowing this down in the prototype made the mechanics visible and reviewable.

The video-to-video transition had to work in three scenarios: the video ends naturally, the user swipes left, or the user taps another title from the top navigation. In each case, the current video’s logo scales down and exits left while the incoming logo scales up into position and the offscreen video slides in from the right. Getting all three of these to feel consistent took careful iteration.

Performance was its own challenge. With 20+ videos in play, I couldn’t keep all of them loaded at once. I added and removed video players as needed, and used the first frame of each video as a static poster image that would crossfade into live playback once it started. To generate those poster frames efficiently across all 20+ videos, I automated the process using ffmpeg on the command line.

The outcome

Previews launched, and streaming of Netflix originals went up, which was what the feature was built to do. Members also watched more titles after viewing a preview, and they returned to the mobile app more often.

Because the prototype looked and behaved like the finished feature before engineering started, the team agreed on the design quickly, and what shipped closely matched it.