We wanted to explore a fun, lightweight way to help people discover recently added movies and TV shows on the Netflix mobile phone experience. Taking inspiration from the buzz around Snapchat’s Stories feature, we created a phone-specific, portrait oriented UI to showcase trailers for movies and TV shows that had recently become available.

Besides the details of the experience itself, we spent a lot of time working with our engineering partners to figure out how we could take traditional landscape video and transform it into vertical, portrait video without losing the integrity of the original trailer.

I primarily provided prototyping support for this project.

Prototype Development

With this prototype, we had two primary objectives:

1. Create a high fidelity prototype that would be nearly indistinguishable from the final feature
2. Create a proof-of-concept showcasing all the design details so that our engineers could understand exactly what we wanted them to build

I built the prototypes for this project using vanilla HTML, CSS, and JavaScript running inside of a native wrapper (written in Swift) to give it the appearance of a native iOS app and I worked closely with one of our highly talented motion designers to dial in the transitions between states.

Here’s what the experience looked like when selecting a video from the “Previews” row, which shows the transition from a circle with a logo that represents a given TV show or movie to the full-screen, portrait video:

The challenge with building this prototype was achieving a seamless transition from the circle to the full-screen, portrait video. Here’s the transition slowed down so that you can see how I achieved the final result

I cloned both the circular image and the logo, placed them directly on top of the position of the original image in the row, and then transitioned each piece separately to their final position.

We also had to consider the transition from one video to the next. This could occur at the natural end of the video or it could be initiated by a user action such as swiping from right to left or tapping the logo of another video in the top section of the page. Here’s the transition slowed down so you can see the details:

You can see that the logo of the current video scales down and moves off the left side of the screen, while the logo of the incoming video scales up and moves into position at the left of the screen. Meanwhile, the logo of the video that is offscreen, transitions in from right to left.

Since I was dealing with video, I needed to take performance into consideration. What I ended up doing was adding and removing the video player as needed and then using the first frame of each video as a “poster” that would then crossfade with the video once playback started. I’ve slowed this transition down so that you can see what I’m talking about:

I was working with 20+ videos, so I needed a way to quickly grab the first frame of each video – I ended up using ffmpeg on the command line to do automate this process.

Results

With the implementation of the Previews feature/row, we saw an increase in the titles that our members watched relative to the previews they viewed as well as an in increase in how often customers returned to and used the mobile app (which was a secondary metric that we were tracking).