Browse on the TiVo Mobile App

A companion app to the TiVo 4K Media Streamer, the Browse feature on mobile helps entertainment lovers find their favorite TV shows and movies quickly.

Role: Lead UX Designer. Concept, interaction design, usability.

Duration: Oct 2019 to Jan 2020

In 2020, we launched the TiVo Stream 4K Streaming stick, a TV media streamer. The TiVo Stream mobile app was designed to be a companion app for Stream 4K owners.

Background and context

I looked at user behavior on the 4K TV Media streamer:

  • 16% know exactly what they want to watch

  • 42%  know exactly what to watch but will still browse until something looks good

  • 66% use the home screen to browse

Target audience

Lead designer for phone and tablet for the full end-to-end feature

  • UX and interaction design; concept direction.

  • Managed visual design resource.

  • Collaborated with Research on test plans, prototyping, usability testing, and analyzing results.

My Role

Problem

Create a browse experience for customers of the 4K streamer who want to search and find their shows using their phone or tablet.

I made the Browse feature the home screen upon launch so users can start content discovery right away.

I explored edge-to-edge poster tiles on the home screen to create a compelling and immersive experience.

Browsing on the app

Design goals

I based my design goals on the existing market research and our business and stakeholder expectations.

Tasks

Based on my design goals, I broke these down into 3 tasks.

Task 1: one-handed scrolling

We know from research on the last app and also the media streamer:

  • Users only scrolled the top level categories 20% of the time

  • Most of the browsing happens inside one category — so 80% of the time users are scrolling up and down inside one of these tabs

  • Almost half of phone users hold their phone in one hand when on the go

Since the app would primarily be used for browsing and finding and not so much for consumption, this reinforced our decision to optimize for one-handed scrolling.

Strips, grid, and tile models

Given these paradigms, I was able to rule out the first 2 models.

  • Strips: We already investigated why the horizontal scrolling wouldn’t work as it would conflict with the 1-handed vertical scrolling.

  • Grid: while a viable option for the one-handed scrolling use case, it did not provide the immersive edge-to-edge show tile experience I was looking for.

  • Tiles: this was the best bet so far, but we still had to validate.

Task 2: investigate metadata needs

I explored variations of these slide-ups from the bottom of the screen to determine:

  • How much metadata do users need?

  • What is the right amount of metadata that users needed in order to make their decision on show content?

Task 3: Promote snacking

Snacking means to provide nuggets of information for users that they can absorb quickly and move on or take action.

My goal was to determine what the best interaction was that would let users:

  • Scroll through the offerings quickly

  • Still give them a compelling experience for each offering

I explored a single tap on the poster, a long press + hold on the poster, and a single tap on the “more” dots.

I picked the larger show posters as the best candidate for usability testing given the product and business needs of wanting the single hand scroll and quick snacking. We tested the metadata on the Info Panes and how well users understood the actions.

Usability testing

For the final designs, we moved to show 2 and half show posters at default.

The metadata and actions also got a rework:

  • We removed the blue line under the source

  • Replaced the “more” dots with a default display of all the actions (less taps)

  • Added a thumb-down icon and a text label “Rate”

  • Added a text label “My Shows” to the “+” icon

Final designs after testing

Visualizations for Engineering

Sample artifacts used to communicate specs to Engineering. Sometimes, written specs were not sufficient.

Info Pane expansion rules

Tab swiping rules when the number of tabs exceeds the screen width

In this case, communicating the mobile behaviors with written specs and an accompanying prototype was the most effective.

Visualizations for Engineering

Action flow specs

Artifacts showing all possible actions of the full user journey from the landing screen to video playback for TV episode and movie flows.

Post delivery

I continued iterating with Engineering until the Info Pane behavior and other gestures worked as spec’d.

  • Last round of usability: The home screen met testers’ expectations. However, some testers felt the content wasn’t very personalized to them.

  • Stream 4K TV Media player usage (Jan 2021 data)

    • The majority of the device usage is from Android Home, not the TiVo Stream app. Though 79% of devices use the Stream app, Stream app visits are not frequent.

    • Of those that launch the Stream app, 52% never launch a streaming service from within the Stream app. 

    • The abandonment rate for the Stream app is high (22% have tried but don’t plan to use it again).

  • Since the success of the TiVo Stream mobile app is based on usage for the Stream 4K TV Media player, the launch was postponed due to the low numbers above.