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 ☞

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.

ledger showing billing information in a panel that slides out from the right of the TV
Upsell ledger and cover story template for editorial teams


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

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.

in a conference room a laptop sits on a table connected to an overhead document camera observing a paper prototype
Paper prototyping for concept testing
Closeup from a camera showing a research participant pointing to a paper prototype
digital whiteboard with mapping exercise full of sticky notes and screenshots
Cross-departmental workshop I led

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.

wireframe design explorations of a billing ledger
Wireframe explorations of the ledger


early explorations for ledger designs
Visual refinements
design explorations for an exploration hub before purchasing an add-on
Additional North Star and interactive visual explorations

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.

GIF showing a TV screen where a panel 1/3 the size of the screen slides in from the right. The space behind the panel dims
New configurable drawer component for living room devices


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 home page on a TV showing a template for a cover story with specific language blocks to use
Upsell cover story shown with personalization


ledger showing billing information in a panel that slides out from the right of the TV
Living room ledger, designed to communicate all future transactions

Closeup from a camera showing a research participant pointing to a paper prototype
in a conference room a laptop sits on a table connected to an overhead document camera observing a paper prototype
Closeup from a camera showing a research participant pointing to a paper prototype
No items found.
wireframe design explorations of a billing ledger
digital whiteboard with mapping exercise full of sticky notes and screenshots
No items found.
early explorations for ledger designs
GIF showing a TV screen where a panel 1/3 the size of the screen slides in from the right. The space behind the panel dims
No items found.
design explorations for an exploration hub before purchasing an add-on
No items found.
Hulu home page on a TV showing a template for a cover story with specific language blocks to use
ledger showing billing information in a panel that slides out from the right of the TV
No items found.
No items found.