Currently, Netflix offers thousands of hours of video content but not much in terms of details for that content. It lists the key points - release date, lead roles, rating, and runtime. But what about the whole cast? Behind the scenes details?
Netflix Insight is a proposed feature that will allow users to quickly pull up the details they would otherwise have to get from outside sources. All while keeping the video progress intact.
Problems
Fill in the blanks - Netflix doesn’t provide the details users are looking for, this feature will give them what they want to look up quickly.
Project Goals
Research what Netflix and competing streaming services offer.
Design the feature to seamlessly integrate with Netflix’s current UI.
Research
What do people want from Insight?
Competitive Analysis: Netflix might hold the biggest market share now but more streaming services are popping up and gaining users regularly. How do they differ? What do users like and dislike about these services?
User Survey and Interviews: I sent out initial surveys to get a gauge of how users currently interact with streaming services. After reviewing the survey results, I conducted more in-depth interviews.
A streaming service for every day of the week
Insight into the competition*
There are hundreds of streaming services worldwide with more launching regularly. In the US alone, there are over 20+ popular streaming services. It will be a whole project in itself to research each service. Due to time constraints, I will only be looking at the most subscribed services that I’m also subscribed to - Netflix, Hulu, Amazon Prime, and Disney+.
According to the Nielsen Total Audience Report, 84 percent of users rank cost as either extremely or very important when selecting a streaming service. This is closely followed by ease of use (81 percent), variety or availability of content (79 percent), streaming and playback quality (77 percent), and speed of menu selection and content loading (74 percent).
Nielsen surveyed users on what factors are compelling them to retain their streaming subscriptions or perhaps acquire new ones as well - Out of the top 10 results, most related to price and performance. But if you look at attributes that focus on content and feature-specific wants you are left with the availability of content, accessibility, and menu recommendations.
*see what I did there?
It’s in the Details
Current streaming services lack information
Of the four services I reviewed, Amazon is the clear winner providing almost too much information. Amazon owns the popular database site IMDb so it makes sense they will have access to all that content.
100% of submissions used Netflix, followed by Amazon Prime Video and YouTube (83%), with Disney+ and 'other’ taking up 50%
Most users claimed to watch 1-4 hours of streaming content each week
TV was the most used device (via Roku, Apple TV, etc.) for streaming followed by Laptop/Desktop
100% of submissions said they regularly look up video details while they are watching it (83% look up casting details, 33% looked up behind the scenes info)
83% were interested in the idea of a built-in feature like Insight on Netflix
I followed up with a few of the survey participants and asked for more details on their answers and received some helpful details.
“I prefer watching on TV because of the bigger screen and 4K options. I only watch IG or TikTok videos on my phone”
“I’m always looking things up while watching the video and end up having to go back a few minutes to rewatch it”
“That feature is the only thing I like about watching shows on Amazon”
Sketches
Integrating into Netflix
Netflix is #1
At the time of this project, Netflix is the king of video streaming. With over 200 million users, I needed to find a way to seamlessly integrate my feature into the existing Netflix ecosystem that millions are accustomed to. With that in mind I reached for my handy iPad and drew some sketches;
Mobile
I spent time user testing the four streaming apps on my own phone and one of the common factors is that they all only play video in landscape. Since this feature will only populate while the video is playing I did my sketches of possible frames in landscape mode. Based on the user surveys I focused on casting and actor details and BTS/movie trivia. Since it’s going to be on a small display I played with a few different layout configurations. It needed to be something that didn’t take up too much of the screen (to allow the video to be visible in certain sections) while also not being too small to be illegible.
Desktop/Television
There was a lot more wiggle room when it came to designing the Insight feature for desktops and TVs. Overall, the general configuration remains the same but the increased resolution allows more content to be displayed on the screen at once, versus having to scroll/swipe to see more.
Low and Hi-fi
Designing for all devices
After sketching, I jumped into Figma and began working on my wireframes. There was a bit of hopping between personally testing the current Netflix app/site and setting up my wireframes. In the end I managed to keep the overall layout of the current version mostly intact. I did have to move around some buttons to make room for the Insight feature.
Desktop Layout
Snapshot Mode - When users hover over the screen (desktop/web) or press up/down (TV) the snapshot view will open. This is a quick view of the cast with just their name and character name. The video will continue playing in this view mode.
In-scene view - The in-scene view will only show characters acting in the scene users are currently on. Selecting a profile picture will open the full-screen mode.
Fullscreen Mode - If users want to get a full detailed view of a certain actor or movie, a full-size screen will overlay the video. The video will automatically pause while this screen is open and resume once the user returns to snapshot mode or closes out the window completely.
Mobile Layout
The mobile version includes the same information as the desktop version with a slightly different layout. While the full-screen mode is more or less the same, I approached snapshot mode differently. Instead of displaying the information across the width of the screen - and in turn, covering more than half the content -, I put it vertically on the left side of the display.
Also with the content and control on one side of the screen, it would be easier for users to navigate one-handed.
High Fidelity (version 1)
Now it was time to get my prototype ready for a round of user testing! Since this is video-focused, I needed a movie for my test. I ended up choosing The Adam Project since it was a new release at the time of this project, one of the top 10 videos on Netflix and had everyone’s favorite Canadian actor - Ryan Reynolds.
User Testing
Getting it into the users’ hands
With my high fidelity prototype ready I scheduled usability testing with a few participants.
Ages 24-35
All current Netflix subscribers
30 minutes per test
Half remote / Half in person
There were two tasks to complete in both desktop and mobile versions.
Task 1 - You are currently watching The Adam Project on your [phone/computer] and want to look up more information about Ryan Reynolds.
Task 2 - You are currently watching The Adam Project on your [phone/computer] and want to learn some behind-the-scenes details about the movie..
Findings: Text legibility was a common pain point
Since this is adding a simple feature to an already highly used and popular service, I hoped users would be able to quickly get through the task without difficulty.
Overall, that was the case. The main issue reported by all users involved text visibility. The trivia vs BTS button is also a concern. I didn’t catch it during earlier tests but after one of the final users’ brought it up I could see how many users will easily be confused between the two tabs with similar functions.
One small error that was noticed involved discrepancies between the mobile and desktop navbars (different page headers) - that was an error on my part and didn’t catch it before the tests. With testing done, I had the following to revise as well as some touch-ups on the style.
Increase opacity on text cards or find a new solution to make them more readable
Remove the ‘trivia’ button since BTS is already listed and would include the same information
Fix navbars so they match across devices
Final Iterations
Iterate, Iterate, Iterate
High Fidelity (version 2)
Using the feedback from test participants I revised my prototype as well as tweaked some of the overall styling (ex. rounding out the corners on cards and using a single font type).
Conclusion
Lightning Round and Next Steps
Final Round of User Testing
Just to be sure my revisions were effective I reached out to two of the previous participants and asked them to test the prototype again. Legibility was no longer an issue but they did want to see more options (movies, actors, etc.). Due to time constraints, I chose not to create more frames.
Thoughts and what I would have done differently
Overall I enjoyed working on this project. I’m no movie buff, but this feature is something I really wished Netflix would implement. And based on my surveys and user interviews, so do a lot of Netflix subscribers. I do wish I went and flushed out the prototype with all the actor pages, similar movies, etc. but that would have taken up a lot of time and I also didn’t want to cause the participants’ decision fatigue during testing.
After the first round of user testing, I’m surprised I missed the issue of legibility. I reviewed the prototype before testing it looked clear to me but once users kept bringing it up I realized ‘oh yeah, this is kind of hard to read’. I realized I need to be more mindful of accessibility for future projects.
On the off chance someone from Netflix sees this page…make this a thing! You don’t even have to credit me 😁
