New Challenges to Our Existing Products and Thinking
The addition of Live TV to the Fan TV family of streaming products introduced a number of new challenges that we had not yet encountered in our products. To maintain momentum and parallelize design and engineering workflows, we needed to improvise on our design process. We created a number of internal tools to help us better understand our users and the new product needs Live TV introduced.
-
New Use Cases
Expanding beyond a focused “where to watch” use case required reconsidering our users’ watching behaviors
-
Time as an Axis
Our existing 2D categorization of movies, shows, genres, now needed to accommodate the additional axis of time.
-
Data Availability
With API development still underway, we would need to create our own means to access the data our UI would need to accommodate.
Understanding Our New Use Cases and User Types
Prior to the introduction of Live TV, our products focused on very active use cases – users who knew what they wanted to watch, but not where to find it. With the introduction of Live TV, we needed to consider additional, more passive use cases.
To better understand these new watching behaviors and break down our own biases on individuals’ intent when they sit down to watch TV, we created a simple web-based survey that the team could fill out when watching TV at home.
The Addition of Time as an Axis
What we found from the data collected with our watching habits tool, was that how users approached content was highly dependent on context. Daytime watching usually followed a more passive pattern, while primetime watching was much more active. These findings also aligned with the type of content users were watching at different times of day, with episodic content being more likely in evenings than during daytime.
Data Requirements
The amount of content available by provider and lineup varied greatly – from 300 channel lineups to 30 channel skinny bundles. With API work underway in parallel with design work, we would not have access to the exact data our UIs would need to accommodate.
To overcome this, we created a rough HTML/CSS/JS prototype that iterated over the existing endpoints, and provided us the “by channel, provider, and hourly” listings we needed. Our prototype also allowed each team member to filter their own actual cable lineup by a number of criteria – genre, category, MPAA rating, etc – helping us determine at what level of filtering the data became useful and parseable.
UI Design
Based on our new understanding of how users approached live TV content, and the results from our own filtering research, the team created a Live TV homescreen that accommodated both active and passive viewing patterns. Time became the major axis on which content was sorted – “On Now,” “On Next,” “On Tonight” – with a mix of personalized and static category panels provided for each time range.
Additionally, after identifying patterns in our own filtering, we defined logic for smart preset filter sets based on time of day, as well as editorial and automated time-based recommendations to accommodate changing viewing habits throughout the day.
-
Segmented Control
The main axis content will be categorized to address our prioritized use cases.
-
Personalized and Editorial Content
Promoted editorial content and callouts to personalized recommendations – provide opportunities for MSO + content provider partnerships.
-
WatchList Access
Quick access to content a user has explicitly asked to track.
-
Contextual Filters
Dynamic filter sets driven by time of day, season, upcoming events (finales, elections, etc.), with opportunity for editorial override (for promoting content that is not yet algorithmically accounted for – elections, series marathons, Olympics).
-
WatchList and Editorial Items
Large full backdrop images call out live content available from users’ personalized WatchLists, or promoted and editorial content.
-
Custom List Index
A custom list index UI was created to allow users to scrub through and jump to available time ranges.
-
Color Matching
A color matching algorithm selects prominent, appropriate colors from the backdrop images, and overlays a tint of the matched color, adjusted to maintain readability.