Hulu

Upgrade through your TV

User icon indicating the role I had in the project.
Design lead
Calendar icon with a week highlighted, indicating a timeline for a project
1 month
Checkmark badge icon indication when a project was completed.
Launched August 2018
read more like this ☞

Background

Hulu is a streaming service that since 2008 has offered a variety of ways to watch episodes and full seasons of network TV content, original programming, and a catalogue of shows and movies. The company partnered with content providers like HBO, Starz, Showtime, and Cinemax to offer viewers the ability to view content from these services right in the one interface. Additionally, Hulu had launched a Live TV service in 2017 to allow viewers the ability to expand their own viewing catalog by recording from Live TV channels.

Opportunity

Given the newness of these services on Hulu, nearly all current Hulu subscribers could try them out for up to 30 days to get a feel for how adding them to their monthly subscription might fit with their content consumption habits and cravings.

Given the majority of Hulu viewing took place on Living Room devices (TVs, set top boxes, consoles, etc.) could we help our viewers find new and popular things to watch more easily?

  1. Inform you about popular shows and movies you can watch right in the Hulu app
  2. Make it simple to watch something that piques your interest
  3. Clearly and concisely communicate the long term cost of a new add-on

Research

We wanted to make it easy and transparent to expand viewers’ access to content given these new partnership deals. Since one could purchase content on Living Room devices outside of Hulu I wanted to understand the landscape so I conducted a competitive analysis of purchase experiences. I found fragmented and varied methods for purchases across platforms and devices and rationed that the best experience would be a combination of consistency within the platform while integrating and mirroring platform-specific experiences when possible. For initial launch we limited purchase capability to Roku and devices running a version of our app built on the same codebase (XBOX, FireTV, Samsung TVs, etc.). To simplify learnings the product manager limited scope to subscribers directly billed through Hulu and not a third-party service.

Throughout this project we conducted a comprehension and a usability test to get feedback on the information presented and UI decisions. Since we were launching the feature to a limited number of viewers I hoped to rely on data for metrics we established early on in the project. Additionally we worked closely with our viewer experience team (customer support) to understand any changes in contact volume or specific pain points expressed directly from viewers.

Process

I worked with a product manager and legal to understand the minimum information that would be necessary to display to the user when completing a purchase. Additionally, I worked with our back-end teams to understand the type of information about a subscriber's billing details we would be able to display. I mapped out this information on a whiteboard with the PM to understand how some sample user flows might work. I also wanted to understand what promotions might occur during the lifecycle of the feature to account for cases where we’d need to communicate a lot of complex information to a viewer without overwhelming them.

Once I had a few rough concepts sketched out I tried them out in a little higher fidelity to understand how our artwork-heavy system might play into the experience. I explored transparency and blurs to help keep the focus on the checkout experience. With a couple flows and alternatives put together I ran through critiques with other members of the design team. Additionally I designed some emails that account holders would see after making a purchase to help communicate the transaction in the case of an accidental purchase or confusion about the terms.

Hulu