Reducing Browsing Fatigue Through Personalization

Better Recs minimizes browsing and decision fatigue by personalizing viewing recommendations across platforms, empowering users to enjoy finding new content they'll love watching.

OVERVIEW

The average adult uses streaming video services as part of their daily routines to spend time with family and friends, unwind, escape, or just pass time.

Although there are over 300 OTT (Over the Top) video services available in the U.S. alone, users increasingly find themselves searching through multiple providers to find something to watch, juggling numerous subscription costs, and managing three or more apps on their connected devices.

Better Recs was designed to streamline the process of finding relevant content.

MY ROLE

I made Better Recs as a conceptual project in response to increased media consumption during the pandemic.

Working solo and using the design thinking process of Empathize > Define > Ideate > Prototype > Test > Implement, I created Better Recs to increase the joy of watching.

TOOLS

Sketch, Figma, InVision + Studio, Photoshop, Illustrator, Miro, Marvel, Google Suite

PROBLEM

The average adult watches 3-4 hours of streaming video daily, yet feels overwhelming decision fatigue and frustration with impersonal watching recommendations and subscription management.

SOLUTION

To help OTT (Over the Top) video users, I designed Better Recs as an iOS mobile app that aggregates users watching history and preferences to give personalized watching recommendations and help users better manage their subscriptions.

WHY IS THIS HAPPENING?

  1. Users have limited time for content discovery

  2. Services often provide poor recommendations

  3. Users feel discomfort with unknown services

WHAT CAN WE DO?

  1. Increase sorting ability for content discovery

  2. Provide personalized recommendations across platforms

  3. Implement a dashboard and notifications to ease subscription management

STEP 1 : RESEARCH

Having experienced browsing and decision fatigue personally, I began the project with secondary research to better understand the problem in context, and validate whether it existed for a larger audience.

• There are more than 300 over-the-top (OTT) video services in the U.S. source

• Over 45% of users subscribe to 3 or more video services. source

• Subscription video on demand (SVoD) revenue in the U.S. has grown from $1.6 billion in 2011 to $15.9 billion in 2019. source

• Users have to search through multiple services to find something to watch, juggle numerous bills, and manage 3 or more apps on their connected devices. source

• Aggregation could solve rising consumer frustrations related to content discovery and selection across divergent services … 69% of consumers say they would prefer to get all of their services from a single source. source

USER INTERVIEWS

To better understand the problem, I interviewed users who subscribe to three or more streaming services.

Expected Feedback:

  • frustrating or inaccurate recommendations

  • search and browse difficulty across platforms

  • subscription management

Unexpected Feedback:

  • desire to connect with others through shared watching and recommendations,

  • relevance of popular opinion

Next Steps:

  • Synthesize and organize the information from user interviews into affinity and empathy maps to clarify common goals and pain points

  • Create user personas to identify core needs and begin defining the scope of the solution

I developed three personas to inform decision making throughout project development.

I developed three personas to inform decision making throughout project development.

3 Key Motivating Factors of Personas:

  • Limited Time and Attention

  • High Decision Fatigue

  • Binge Watching

Learnings:

  • Solution must reduce browsing time and energy

  • Solution must be personalized to ease decision-making

  • Solution must take the breadth and span of individual watching into account

STEP 2 : DISCOVERY

VALUE PROPOSITION CANVAS

Creating a value proposition canvas (VPC) helped me connect specific needs and frustrations from the user personas with solution features, and prioritize those with the highest potential value.

Reducing Browsing Fatigue Through Personalization

PRIORITIZING FEATURES

User stories helped confirm the findings from the VPC and prioritize features for a minimum viable product (MVP). This resulted in eliminating the social connection feature from the MVP.

Reducing Browsing Fatigue Through Personalization

HOW MIGHT WE . . . ?

  1. Ease decision and browsing fatigue?

  2. Increase the accuracy of viewing recommendations?

  3. Help users manage their subscriptions?

  4. Help users connect with others through shared watching experiences?

POSSIBLE SOLUTIONS

  1. Aggregated viewing options across platforms

  2. Personalized watching recommendations

  3. Dashboard

  4. Social connections in app

STEP 3 : IDEATION

INFORMATION ARCHITECTURE

Users predominantly reported watching streaming video on smart TVs with their phones nearby, so I opted to ideate and design for an iOS mobile app.

To better visualize and understand a working structure for the app, I developed a user flow to refine the information architecture for the project.

This project had the potential for feature creep so it was important to identify key features for the MVP. I decided to focus on recommendations and a dashboard, and save the social connections feature for a later iteration.

MVP DECISION-MAKING FACTORS

  • Route to enable users to Set Personalized Watching Preferences

  • Route to enable users to Find and Watch Better Content

  • Route to enable users to Make Informed Subscription Decisions

STEP 4 : DESIGN

EVOLUTION FROM SKETCHES TO WIREFRAMES

After conducting usability tests of rough sketches for the onboarding flow in Marvel to see if users could successfully navigate the onboarding process, I created medium fidelity wireframes.

Reducing Browsing Fatigue Through Personalization

RESPONSES TO TESTING

  • Users were able to create a profile as the steps aligned with standards, but struggled with the unfamiliarity of testing hand-drawn app screens.

  • Learning: Test wireframes rather than sketches

  • Users were unfamiliar with some terms in the copy (like SVoD/OTT), so they weren’t sure what to do with the account connection screen.

  • Learning:  Copy should be simple and clear for highest affordability

  • Users felt there was too much information on the Connect Account screen.

  • Learning: Simplify UI to CTA

Reducing Browsing Fatigue Through Personalization

DESIGN DEVELOPMENT

Imagery on the mood board recalls the nostalgia of night time festivals and amusements.

UI examples demonstrate clean design and interesting navigational supports.

The style guide communicates Better Recs' purpose to facilitate more meaningful consumption of streaming video content, and visually communicates the brand's attributes of being helpful, easy, reliable, personalized, and engaging.

Reducing Browsing Fatigue Through Personalization
Reducing Browsing Fatigue Through Personalization

HI-FIDELITY PROTOTYPE - VERSION 1

I built the first hi-fidelity prototype using Sketch and InVision Studio.

Testing Goals

  • Measure completion success of the onboarding process

  • Measure ability to personalize watching preferences and rate their recently watched content

  • Measure recommendation access.

  • Measure dashboard access

  • Measure information architecture and navigation

STEP 5 : TESTING

USER TESTING & RESULTS

Testing usres who would be likely consumers of this product, and have backgrounds in product design and/or visual art, revealed that:

  • The vertical scroll in the connect accounts flow of the onboarding process was cumbersome to navigate, making users less likely to complete the process. To provide users with personalized recommendations, the app needs to aggregate their individual watching history, so I needed to iterate the interface to promote completion.

  • The recently watched and better recs screens did not have clear differentiation, making users less likely to rate content. I needed to iterate these screens to inspire users to provide the ratings data that fuel the personalized recommendations.

  • Although users were interested in the information provided in the dashboard, they did not enjoy the interface, making them less likely to take advantage of this feature. This flow needed a full redesign.

  • While users were intrigued by the premise of the product, they generally felt the navigation was clunky with too many screens. To create a more delightful user experience, I needed to streamline the navigation and simply the flows.

Reducing Browsing Fatigue Through Personalization

ONBOARDING IMPROVEMENTS

  • Replaced text-based information with logos for easy recognition and affordability

  • Simplified user flows to minimize screens

  • Simplified design to eliminate vertical scroll

  • Visible indicators of successful action

Reducing Browsing Fatigue Through Personalization

RECOMMENDATIONS IMPROVEMENTS

  • Simplified overall flow to remove excess screens and screen-to-screen movement

  • Adjusted UI to clearly differentiate between the recommendations screen and recently watched screen

  • Reduced card size, limited text, implemented carousel sliders to be consistent with Netflix mobile UI

  • Created drop-down modals for filters on recommendation and recently watched screens to eliminate screen-hopping

  • Changed copy for clearer instructions

Reducing Browsing Fatigue Through Personalization

DASHBOARD IMPROVEMENTS

  • Reorganized information architecture and removed unnecessary elements

  • Simplified the UI for easier user experience and overall flow

  • Implemented a side tab bar as a constant navigational device to reduce movement between screens

  • Replaced text with graphics and icons wherever possible

  • Removed screen titles/breadcrumbs

STEP 6. INSIGHTS

LEARNINGS AND TAKEAWAYS

  • There is a valid problem space around OTT/SVoD consumption, and an aggregator could be a successful and lucrative solution.

  • The first designs relied too heavily on text and responsive web models.  Going forward I will always use images/icons/graphics as primary vehicles for information.

  • The project would have benefited more from testing the wireframes rather sketches, to detect flaws in the information architecture and navigation as early as possible. Initially I focused primarily on the onboarding screens and didn't plan the information architecture of core screens until I started the hi-fis. I will definitely "work smarter" going forward.

  • It is important to find ways to reduce the number of screens and have flows revolve around a navigational hub so users don’t feel as if they’re maneuvering through a maze.

  • Simple is generally better.

  • Test early and often.

I really enjoyed designing this product and got overwhelmingly positive feedback from testers that this is a product they would love to have and would definitely use. The next hypothetical step is to create a landing page and collect sign-ups as I explore the possibility of taking this product to market.

"I wish I had this app!"
That's what most of my testers said in the final round after iterations.