Delivering an in-depth viewing experience for movies and shows for lots of entertainment brands
In 2017, ViewLift had lots of shiny new sites and apps revolving around Sports content, but its main Entertainment-vertical client—SnagFilms—was a little long in the tooth. Also, its template wasn't very flexible across client business models, and with new types of clients being brought into ViewLift, we needed to make some changes.
SnagFilms is an AVOD (Advertising Video On-Demand) business. Hoichoi, a new SVOD (Subscription Video On-Demand) service needed to use the template but also make sure only subscribers could view the content, start the sign-up flow for unsubscribed viewers, allow for content previews to make sure it was worth the money, and allow users to upgrade/cancel their plans.
Users of this product are a varied group, and a lot depends on the client using this template. For SnagFilms, viewers are mainly looking for Snag's alternative indie films and documentaries, and Hoichoi viewers are interested in Hoichoi's original Films and Series.
There are also other user differences depending on client. Hoichoi is subscriber-based, and much like Netflix, there isn't very much you can do without being a subscriber. You can preview some things, and a handful of things are Free to watch, but most viewers are logged in and subscribed. SnagFilms is an advertising-supported service, and users aren't required to even log in or have an account to view the content, as long as they watch ads before and during the video.
There are a lot of great video experiences in the wild. Netflix, Hulu, YouTube, Vimeo, etc. all offer world class experiences and there is much to learn from them. I am a frequent user of all of them too, so I knew what parts I liked best, and did some informal polling of friends and coworkers to gauge what features people liked and used the most.
Important features to call out early in the research were: surfacing something good to watch next when finished, and a good episodic experience (listing episodes and their descriptions in Shows). We also needed to make sure these features, among the many others, were consistent across all platforms (Web, Devices, TV).
I began with a content inventory for each content type. For example, on a Film object, we have the asset itself, title, year, content rating, runtime, reviews, related films, director, cast, and other metadata.
For Films and Shows (Series), I laid it all out and begin building the initial wireframes, as shown here. Some questions I was working out were "which is more important, the episode list or the description for a show?" and "when is the right time to show related content, as not to lead the viewer away from the current content too soon?"
I created a suite of screen designs across all devices, and spanning pages like Home/Category pages, Film pages, Show pages, and even Audio Player pages. These all live in a cohesive design system we call the Entertainment Template.
The template has a dark theme because the experience of watching movies and shows usually in the living room or in transit where a subdued screen experience is preferred. I also wanted to make sure that the top-notch imagery that video producers tend to have would be highlighted.
The design process for this project was long, but rewarding. You can find the links above to Hoichoi, one of the clients using this template. They are present on the Web, iOS, Android, AppleTV, Roku, and FireTV.
Below are some of the highlights from the design process. Enjoy!
