Overview

Cablestakes will improve the 2.9M subscribers using Hulu’s Live TV product by adding critical recording and DVR capabilities. This project consist areas around Recording, Manage DVR, and content browsing.

This project will focus on re-thinking Hulu’s Manage DVR. This will give users the ability to easily browse their recordings as well as manage them by selecting and deleting multiple recordings in their DVR.

ROLE

• Product Designer

Company

• Hulu

Introduction

The Team

I was 1 of 2 Living Room Designers on the team. Collaborated with 4 other designers on the project, UX copy writer, UX Research, Platform team, Product Manager, TPMs, front/back-end developers.

Identifying Problems

• Confusions on how to manage DVR, to the overall lack of capabilities that users have requested and expect.

• Manage DVR lack clarity in action and purpose and the ability to scale support for the variety of content and management actions Hulu utilizes.

How might we give users more control and confidence of their Recordings and DVR space?

Focus Areas

The Cablestakes initiative is a prioritized set of key live and DVR features that will ensure the Hulu product offering continues to drive revenue and subscriber acquisition.

The following features I owned/lead, grouped by theme:

• Multi Select / Bulk Delete - Easily select and delete multiple recordings in Manage DVR

• Grouping by Content - Recordings would be grouped by how users originally set them to record. Easier to browse DVR recordings in groupings that have logical and intuitive hierarchies, such as by series or team.

Design Tenets

In the beginning, thinking about how we wanted to re-design for Manage DVR we aligned on goals and rules before starting the project.

• Actions are simple and intuitive: A good UI is one that prioritizes ease of use as defined by clarity, simplicity and fluidity. The design is easy to understand, what happens after each button press is predictable.

• Users are in control: Give users the tools to allow them to invest in the management of their content.

• Optimized and adaptable: We refine our experiences for each platform and lean into devices capabilities for the benefit of viewers and our business.

Investigation

Competitive Analysis

In order to have a better understanding of the primary confusion around Manage DVR and the overall lack of capabilities. We did a deep dive into how other streaming services handle their DVR / Recordings. We discussed key insights into the types of features we investigated and then moved into doing explorations and ran multiple work sessions to brainstorm some key features.

Metrics Workshop

In order to understand what we wanted to measure for this project, our team ran a Metrics Workshop with the stakeholders to help create and define the successes of this project. From this, we got some understanding on how to properly monitor the features. 

What can we measure to track the success of CableStakes features?

• Measure watched DVR hours/user

• Measure deleted recordings per user per month

• Measure watched DVR content with extensions 

• Amount of unwatched content that is automatically deleted

• Track user paths to get to scheduled recordings

Badging Workshop

While doing explorations around grouping content, we discovered some discrepancies around badging. The current recording badges lack the story-telling and consistency across platform for how we want to evolve Manage DVR. The designers and I got together to do a workshop in order to figure out Recording badges for different states that can be used across all platforms. From this we’ve created a foundational guide on how we want to narrate nested recordings.

Multiple Working Sessions

After creating the first exploratory designs, the designers and I decided to host multiple working sessions with each other to explore content groupings and having a Filters & Sort By. The goal was to align all platforms to have some consistency in filtering Recorded contents.

Badging Work Session

Filter & Sort by Work Session

Collaboration with Platform

We later decided to collaborate with the UX Platform team by hosting a Working Session around Metadata and Badging in order to align and document what we needed for Recordings and Scheduled Recordings.

Work Session w/ Platform Team

Designs & Ideation

User Flows - Iteration 1

MB and Web already had existing Manage DVR features such as multi select / bulk delete and grouping content tiles (tv shows, news, talk shows, etc). The LR platform had no capabilities prior to the current experience, everything that existed displayed as a flat list and had no nesting content. In order to brainstorm different ways to multi select & delete recordings and group content, I began brainstorming ideas based off the user cases that were given at the time.

I shared the proposed flows to the stakeholders and engineering teams for feedback. After the first pass, we found out (from the engineers) the nested episode tiles that will open up in the series tile would be overloading for the system to process. From this I went back into a second iteration.

User Flows - Iteration 2

Based off the feedback I got from the stakeholders, I then decided to go back to think about how we want to handle episodes living within a show entity. I then decided to brainstorm a way to have nested episodes live in another page without having to load content into the same area.

I then shared these directions to the core team and stakeholders for feedback. After the second round of flow iteration I then moved into ideating different concepts.

Grouping Content Strategy

Throughout these early explorations we considered how we wanted to group content into Manage DVR for all platforms. From the working sessions where I worked iteratively with a designer from the Platform team, we aligned on what the UI tile and meta data will look for grouped series / single entity content. We considered how this would work for TV shows, movies, events, and more.

Design Ideations

Using the wire flows as the overall guiding picture for experience I moved into brainstorming different design concepts. I ideated from minor to north star scale where I showed 4 different layout versions.

1. Design 1 (Current Thinking) - Providing familiarity for users and easy management with multiple new feature components.

2. Design 2 (Future Thinking) - Adding a vertical navigation to give users more control & management.

3. Design 3 (Similar to Home) - Reusing Home’s new tray feature for more browsing options.

4. Design 4 (North Star ⭐️) - Large scale re-design of the hub to best utilize all management features within Manage DVR.

This was an iterative process as I shared all 4 design explorations to the stakeholders, platform team, engineers, and UX writer. From this I received multiple feedbacks from the cross teams as well as got a general scope of the LOE for the project.

Aligning on the direction

Based off the feedback I received from each the different teams, we decided to go with Design 1 (Current Thinking) which had the familiar pathway for users to still recognize but have more user control managing their recorded content.

I continued to consider how this would work for recorded series content vs single entities. The designers and I also collaborated with Platform to align on the new components & meta data that will be involved for the project. The next step were to take the designs I created and create prototypes to test to users.

Research

User Testing

Another designer (Devin Procter) and I worked together to create a test script for a remote unmoderated testing for the project. We reviewed the test plan with UX Research and then transferred the script into usertesting.com. For this we lead the testing with Living Room (Roku) and Mobile (iOS) and focused on some of the major key features (manage DVR, grouping content, upcoming recordings, and filter & sort by).

Study Goals

• To see if users understand how to manage their recordings in My Stuff.

• Do users understand how to bulk delete their recordings?

• Where do users expect their scheduled recordings to be?

• Which filter/sort options are most useful to users?

Hypothesis *Cue angel music* 🎵

• Users will find episodes being nested within a series helpful.

• Users will understand how to delete multiple recordings at the same time.

• Users might not be aware that they can bulk delete on LR.

• Users will be able to quickly find the content they are looking for.

• Users will find filter/sort options useful when bulk deleting.

Synthesizing Test Results

Once the testing completed. We documented the feedback notes by categorizing them by using the 6 minds technique to analyze patterns. Those categories included; wayfinding, decision making, vision, memory, emotion, and language. Once we went through all the videos we highlighted the key takeaways and opportunities in a deck which was presented to stakeholders, designers, and platform team.

Design Decisions

Manage DVR - Iteration 2

Testing the designs was overall successful and design decisions were made on some key feature sets based off the results. A minor update was made to allow easy view into Recorded episodes List by adding another entry point from the “More” Button.

Grouping Sports (Teams & non team content)

There wasn’t enough time in the roadmap to test the direction for grouping sports content (Team & non team). We decided to work with an engineer from the Living Room team to create an experimental prototype to see how games could be nested into teams and have non-team games nested into their series.

During the experimental trial, I worked iteratively with the engineer, dogfood (QA testing) the prototype, and provided feedback on the build. Once we we completed the experiment, the prototype was shared to the stakeholders where we aligned on the grouped sports experience for Manage DVR.

Filters & Sort By

While we pushed to introduce filtering and sort by to help users better manage their recordings. Unsure how this could scale across the other collections in My Stuff, the decision was made from UX, Product and Engineer’s side that the MVP would be out of scope for this Phase of the project and would be re-visited in the next My Stuff project.

Smart Start Button

During development, the engineers, product, and I found out that the Smart start button for DVR groupings/series had too many different logic that could work differently depending on the type of series gets recorded (ie. a traditional series would be watched beginning to end vs a timely series where you watch the latest). Because of the nuances around linear & non-linear content, we decided to skip implementing the button on series content for the time being due to out of scope and users will still playback access in the Recorded Ep List.

Delivery

Design Documentation

This project was documented to show a detailed overview of the designs and provide thorough walkthrough for the engineers to implement it. In the design specs, this included the high fidelity designs, new UI components, grouping logic, meta data, accessibility (TTS scripts), user flows, and more.

We also worked iteratively with UX copy on our designs and Platform team to finalize new reusable components into the Design Library. I wanted to make sure the designs were aligned with our future goals of this project phase and that this could still scale in the future.

Multi Select / Bulk Delete specs

Grouping by Content specs

Global Meta Data

After working iteratively with the Platform team through the whole process, we were able to align across platform (mobile, web, and LR) on what meta data will display for Manage DVR content. The decision was based off what currently existed in the system, how content will be organized, and how much context we want to provide for DVR content (whether it’s handling recorded, live recording, or upcoming content).

Development & Design QA

This project is currently under development, and will soon be entering Design QA where I will be working with the engineers through some edge cases and make sure the build reflects the design documentation.

Reflection Time 🍵

To sum up…

Future Impacts

• Increase the perceived value of our Live TV offerings

• 5% increase recordings hub engagement

• 10% decrease subscription cancellation

• 5% less confusion/frustration from users, and calls to VX

What I learned

• In order to figure out better remote collaboration, I learned how to use the full capabilities of Figma and zoom

• Cablestakes really challenged my leadership skills, broaden my design skillset to think things across the system (leaving no stone unturned), and in vision how My Stuff would scale in the future.

• This was one of the most complicated projects I was a part of during 2020. Because of its extensive size, I was exposed to the different folks across the org, I had the opportunity to present my design work multiple times at the stakeholder work shares, and I got to be part of some of the bigger design decisions for the project. I enjoyed working on the project and the opportunity to lead some of the process.