Netflix — Task Flow and Design Patterns

Nicole Yuen
4 min readJun 30, 2021

--

Netflix has been my best friend for the whole quarantine period, and I’m sure many can relate. Even before the pandemic, Netflix has stood strong as one of the most innovative streaming services to date.

So, how did Netflix achieve this? We’ll go over task flows and design patterns to explain why so many people opt for Netflix based on their user experience (UX) and design patterns.

Task Flow

First, let’s take a look at a simple task flow I created below. The diagram follows the journey of an active subscriber who is looking for a new horror movie to watch in the evening.

User flow for Netflix as an active subscriber

Common design patterns are used to navigate users to go from start to finish in the task flow.

Design Patterns

What are design patterns?

It is a standardised design system that can be reused to solve reoccurring problems in user interface (UI) design. They are used as a basis for designers to quickly build interfaces whilst maintaining consistency among larger organisations. Therefore, design patterns are seen as blueprints to allow designers to pick the best and most used interfaces.

Below are some design patterns found on Netflix.

Navigation

Navigation menu

The first design pattern we commonly see is navigation.

When users land on a page, there is an expectation that they can easily find what they are looking for in a systematic order. Therefore, the goal of design is to ensure a simple yet effective method of allowing users to access all the pages. By using a design pattern, users who have never visited Netflix can easily identify the navigation bar and find where they want to go next.

On Netflix, the navigation sits horizontally on top of the page with clear labels showcasing the type of shows subscribers have access to. It is global navigation where users can have access to it at all times should they choose to browse for a different category.

By clicking on the different links in the navigation bar, users are directed to a new page and are greeted by various subcategories e.g., films can then be browsed by genre and within that, by popularity and newest releases, etc.

To avoid confusion, selected pages (“films”) is clearly highlighted by a bold type font on the navigation bar. This is a common design pattern to indicate to a user of an active state.

Search

Search results

Within the navigation panel, the next common design pattern we see is the search bar. This is usually indicated by a magnifying glass icon to illustrate to the user that by clicking on the icon, they can search for a film or TV show directly without having to use the navigation menu.

Card Carousels

Card carousel effect

Finally, the last design pattern I want to touch upon is card carousels.

Netflix uses card carousels to organise its content and information. Cards are activated by hover controls. Unless the user hovers over a particular card, non-essential information is hidden to let users find relevant information easily without being overloaded by all the nitty-gritty detail. With this, progressive disclosure is a common design pattern to only show users information and features relevant to the task at hand.

By breaking input demands into subsections i.e., all films presented on one page and information about individual films on the next helps reduce cognitive load.

Key learnings

If we look at Netflix as a whole, it is no easy task to create a service that contains over 5,400+ movies in one library. In addition, to support over 200 million hours of streaming per day across 200 million streaming subscribers. Regardless, Netflix has successfully managed to make something so complex yet so simple.

In fact, by observing Netflix and their rising competitors such as Disney+, it becomes obvious how some of the design patterns adopted by Netflix have influenced and can be seen in some of these newer streaming services.

Overall, we can attribute a large part of Netflix’s success in the digital world to its intuitive and ever-evolving UX and design patterns.

--

--