Background
'Discovery Experience' relates to the engagement of consumers that use media streaming platforms.
Top companies like Netflix, Hulu, Amazon Prime Video, and HBO all use a very similar user interface model.
In modern design, more and more content is filling our screens. Overwhelming most users with what seems to be an 'endless' pool.
The Question
What are the drawbacks for these content-heavy models that prioritize marketing over discovery experience?
Are top streaming sites neglecting the fundamental concepts of:
• Spacing of Content
• User-Friendly Interactions
• Personalization
Accedo, a service that helps the world's leading content providers, wrote about how Netflix must appeal to a mass-market industry and prioritize shoving content onto the user rather than focusing on user-centricity and personalization.
Nielsen Norman Group (NN/g), the World Leaders in UX Research suggest that 'endless scrolling' models are not recommended for goal-oriented tasks. If the user has a goal of finding a new and interesting title to watch, the discovery experience aspect matters in this system.
Examples
Netflix 'Prototype' created in Figma
Hulu Interface
Amazon Prime Interface
Research Statistics
Referencing datasets acquired by Digital Creative students - Faraz Ali, Andreas Iagoridcov, and Linus Stervine:
Their 2018 UX Case Study found that most of their participants had a difficult time choosing a movie on a streaming service and wishes they could see what their friends were watching. This case study is one of the inspirations for this project.
• 95% of users surveyed have used Netflix before.
• 80% of users surveyed have used Hulu before.
• 91.7% of users surveyed use a streaming service daily or few times per week.
• 70% of users surveyed chose to watch something based on a friend's recommendations.
• 50% of users surveyed 'only sometimes' find content interesting enough to watch.
Research Questions
Questions:
• What is the cognitive load on the user in top sites vs. traditional models?
• How are keywords utilized by users?
• How do we know the user is familiar with the UI model? Novice users may not find the search queries intuitive.
• What design changes could be made to improve discoverability?
Usability Test
Most of the design decisions were inspired by a usability test I performed using example task scenarios.
'Continue Watching' Speed Test' - Breakdown
This task focuses on decreasing user cognitive load. Netflix's home page fills up 80% of the screen showing an advertisement of a featured show, forcing the user to scroll down and locating the panel that says "Continue Watching".
If a panel section is defined on load, it significantly decreases the need for the user to exert load in working memory capacity and also improves click time.
Alternative UI decisions for this test can be made given the understanding concept:
The concept of Advertisement & Discovery. Top streaming sites operate on a business model that prioritizes ads for new content. Alternative UI solutions could include a model of Amazon Prime Video or Twitch.TV, which utilize a smaller, carousel function at the top instead of a full-width jumbotron like Netflix and Hulu.
Raw Search vs. Friend Recommendation - Breakdown
This task focuses on a feature called, 'Friend Recommendations'. Anyone can use raw search to find a movie name that someone told you about but if there is a friend's list feature, these items could be recommended to the user in advance.
This effectively decreases search time for the user and decreases cognitive strain in browsing.
Information Search Scenario - Breakdown
This task focuses on measuring the efficiency of user information search. Netflix's model has trailers listed at the very bottom of a page.
Netflix has confidence in their AutoPlay mechanism. It's their reason for not needing trailers of movies.
What I found interesting is that when you think of auto playing videos, most of the time they are seen as a hindrance, even on Netflix.
Some people note that they turn this feature off so they can search in peace. Stephen Garcia, Director of Product Innovation at Netflix said, "it was a feature that was aimed towards cutting down search time." by associating a short clip to encapsulate the movie title. While this feature benefits some users, it hurts others as well.
By giving users a proper user interface to take time and discover titles with in-depth descriptions and trailers available in one-click, it could give them sufficient information to select a title quicker without having AutoPlay.
An autoplay video could also be introduced only when the user initiates the scroll down to view details. Therefore, keeping the sanity of those that are browsing and do not wish to see every preview.
Details with AutoPlay trailer
Design Decisions
These design decisions have many key reasonings behind them. Most of these features are not standardized in top streaming services.
Right-Side Navigation Panel
Traditionally, navigation bars are at the top or left side. This design justifies the placing of the navigation function on the right side, to bring more focus onto the content.
Generally upon loading, users will scan the left side of the page first, in an F-Pattern.
• Content visually appears first.
• The mouse cursor naturally hovers near the scrollbar to the right.
• Users are instinctively familiar from book tabs.
• Time difference between left or right side navigation is negligible.
Nielsen Norman Group (NN/g), the World Leaders in UX Research have an article on this topic, stating that some users have "Right-Rail Blindness", suggesting that ad banners usually display on the right side, training users to avoid looking in that direction anyways. Understanding this behavior, it allows users to stay focused on the content of the page and only bother to look over when they need to navigate.
The main focus of this design was to improve navigation & discovery of new titles to users. This decision aids in accomplishing that goal. Navigation scrolls separately from the content. This provides two scrolling mechanisms for the user, allowing them to analyze and navigate independently. UI models like this are used in Twitch.TV and YouTube's desktop sites.
System Transparency & Organization
Another detail that assists users is the 'Details' tab being highlighted in the bottom-left corner of the screen as well as the tab notifier on the top-right of the screen.
These two areas provide the user information as to where they are on the system. Most users can deduce that they can scroll down without the navigations being affected.
The navigation panel shows the content that cuts below the fold, signaling to users they are able to scroll in this section as well.
If this isn't convincing enough: "it simply doesn't matter", as wrote by Jared Spool, Founding Principal of User Interface Engineering. He writes that it doesn't matter what users like, as long as you choose the design that best accomplishes your objectives. Users are well-equipped to discover navigation no matter where it is on a page.
A 'Finite' Model
Users are shown an overwhelming amount of content upon load, easily causing most of the information to be ignored. Using a design that fits well with the 7 ± 2 magic number, there is more focus on the quality of the user's attention.
There are constantly only 2 sections on the screen with 7 titles total displayed at once. There are also 8 buttons/navigational features available on the screen, focusing more on filtering and discovering more relevant content rather than overloading.
Friend Recommendations
One of the main additions of this design was the concept of implementing a 'friends' list. A social media aspect allows for the users to feel like the interface is more personalized rather than algorithmic advertisements.
Top streaming sites trust that their algorithm is capable of suggesting new and relevant content, but as seen from previous survey results, users only sometimes find what they're looking for and a majority of them want a friend recommendations feature.
It could be seen as a limitation to only have recommendations from friends, this is why using a system that utilizes both an algorithm and social suggestions would be effective.
Affinity Scales
Revisiting this project in 2024 allowed me to introduce the concept of an 'affinity' scale.
MyAnimeList is a massive online database for anime and manga. Not only is it a website, it is a community that allows users to give rating & feedback on popular titles. You're able to add friends and share these results as well.
An affinity scale is a feature that shows what kinds of genres you watch that are similar to your friends. With this feature, you'd be able to visit their profile page and see how close your taste is with them.
Positive Affinity
Negative Affinity
