Hulu Live Guide V2 - Web Autoplay Masthead
Context
Research showed that Hulu users wanted more from our initial web TV guide. The guide only showed what was currently playing across channels, but users also wanted to see upcoming content across all channels at the same time. Additionally, research showed that users wanted better filtering capabilities across channels and better recording capabilities within the guide.
Project Goals
Let users plan ahead by seeing upcoming content across channels in the guide.
Provide users with a way to dive deeper into content in the guide without leaving playback.
Make it easier for users to record current and upcoming content in the guide.
Give users a way to filter current and upcoming content by type.
Design a solution that works seamlessly with the rest of the Hulu web experience.
Design Process
To begin, I performed a competitive analysis of other web competitors, noting what worked and what didn’t in relation to our existing guide. After creating some initial sketches, wireframes, and user flows, I was able to break down the project into four solvable areas: guide location, actions and additional information, navigation through time, and content-specific filtering. By breaking down the project into these digestible pieces, I was able to conduct more specific testing, build simpler prototypes, and design clearer options when making project decisions.
Throughout the design process, I checked in weekly with the engineering teams, product management, and the web platform design team. I found that involving them in testing and sketching sessions helped us align on goals, challenges, and design decisions.
Design Solution
Based on testing, I moved the guide to a level below the player. Doing so allows users to see a full guide with upcoming content while playback can continue unobstructed in the mini-player. Users can click on an item in the guide to learn more, see show artwork, and take actions such as record or find more episodes.
Upon entering live TV, users see an autoplaying video masthead of their most recent channel. This allows users to sit back and start watching or easily scroll down to find something else. Overall, the new web live guide adds a serious amount of functionality and control while still integrating seamlessly with the rest of the web experience.