Mobile Previews

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

We spent a lot of time thinking about how we could take traditional landscape video and transform it into vertical, portrait video without losing the integrity of the original trailer. I also worked closely with one of our highly talented motion designers, Michaela W., to dial in animations and transitions between states so that we could present a solid proof-of-concept to our engineering partners.

Glen D. was the lead designer on this effort and I primarily provided prototyping support for this project.

Prototype Development

The prototypes for this project were all built 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.

In the prototype below I’ve optimized for the smooth transition from a circle that represents a given title to the full-screen, portrait video that shows that trailer for that title.

Results

With the implementation of Previews, 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.