Research Presentation
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?
Users have limited time for content discovery
Services often provide poor recommendations
Users feel discomfort with unknown services
WHAT CAN WE DO?
Increase sorting ability for content discovery
Provide personalized recommendations across platforms
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.
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.
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.
HOW MIGHT WE . . . ?
Ease decision and browsing fatigue?
Increase the accuracy of viewing recommendations?
Help users manage their subscriptions?
Help users connect with others through shared watching experiences?
POSSIBLE SOLUTIONS
Aggregated viewing options across platforms
Personalized watching recommendations
Dashboard
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.
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
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.
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.
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
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
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
HI FIDELITY DESIGNS
If you're interested in seeing this prototype in action, please contact me.
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 solved a real problem in their life. 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.