Creating a Better Onboarding

App Design

Overview

About the project

As TiVo resolved to disrupt the world of video-streaming, a delightful onboarding in the first impression was crucial, because this informed our best-in-business personalized content discovery recommendation engine.

Date
August 10, 2020
My Role
Senior Product Designer
The problem

Winning Over a New Generation of Consumers

TiVo is a pioneer that disrupted television with the invention of live TV recording on cable cards, who needs to woo a new generation of consumers because of the massive shift to on demand viewing.

The solution

Facilitating a Personalized Content Discovery Experience

TiVo decides to break the mold and reinvent themselves as a completely new product company that offers every streaming app and Live TV on one screen breaking down traditional app silos. Creating a delightful onboarding experience for first time users was one of their big bets as it informs their best-in-business personalized content discovery recommendation engine.

Onboarding Goals

Three Steps to Success

Onboarding was divided into a three step process:

  1. Understand individual's preference of shows to personalize their experience
  2. Prepare your watchlist to easily access your favorite shows in one place
  3. Review streaming services for recommendations from sources you care about
Onboarding Welcome & Intro

Introduction

Marketing, brand audit, and UX benchmarking set the stage for design. TiVo’s new brand personality was fun, smart, clever, bold, & fresh! I took these bold colors and splashed them into the interstitials to differentiate onboarding from the otherwise dark UI of the app. The welcome screen set expectations for the users.

Designing Iteratively

There were three rounds of iteration after usability testing. Colors, copy, interactions, and sequence were refined over and over.

Our Iterative Design Process
Step 1

Understand individual's preference of shows to personalize their experience

This or That? 
By asking users to pick one or the other, it felt like playing a game as each pair of cards flew into the screen. 7 pairs were shown initially.

Key insights from user research:

  • Allow users the choice to opt-out. Do not force them to select a pair.
  • Empower users to know more about a show

Step 2

Prepare your WatchList to easily access your favorite shows in one place

Content was categorized into three broad categories from which users could add their favorites to My Shows. These categories were determined by our personalized content discovery team. I ensured that the interactions were simple, lightweight and evident.

  • Tapping on a tile adds that content to the users My Shows list.
  • User interaction is acknowledged with a scrim ripple and a My Shows icon in the center of the selected tile.
  • Once a tile was selected, user could toggle between the selection states, and remove the show from My Shows.
  • One could skip the category at any time by tapping the NEXT button at the bottom of the screen.
Step 3

Review streaming services for recommendations from sources you care about

For this step, we debilitated on the interaction. Product guideline was to pre-select all services for the user. They could unselect a service by tapping on the tile. During 2 rounds of user testing though, we got conflicting feedback.

  • Many users commented that “unselecting” the streaming services felt counterintuitive, and that they preferred to manually “select” the streaming services they do have.

Yet, the Product team was adamant that making users "select" the services would not be the best user experience. Their justification was:

  • There are a sea of streaming services and some of them are free; the list keeps growing.
  • Users would get a wider range of personalized recommendations if all services were selected for them.
  • There would be opportunities for growth within the app.
  • Later, users could change their service selection from the app Settings.

To resolve this conflict through design, we figured that we had to change our communication. Instead of "Select Streaming Services", we reworded the title to say, "Review Streaming Services". This change helped us manage users expectations and achieve a positive outcome.

Success!

In the end, success was celebrated with a confetti burst behind our very own TiVo emoji. :-)

Conclusion
  • This was a totally new product, a reimagined brand, and its style guide was getting created almost parallelly. Since time was of the essence, I had to be very flexible in creating several design options and revising them as decisions fluctuated almost daily, initially.
  • I was in close contact with all stakeholders, sharing designs regularly and collecting feedback for iteration in quick turnaround cycles.
  • It’s not until we fully appreciate business needs and user outcomes that we’ll start to hear, "prioritize results over decoration" as a strategic phrase instead of a white flag of defeat.
  • We gained invaluable insights from user testing on TV. When we started designing for mobile, we were equipped with information about their pain-points already. We could empathize and proactively think about how might we solve for the known issues.
  • Engaging individuals from cross-functional teams early into the design thinking process, empowered each of them with a sense of ownership and pride in building a better onboarding experience.