Netflix Custom Search
Role: Researcher and Product Developer
Tools: Figma, Figjam and Whimsical
Skills: User research and synthesis, sketching, wire-framing, prototyping and testing
Timeline: 2 weeks
In a world brimming with an ever-expanding sea of content, finding exactly what you want to watch can often feel like searching for a needle in a haystack. Streaming platforms like Netflix have revolutionized how we consume entertainment, offering a vast library of movies, TV shows, and documentaries at our fingertips.
However, as the content catalog continues to grow, the need for personalized and tailored search experiences becomes increasingly crucial. Recognizing the importance of putting users in the driver's seat I have designed a ‘Custom Search’ feature that empowers viewers with more control over what they are looking for. This case study delves into the design and implementation of this innovative feature, highlighting how it transforms the way users explore and engage with content.
With over 13,000 titles currently available on Netflix internationally, it can be hard to find something to watch. We’ve all done the endless scroll where we look and look, click and click, and ultimately can’t find something to watch. We turn back to social media or turn the TV off and give up.
Methods: User interviews, affinity mapping and competitive analysis / breakdown of other streamers and top tv and film rating sites
Goals: Gain insight into users issues and pain points and have an overall analysis of the different features of top streaming sites and rating sites
Competitive Analysis
As part of the research and development process I wanted to do an analysis and comparison of top streaming services and top ratings sites. For the streamers I wanted to focus on how content was served to users, how the search function worked and what filtering options it gave to users as well as if ratings systems were used when looking at content to possibly watch.
The top CTA buttons are ‘tv shows’, ‘movies’ and ‘categories’.
Just below the top CTA buttons is one featured title and then various editorial lists of what to watch (i.e. ‘Released in the Past Year’, ‘Trending Now, Popular’, ‘Thriller’, ‘Woman Who Rule The Screen’ etc.)
If you select ‘Movies' and the category of ‘Action’ there are no more subcategories to search beyond that, just more generated lists similar to the home page.
Has a ‘My List’ (a list you add to of tv shows/movies that you want to watch) section with no filtering options to sort that list by.
‘More Like This’ feature appears on mobile and desktop (below a movie/show you have selected) but not on the Apple TV app.
Reviews of titles are not featured but does have a ‘match meter’ with a percentage base i.e. a movie or a show might be a 96% match compared to things you have already watched.
No top CTA buttons, instead a featured carousel and top nav bar with options: ‘Home’, ‘Series’, ‘Movies’, ‘HBO’ and ‘New and Notable’.
Below that are carousels of categories like ‘Continue Watching’ then ‘For You’, then ‘My List’, then ‘Featured’, then ‘Just Added’, then ‘Brand Spotlight’ then it finally gets to your first editorial list called ‘Meet Your Next Obsession’ with some more editorial type of lists then listed under that.
To be able to see movies by genre you have to click on the search icon on the bottom nav and then it recommends ‘For You’ again, then ‘Brand Spotlight’ and then finally ‘Browse by Genre’. Only filtering options available after selecting a genre are ‘Featured, ‘A-Z’, ‘Series’ and ‘Movies’.
The ‘My List’ feature has no way to filter either, titles just appear in chronological order.
Reviews are not featured in anyway on MAX.
If you select a movie the app does give you a ‘You May Also Like’ recommendations below. This feature appears on mobile, desktop and Apple TV
Top CTA buttons are ‘All’, ‘Movies’, ‘TV Shows’ and ‘Sports’.
If you have ‘Movies’ selected there’s no filtering options, much like Netflix and Max there is a top ‘featured’ carousel and then editorial type of lists below.
You can add things to your ‘watchlist’ and then you are able to filter those selections by ‘recent additions’ and ‘content type’ which has two options, ‘movies’ and ‘tv shows’.
Similar search features as Netflix and Max, you can search by genre and then it makes lists below, no other filtering options exist under search.
IMDB reviews are featured if you select a movie or tv show but no way to filter your search by reviews.
Movies and TV both share ‘recommended if you like’ or ‘related’ options once you have selected a specific title.
All features exist on the app, desktop and apple tv. The desktop version has the most and it actually takes it a step further by listing out the cast and crew and you can see other movies certain members of the cast have been in.
Each streamer relies heavily on generated categories to help users to find something to watch, i.e. “What’s New”, “You Might Like”, “Popular”, “Critically Acclaimed” etc.
The only filtering option available on all streaming platforms is by ‘Genre’.
Amazon Prime is the only platform to feature reviews (IMDB) but does not give the user any way to filter search results by reviews.
Rates movies and television shows in two ways, ‘Tomatometer Score’ which is based on the opinion of hundreds of critics reviews and ‘Audience Score’ which is a user based rating.
When searching film or television you can sort by ‘Most Popular’, ‘Newest’, ‘A to Z’, ‘Tomatometer’ Highest or Lowest and ‘Audience Score’ Highest or Lowest.
You can also filter your options by genre, rating and looking at which movies and shows have been given the Rotten Tomatoes ‘Certified Fresh’ rating.
You can also filter by streaming service which I think is a great feature.
Not just a review site, but a place for making movie lists and sharing them with friends. Movie reviews are all reviews from other users, not from any other outside sources like Rotten Tomatoes, IMDB etc.
On a free account you can search and sort lists of movies by year, genre, streaming service (limited with a free account) and by rating. You can then sort by more options and it’s an quite extensive, detailed breakdown.
For movies and TV shows you can access menus like ‘Top 250 movies’, ‘Most Popular Movies’, ‘Browse by Genre’ and ‘Top Box Office’.
For every category except for ‘Browse by Genre’ you can filter by IMDB rating, Release Date, Number of Ratings and Your Rating.
If you choose to browse by genre then your options for sorting are, ‘A-Z’, ‘User Rating’, ‘Number of Votes’, ‘US Box Office’, ‘Runtime, ‘Year’, ‘Release Date’, ‘Date of Your Rating’ and ‘Your Rating’.
The breakdown gave me a good understanding of Rotten Tomatoes, Letterboxd and IMDB ratings systems and how they work.
The Rotten Tomatoes UI and system seem to be the easiest to understand and use.
User Interviews
I conducted interviews with five users via zoom and over the phone, aged between 26 and 46, who exhibited above-average viewing habits. During these interviews, I focused on various aspects of their watching patterns, including favorite streamers and the challenges they faced while searching for content to watch. Additionally, scripted questions were included to inquire about their usage of review sites and their preferences for specific review platforms.
Following the interviews, I used Affinity Mapping to synthesize the data into distinct categories. This approach allowed me to identify prominent themes that emerged from our users' responses, providing a clearer and more comprehensive overview of the information gathered.
Themes
Trust In Rotten Tomatoes
Recommendations And Word Of Mouth
Streaming Habits
Lists And Searching
User Streaming Complaints And Suggestions
Review In General
Reviews of movies and tv shows were important to 4 out of 5 users and Rotten Tomatoes is the most used, trusted and used of all the options.
5 out of 5 users felt that it’s more difficult to find something good to watch these days and every user felt they just see the same things on streamers each time they log in to watch.
Each user had very similar streaming habits when trying to find something new to watch. They check the first few rows of suggestions from the streamer and then generally move on to another streamer or give up completely.
Social Media and word of mouth from friends are the most common ways people hear about something good to watch.
Before creating my user persona I wanted to have the right POV and HMW statements. I quickly jotted several variations down and narrowed it down to what I felt was the most simple and direct:
POV: I’d like to explore ways of helping people who enjoy good movies and tv find something new to watch in a quick and easy manner.
HMW: How might we make it simple, easy and fun for someone to have more control when searching for something new to watch?
To get a better understanding our users’ pain points and the process our user would go through with the addition of this feature I decided to generate a user journey map.
Give ‘Peter The Picky Movie Watcher’ power and control back by designing and prototyping a filtered search page with the focus being on the user's ability to see results by Rotten Tomatoes ratings.
Methods: Task Flows
Goals: Get out a simple task flow that matches with our user to help move the design forward
After the research phase, I took the initiative to move my vision forward by creating a well-defined and user-friendly task flow:
Methods: Low fidelity wire-framing, creating a UI Kit and high fidelity mock-ups
Goals: Quick ideation of key screens for our task flows and a first version of high fidelity screens
Prior to sketching out wireframes, I dedicated time to analyze popular websites known for their proven filtering pages, such as Airbnb and Zillow. This exploration allowed me to draw inspiration from their effective filtering strategies and proven user interface designs, which in turn will help inform the creation of our wireframes.
While reviewing the Airbnb filtering page, I took note of it’s simple and clean interface. The use of straightforward buttons and well-implemented padding caught my attention as well. One feature that I believe should be incorporated in the project moving forward is the sticky bottom "results" button. This element dynamically updated as users selected different filtering options, enhancing the overall user experience.
Zillow was similarly clean and very well designed. As with Airbnb the sticky button at the bottom was also used with Zillow. The main element I took away from studying the Zillow filtering page was the excellent use of check boxes to narrow results.
Next, I sketched multiple low-fidelity layout concepts for the design. I tried several different options of where our user would find our new feature. Specifically multiple button options on the on the home page and a new button added to Netflix’s search area.
Large Button Added To Home
Small Button Added To Home
Filter Button Added To Search
Screens And Iterations Sketched For Our Task Flow:
Button Additions To Home And Search
Filter / Custom Search Page
Results Page ‘Rows View’
Results Page ‘Single Carousel View’
Prior to creating high-fidelity wireframes, I took the step of designing an initial version of the new UI kit. To maintain visual consistency with Netflix's branding, colors, and typography, I utilized an existing Netflix UI kit that I found online. By referencing their button sizes and general padding, I ensured that our new UI elements would seamlessly blend with the current app. Here are some of the notable new UI elements that were generated:
Filter Button To Search Bar
I took original Netflix Search Bar and added a filter button to get our user to our new filter/custom search page.
Rotten Tomatoes Buttons Iterations
I designed three different versions of buttons for our Rotten Tomatoes section to try in the filter page.
Version 1: Checkbox And Description
Version 2: Small Buttons
Version 3: Button And ‘Selected’ State
Save This Search Button
I wanted our user to have the ability to save their search for future reference so I designed a ‘Save This Search’ button with two states.
Not Selected
Selected
Sticky Results Button
I wanted our user to have the ability to save their search for future reference so I designed a ‘Save This Search’ button with two states.
Bottom Nav With Results Button
Results Button 'Clicked' State
Results Page Genre Switch And View Switcher
To address the issue of displaying an overwhelming number of movies or TV shows on the results page when multiple genres are selected, I created a genre switcher option. This feature allows users to manage the content they see effectively. Additionally, to enhance the user experience further, I incorporated two viewing options: 'Row View' and 'Single Carousel View.' To facilitate this, I designed a carousel icon that enables users to easily toggle between the two viewing modes, as depicted in the high-fidelity screens below.
Genre Switcher On Results Page
Carousel View Icon
Referencing my user interviews and my low-fidelity sketches, I began to design my first round of high-fidelity screens to be prototyped and tested eventually.
Filter Button Addition To Search Page
Custom / Filtered Search Page
Results Page ‘Row View’ First Genre
Results Page ‘Row View’ Second Genre
Results Page Single Carousel View
Just before I was about to began testing I realized that users needed to the ability to choose either movies or television shows on our filter/ custom search page! I included these two buttons at the beginning of our page.
Methods: Prototyping and moderated ‘click-through’ usability testing
Goals: Analyze the ease and usability of the design and synthesize the results
After designing my first iterations of high-fidelity screens, I set them up to be prototyped and tested using Figma. I wanted to test my initial task flow with a slight variation on 5 users.
A user wants to do a ‘filtered search’ for comedies and dramas released between 2010 - 2020, sorted by ‘Highest To Lowest’ Rotten Tomatoes ratings.
Save their search.
At the end of the task flow each user was also asked about:
The general hierarchy of the ‘filter form’.
If a user would ever use the ‘Awards’ section on the ‘filter form’.
Would users like to search ‘Movies’ and ‘TV Shows’ separately or together?
The five individuals who were interviewed for this project also served as our testers.
Success Metrics, Task Completion:
All users were able to complete both tasks in the same process. The biggest issue was in starting the task. Each user clicked on the search icon from the home page but once they arrived at the search page 3 of 5 users did not understand or know to click on the small rectangular filter button. Quite a large finding, discussed further in key takeaways and iterations.
Success Metrics, Average Time on Task:
The average time to complete the tasks, which were done in essentially one flow, was 1 minute 45 seconds. Besides the initial hiccup with the button users found the task easy. Users were asked how difficult the task was on a scale of 1-10 (10 being the most difficult) and the average score was 2.5 of 10.
Success Metrics, Overall Aesthetic And Visuals:
5 out of 5 users felt good about the overall visual theme, color and aesthetic which was familiar to them being the Netflix UI.
3 out of 5 users had difficulty knowing to click on the new filter button once they arrived on the search page. A big finding! See more about changes to this problem in iterations.
Users wanted to see the Rotten Tomatoes section higher on the filter/custom search form as they felt this was the most important and useful feature.
2 out of 5 users mentioned wanting some of the boxes on the filter page to be pre-selected and easier labeling of the ‘Release Year’ and ‘Duration’ sections. Before and afters of some changes in iterations.
2 out of 5 users wanted the ability to sort either High To Low or Low To High for the Rotten Tomatoes results. Something I should have caught! A note of adding that was made for iterations.
One user took issue with the size of the ‘Save This Search’ button, they felt it was too small and could be missed.
Methods: Iterate and review
Goals: Take key findings and refine the design
CTA Button
The issue with our users not being able to find the new feature easily was the biggest takeaway from testing. I decided to design a larger CTA button to add to the search page that would take our user to the new feature. I did some explorations on what that button could look like and some explorations on the UX Copy:
Button Explorations
Eventually I landed on this final CTA button design which also gave us the title for our new feature!
Release Year And Duration Before And Afters
Release Year Before
Release Year After
Duration Section Before
Duration Section After
Addition Of ‘Sort By’ On The Results Page
Results Page Before
Results Page After
Netflix Custom Search
A few users commented on loving the ‘Save This Search’ feature but wanted to know where they would go to see their past searches. I would like to work on designing that screen and implementing how users would access that area.
One user discussed wanting to see different filtering options if she had selected ‘TV Shows’ over ‘Movies. For example how many seasons, how many episodes etc. filtering options. I thought this was an excellent idea and would next like to design how the Custom Search page would change if the user selected ‘TV Shows’ over ‘Movies’.
Every user commented on thinking the ‘Awards’ section was a great feature, but when asked if they thought they would ever use it said “more than likely” not. The next steps would be further exploration and testing on whether this area should be developed further or potentially get rid of.
Start designing how this new feature would look and work on the Netflix Apple TV App.
Brightguard Sunscreen
End-to-end internal facing application for one of the leading sunscreen dispenser companies in the United States.
Community Collect
Helping those who are dedicated to helping others.
