Enabling living room purchases

Summary

Hulu enables viewers to add content sources to search, browse, and watch a wide variety of content in one interface. We wanted to make it painless to augment a plan through TVs and streaming boxes.

Role & Activities

Working with another designer I took the lead on the design of this feature. I worked closely with a product manager, technical program manger, and living room developers to make this feature a reality.

Facilitating workshops
User testing
Wireframing
Visual Design
Strategy

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.

I wanted to get some early feedback on the information hierarchy and general process so with another designer I conducted some early comprehension tests with a few in-person participants. Using paper printouts these tests allowed us to get some basic information around expectations and how people processed the information quickly before building a larger scale prototype.

Working with a product manager and design manager I set up a workshop identifying pain points in a proposed purchase flow. Together with the project stakeholders we mapped out the more conservative approach coupled with a future approach. Using the feedback received from participants we mapped out pain points, questions, and information needs at each point of the purchase experience.

Using these learnings I iterated further on the way the information manifested itself in the interface. In order to maintain flexibility I worked with client developers to build one template that could scale for a variety of purchase scenarios while maintaining reliability and visually appealing typography. These explorations led to the creation of a ledger system and a reusable base component I designed for maximum flexibility.

Building the reusable component

Because I regularly communicated with other designers and pms, I identified an opportunity to build a reusable component that could satisfy the needs of this project along with others in progress. This simple panel would slide out from the right and could be surfaced at a z-index above any current page in the Hulu app on LR devices. This component would mirror some native functionality on Roku devices but building a custom version allied us to create something that would satisfy a variety of use cases across platforms regardless of natvie components.

This template would later go on to serve as the basis for information in in-app upsells, an overflow menu on details pages, and a way to surface episodic metadata in the app’s Live Guide.

Outcome

This new feature for living room devices enables viewers to make upgrades to their Hulu subscription and take advantage of free trials. I also created a cover story template for On-Channel marketing to campaign plan and network upgrades to viewers. The project taught me about technical limitations of some mass market devices as well as how Hulu’s billing and promo systems function. Within a month of launch, this feature drove direct purchases in the hundreds of thousands of subscribers via the cover story system I had designed as well as the ledger’s use in search.