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.

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.

Watching Habits Web-Based Survey

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.

Chart Displaying Users’ Watching Habits
Users who knew what they wanted to watch vs those who didn’t, by time of day

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.

Live TV Content Filtering Prototype

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.

Live TV Landing View
Hifi Mock
  • 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).

Live TV Listings View
Hifi Mock
  • 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.