Sometimes, it can be difficult for me to find something that I want to watch on Netflix (first world problems). Despite Netflix providing an abundance of recommendations, it still takes me a long time to find new shows or movies that interest me because their wide-ranging suggestions can be hit-or-miss.
And it isn't just me. There is a Reddit community called "NetflixBestOf" that directs people to content they might like on Netflix, and it has 2.7 million members. Not only that, there are countless lists on IMDb, Rotten Tomatoes, Letterboxd, etc. that serve the same purpose. With so many online resources to help people figure out what to watch on Netflix, I realized the need for another method within the Netflix app to find recommendations.
I hope it's obvious that I do not work for Netflix; this project was done on my own (with very limited understanding of their business and technical constraints) because I really enjoy using their product and deeply admire their experience design. Given the fictional nature of the feature, it was interesting to explore this idea without having to consider the challenges that would come with a real, developed feature.
Netflix is the world’s leading video streaming service, and a key factor to their success is being able to direct subscribers to shows and movies that they want to watch.
Their current recommendations system has a gap; otherwise, people would not expend effort on other websites to figure out what to watch on Netflix.
I wanted to design a recommendation-generating feature within Netflix to fill that gap. Unlike Netflix's default suggestions, which are auto-generated and cover a broad range, this feature's suggestions would be specific to what a user inputs. My goal for the feature was to give users more control in specifying what they are looking for in a show/movie.
My final deliverables for this fictional feature were prototypes for how the feature would integrate within the Netflix app on desktop and mobile.
Since the feature is fictional, I considered usability testing as the metric for evaluating the designs. I asked 6 people (3 participants on desktop, 3 participants on mobile) who are Netflix users to create a collection and edit a collection in the prototype, and everyone was able to complete these tasks without help from my end.
If the feature were real, I would like to measure how many users try it to gauge the demand for a solution to that user need. I think it would also be important to track the effectiveness of the feature by looking at user feedback on the generated recommendations (playing and finishing a title from the list would count as positive feedback, and sending a thumbs-down on a title would count as negative feedback).
From my understanding, Netflix’s recommendation system classifies users into “taste communities” by evaluating their watch history in conjunction with the “genre tags” associated with that content. These taste community classifications inform Netflix what content to recommend to a given user.
What the user sees as avenues for finding new things to watch are suggestion rows in the homepage, such as the following:
It seems that Netflix gives suggestions to users based on either a single show/movie that they've watched or their entire viewing history through taste community analysis. (This is just from my interpretation of my homepage recommendations; I have no insight into how their system actually works).
During research, I wanted to know more about how people experience Netflix's recommendation system and how people go about finding new shows/movies in general. My learning goals for competitive analysis and interviews therefore covered the following:
From my three interviews, I created a persona and gathered the following common themes:
Since this feature would be integrated into Netflix, it was important for it to look and function like it belonged to the Netflix interface. As such, I went straight into high-fidelity designs using Netflix’s visual styling. The screens I worked on cover the flows for creating a collection and editing a collection, which involve:
Completing these steps returns a list of recommendations tailored to the collection, which can then be saved to the homescreen
To convey how a collection row would appear on the homescreen, I played around with ways to indicate that multiple titles were factoring into the list of recommendations.
Of these ideas, I went with “Thumbnail + Symbol” for being the cleanest option. Although only one title is shown, users can easily see the other titles by hovering over the thumbnail.
collection row shown in homepage
Clicking/tapping on the thumbnail or the underlined collection name brings up an “Overview of Collection” modal (for desktop) or page (for mobile). This overview shows the titles in the collection and in the resulting recommendations with greater detail.
Users can create new collections from the Netflix homepage by clicking in the sections that are outlined in teal.
In Step 1, users select up to 4 titles to add to their collection, which they can find from search, Currently Watching, or Recently Watched.
For desktop, clicking on “Create a Collection” opens up a modal that starts with the Step 1 screen below. The section showing the selected titles is absolutely positioned whereas the other titles scroll underneath.
desktop step 1
On mobile, I originally planned for Step 1 to mirror the desktop design with a slight change – the “You’ve Selected” section would show only when the user scrolls up (so that there is more screen space designated for finding titles).
To better fit with Netflix’s visual styling and to have a more organized layout, I ended up dividing the screen contents into 2 tabs:
.png)
Moving on to Step 2, the user selects the options that best describe what they like about each title. I got the idea from seeing people posting requests on Reddit movie threads like, “I liked Movie A, Movie B, and Movie C because of _____. What other movies also have ______?”
My first desktop iteration was a multi-step form with each title occupying its own page.
Looking for a layout that would make it easier to navigate between titles (in the edge case of users needing to revise something), I then tried a single-step form.
I thought this format of asking the same question over and over again seemed annoying to fill out, so I ended up using chips as the selection controls. Although the chips are smaller click targets, I felt that this was not a big concern on desktop. This compact layout also shows all of the titles within one viewport for easy reviewing.
I tried to translate the desktop design to a mobile design and quickly realized that the chips would be too small for tap targets on a mobile device. I wanted to use full-width buttons, so I went for a form design.
While this design was suited for answering “What do you like about ___?” for each title, it did not provide any way for users to review their responses. As I did in Step 1, I ended up dividing this step into 2 tabs with the right tab serving as a “Summary” screen.
This “Summary” screen uses the desktop design, but since the chips are too small on mobile, a separate screen with full-width buttons pulls up for actual editing.
I used Netflix’s “More Like This” layout as a starting point for designing the results page. My goal was for users to be able to decide if a show/movie is worth watching without leaving the page, but I also did not want to overwhelm users with too much information.
After designing the layout in the middle, I simplified the controls to just include “Play” and “Not for me” because the other controls seemed ambiguous in this context (ex. the plus icon could be seen as “Add to collection” instead of “Add to list”).
Showing all of the content from the desktop design would overload a mobile screen, so I decided to use accordions so that some info could be hidden in its collapsed state. In this iteration, the “Not for me” control is accessed via swipe gesture. (Netflix uses swipe gestures for removing titles from “My Downloads” on its mobile app, so this stays within the realm of Netflix’s visual language.)
.png)
However, I wanted to show a glimpse of the description for each show/movie even in the collapsed state; therefore, I opted for portrait-orientation thumbnails to give more vertical space in the final design. The controls (designed similarly to the “Continue Watching” titles on the homepage of the mobile app) are more apparent in this design as well.
.png)
Since I used Netflix's visual style when working on the designs, I went into usability testing with a high-fidelity prototype. I thought it was important to use high-fidelity designs because one of the goals for this project was to seamlessly incorporate a feature into an existing app...and what better way to test that than to conduct tests with the realistic visual designs? I asked my six participants (3 for the desktop, 3 for mobile) to go through the tasks of creating a collection and editing a collection.
All of the participants completed the tasks without any help.
Since they were all Netflix users, I asked for their impressions on how well the feature fit within the rest of the interface – as will be explained later, they thought that it blended in a little too well.
While the desktop participants went through the tasks effortlessly, there was a slight snag for some mobile participants trying to edit a collection.
so I deviated from Netflix’s existing interface by replacing the information icon attached to a thumbnail with an edit icon
so I added in a clearer distinction between the collections and the rest of the rows on the Netflix homepage
After making the "edit collection" action more prominent on mobile and adding more visual contrast between the Collections and the rest of the interface, I polished the interactions for the final mockups. The next section shows the feature in action through a video demonstration.
Pick what shows/movies to add to the collection
Specify what you like about each show/movie
Pick what shows/movies to add to the collection
Specify what you like about each show/movie
.png)
The fictional feature helps users to find new shows and movies through a method in which they have more control over how Netflix decides what titles to recommend them.
The screens for the feature were designed to look and feel like they belonged to the Netflix interface by matching typography, color, layout, and interaction behavior to the expectations set by the Netflix app on desktop and mobile.
