‘Netflix’
Building on Netflix’s pre-existing search system, I designed an advance filter system to add specificity to a user’s journey.
Role:
Research, User Testing, Prototyping, and UX Design
Time:
5 weeks, 2023
Tools:
Figma
01.1: The Problem
01.2: The Research
01.3: The Discovery
02.1: The Vision
02.2: The Features
02.3: The Ideation
03.1: The Solution
03.2: The Iteration
03.3: The Future
01.Discover
With over 200 video streaming services currently in existence, in the United States alone, it is safe to say that we are currently living in the streaming era. This media revolution can be traced back to a company called Netflix that has been leading the pack since 2007. The platform boasts 5,000+ titles which draws 260.28 million paid subscriptions from all over the world.
Type ‘Netflix’ into the search bar on any social media platform and hundreds of posts can be read about the difficult of finding anything worthwhile to watch on the platform. I believe due to the large quantity of titles available on the platform a “lack” of quality content isn’t the problem, but the acyual navigation of the content. For instance, how many people know that Netflix offers a variety of workout videos? Not many and I was one of them!
01.1: The Problem
I set three research goals:
Learn about how much time Netflix users spend on the search for a desired title.
Learn about their preferred method when looking for their desired titles. Methods are the search bar, the homepage, and the category pages.
Learn about users like and dislike about the platform.
01.2: The Research
-
I conducted a competitor analysis to find direct competitors that Netflix users could possibly have an interest in using.
-
Phone interviews and a digital survey was distributed to five Netflix users to obtain data on how they utilize the platform’s search algorithm and how accurate they believe Netflix to be in their title recommendations. Multiple choice, open-ended, and Likert scale questions made up the survey and the data received was distilled into the results displayed below. Frustration about the seemingly “illogical” organization of titles on the ‘For You’ Page was a common emotion expressed across the surveys.
01.3: The Discovery
After affinity mapping, I synthesized the responses to reveal key takeaways.
Interviewees reported experiencing a feeling close to hope in the first five minutes logging on to the platform to then experience a feeling close to apathy when the search for title went over ten minutes.
Interviewees exhibited a loyalty to the platform due to its longevity and diverse content.
-
Two personas were created that embodied the ideal ‘arete’ users which acted as a north-star when building the application’s feature.
-
An empathy map was created to deepen my understanding of an average Netflix user’s perspective.
02.Define
Project goals were defined to help conceptualize the features needed for the application to ensure that the users’ needs will be met throughout the brainstorming process. Moreover, it helps me realize realistic business goals and technical constraints.
I was able to extrapolate a concept for the app from my research and further define the product’s goals:
Design an advance filter system that could integrate into Netflix’s pre-existing search system.
Allow users to add specificity in their search for a title, specifically in the category pages.
02.1: The Vision
Netflix’s current search system is extensive with the ability allow users find titles through multiple avenues. After an overview of their site map, I saw a spot where users could find titles another way that builds off the category page search avenue.
02.2: The Features
-
-
A user flow to map out the exact path users need to find their desired titles. Click here to view the full flow diagram.
02.3: The Ideation
After a thorough review of my research result, I believe Louisa’s primary concern would be with navigating the copious amount of titles on her television. The new search feature’s information was organized to match Netflix’s pre-existing system. Users will be able narrow their search results and learn about the many types of titles on the platform.
-
I the users to only have to use a little amount of clicks to reach their desired titles.
-
The ‘per-filtering’ system was selected instead of the ‘live filtering’ system through A/B testing. 3 out of the 4 testers concluded that it was least confusing option between the two since per-filter allows the filters to only be applies once a user hits a submit button.
03.Design
Netflix’s UI library can be described as minimal and fun. The selection of a cherry red as their primary showcases the brand’s boldness while the shades of black acting as the supporting colors highlight its seriousness. Combined with the sleek designs of the product’s components created a distinct impressions on users.
#FA0000
#191919
#141414
Color palette
Login screen
-
Fun Fact: Netflix developed their own font! Since i don’t have access to Netflix Sans, I used its dupe, Helvetica.
Utilizing the pre-existing UI library I was able to evolve the mid-fidelity wireframes into the first version of the high-fidelity wireframes to then be converted into a clickable prototype.
03.1: The Solution
-
Composed of 6 screens, the prototype depicts the task flow needed to go from the category page to the results page after a filter is applied.
-
Three users remotely tested the high-fidelity prototype and completed a post-test survey via Google Docs. It was important for users to be able the navigate the prototype in under five minutes with less than three errors. Fortunately, all users were able to complete the click-through in under five minutes and committed errors when they had to select filters. One tester commented on how they expected to be able to choose between television and film. Results and feedback from the test were used revisions.
Three iterations on the product were mostly informed by user feedback. They were applied to make the search through titles even more smooth.
03.2: The Iterations
I added an Alphabetizer on the right side of the results and I changed the hover function on the button to match pre-existing hover function.
03.3: The Future
What I learned:
The skill needed to design a product with the use of a pre-existing UI library, UX patterns, and the current Netflix user.
What I would do in the future:
It would be cool and informative for me to actually observe a user searching for a title on the platform.
I would to use eye tracking software, like IntelliGaze, that would inform me where a person’s eyes go first on the screen.
I would like to design a mobile and desktop version of the feature.
