Netflix: Addictive Shows… and Product Design
Last quarter, over 75 million Netflix subscribers enjoyed two billion hours of movies and TV shows on their laptops, TVs and mobile devices. While subscribers gush over original Netflix shows like House of Cards and Orange is the New Black, few subscribers realize the feats of product design and engineering that underpin Netflix’s operations.
In this post, I want to just touch upon why Netflix is a marvel from a design and engineering standpoint, and show how that product excellence plays right into Netflix’s business model and their success to date. To really give the design and engineering justice, I would need more room than one tiny blog post, which is why I have linked extensively throughout this post to other articles and Netflix’s tech talks and blogs. My goal for this post is to provide just an overview as to why Netflix is a beautiful product from a product manager’s point of view.
Netflix’s Business Model
To understand Netflix’s product features, it’s important to understand the underlying strategy and business model that drive those very features. Netflix has a subscription based model where users pay a monthly fee to stream content on a variety of devices. Thus, from a product standpoint, Netflix should focus on designing for all the usual metrics such as subscription growth and retainment. Netflix’s strategy for hooking more subscribers is to produce more original content, to the point where it has pledged to spend $5B on original content alone in 2016, which is second only to ESPN’s programming budget. Netflix has widely touted its strategy to produce original content to its investors, which I cover in more detail in another post.
What is less talked about, however, and what I think is far more unique, is Netflix’s potential to create niche programming that it knows will appeal to a particular audience. Netflix has gained this incredible ability through its personal recommendation engine. Over the past few years, Netflix has focused ruthlessly on understanding its users and their movie-watching preferences by collecting huge amounts of data and developing proprietary algorithms. It has hired people to watch and tag thousands of movies and TV shows for genres, emotions and a myriad of other factors to predict user’s content preferences. And this engine has the power to completely turn the Hollywood movie production business model on its head.
You see, normally, Hollywood simply produces a movie and then hopes that it will attract viewers. Every year, countless overworked assistants screen thousands of movie scripts, and show only the most promising ones to their bosses, who are usually Creative Execs at big movie studios. If those Creative Execs find that those scripts match their “artistic tastes” or they find a famous director or actor who take a liking to the script, they greenlight the production of a movie.
Consider for a second how backward this business model really is. In nearly every other market, informed consumers have forced businesses to evolve from pure sales companies to product excellence companies. Today, huge marketing budgets are set aside every year to conduct consumer research, run focus groups and validate a product’s success in a market. Hollywood does very little of that. Instead, it still mostly uses the original business model, where a product is created, never mind the consumer, and then huge and flashy promotions with TV Ads and billboards are used to entice consumer into buying.
Unfortunately for Hollywood, the old business model is a lot less effective in today’s world, which explains the relatively high number of Hollywood flops we’ve seen in the past few years (for 2015, think Jupiter Ascending, Black Hat, The Fantastic Four, Steve Jobs).
What Netflix has, however, is the capability to conduct extensive consumer research to help decide what does and does not get produced. Netflix uses a modern business model where the consumer guides the product and demand drives sales, rather than the other way around. The personal recommendation engine allows Netflix to create niche programming that Hollywood or major TV networks would never risk because they don’t have the ability to predict how that kind of niche programming would do in the market, or a cost-effective way to target the consumers that would be interested in niche programming. So as Netflix gains bigger and bigger budgets for producing original content, it’s business model might start to look like this:
This explains why Netflix has invested so much time, energy and engineering resources into its personal recommendation engine, and reveals how vital this part of Netflix’s tech is to its business model.
Now that we understand a little more about Netflix’s business models, we can see that Netflix needs to design for the following business goals:
- Subscription Growth and Retainment
- Gathering Movie Preference Data
Product Design
While Netflix contains a ton of examples of good product design, I have chosen to select only a few and group them by their business goals: product design focused on subscription growth and retainment, and product design focused on gathering movie preference data.
Subscription Growth and Retainment
To capture new subscribers as well as retain old subscribers, Netflix needs to provide a flawless user experience. There are two stages to every user’s use of Netflix. First, the user needs to be able to quickly and efficiently browse through Netflix’s categories and recommendations to choose content to watch. I call this “Design for content browsing”. Second, the video has to stream without glitches and in the highest quality possible for the user’s device and bandwidth speed. I call this “Design for streaming”.
Design for content browsing
Beautiful and functional UI
Netflix released a huge reboot of its UI this past summer that literally took my breath away when I first saw it. Here are screenshots of the front pages in the old vs. new design so that you can see what I’m talking about:
Right away, you can see that Netflix wanted to create a design that actually mimics the mood and feel of physical movie theater. The dark color scheme, subtle shadowing and focus on gorgeous imagery really work together to bring out the cinematic theme. Like a billboard, the large panel on the front page gives Netflix a prime location to advertise its own original content. Beyond these theme changes, however, the animations are what really make this design a sleek hybrid of beautiful and functional.
The easiest way to explain beautiful UI and animations is to simply show it, so I’ve made a series of GIFs that walk through the website’s UI.
First, there’s the slider. Left and right arrows appear after the mouse hovers over a section, and the slider smoothly pans left or right when hovering over the respective arrow to reveal more movie choices.
Then, there’s the pop-out animation of a movie within a row. The pop-out automatically flashes through screenshots of different scenes in the movie, which is much more powerful at drawing users in than a static image (this is similar to the new Facebook/Instagram carousel ads, which allow the user to swipe through several images rather than simply see one static image, and have successfully driven up clicks while lowering overall customer acquisition costs).
Finally, there’s the Jawbone animation which elegantly opens a more detailed view of the selected feature without leaving the current browsing context. In the detailed view, you get all the information you need to make your selection (directors, actors/actresses, maturity rating, etc). If your decision is to keep browsing, one click outside of the detailed view sweeps the view right back in and brings you back to where you were before, whereas another click on the play button instantly starts streaming the selected feature. In the same way that Facebook doesn’t open to a new page but lets you view videos in the news feed, Netflix understands that browsing is a process where the user wants to consume additional information about a specific piece while still maintaining context.
What’s amazing is not only the aesthetic and functionality of these animations, but also the incredibly fast startup time and rendering of all the assets on the page, especially when compared to the pre-summer 2015 design. The Netflix UI engineers were able to achieve this through three major changes:
- Minimal rendering on the server
In the previous design, Netflix would pre-render onto the server every asset that the user could ever click. Clearly, this was inefficient, as there are a significant number of assets that the user never clicks on at all. To change that, Netflix adjusted the architecture so that the server only loads what is needed for the current view. Client-side javascript then takes care of requesting for additional assets as needed.
2. Universal Javascript
Since Netflix had moved to rendering some assets on the server and some on the client (rather than all on the server), the engineers had to think about how to support identical rendering on both the client and server. The solution they settled upon was to use universal javascript, or more specifically to use Node.js for their server side code and React.js for their client side code. From an engineering standpoint, universal javascript had huge benefits in that engineers only had to work in one programming language and rendering logic could simply be given be passed down from the to the client. You can read more about this here, on Netflix’s tech blog.
3. Taking Advantage of React.js
React.js was perfect for the design highlighted above because of its built-in hooks to access DOM states, the flexibility to incorporate more hooks and reusable components architecture. React.js hooks were essential to the animations because they allowed for staggering of the animations, efficient but reliable rendering of assets, and even fine grain control of where the user landed on a page after an animation. With a few more custom hooks, for instance, Netflix engineers were able to ensure that when the user went back to a previous view, the page was always scrolled to their previous location. Netflix engineers also used React.js to build the slider without any delay during slides by using hooks to preload five images to the left and to the right. Similarly, React.js forced programmers to build UI as reusable components, which made it easy to reuse components like the slider and jawbone panel throughout the website.
How exactly Netflix used and customized React.js is discussed in far more detail in this tech talk at Netflix’s HQ, which I attended last August.
Number of Devices Per Account and Pricing Model
While this is far more minor, I also want to note that Netflix’s design of their pricing model really shows their understanding of the user. While other content subscription sites allow only one device to stream at a time, Netflix understands that people will inevitably try to share accounts for this type of service. Thus for only an extra $1 per month, Netflix allows two devices to stream simultaneously, and for an extra $4 per month, allows four devices.
Design for streaming
Books could be written about the tech behind how Netflix actually retrieves and streams high quality video from a database to your device in a matter of seconds. Even with my high level explanations, you can begin to see the complexity and ingenuity of the Netflix tech stack. The following diagram is a rough summary that shows how Netflix’s use of EC2, adaptive streaming, proprietary CDN and in-house data retrieval technology all tie together to make the feat of streaming two billion hours of content per quarter possible:
Data Storage on Amazon EC2
Netflix has over 1 pedabyte of movie and TV show data stored on Amazon EC2. The choice to use Amazon EC2 rather than their own data centers allows Netflix’s engineers to focus on core technology rather than issues like storage and networking infrastructure solutions.
Encoding Movie Data
After downloading the master version of a movie or TV show to EC2, Netflix then encodes each film into over 50 different versions based on video resolution, audio quality and network speed using machines that run on cloud computing. The Netflix app then runs adaptive streaming algorithms on the viewing device to choose the best encoding. By using this encoding, Netflix appears to automatically and effortlessly optimize your viewing experience for your available bandwidth and device capability.
The encoding essentially consists of the bitrate, the number of bits that can be processed per unit of time, as well as the resolution, the number of pixels per video frame. The challenge for Netflix, however, is that assigning the right encoding is not easy. Too low of a bitrate and the video quality suffers. Too high of a bitrate and the storage and transmission bits allocated will be wasted, leading to higher costs. One approach is to simply find the optimal bitrate at standard resolutions across all content. What Netflix found, however, is that two videos at the same resolution can require entirely different bitrates to avoid artifacts. A cartoon, for instance, consists mostly of video frames that are composed mostly of “flat regions” and would require a much lower bitrate, than say an action movie, which has far more temporal motion and spatial texture.
Even resolution can be tricky, since the precision at which each pixel can be colored also affects video quality. What this also means is that at the same bitrate, a video at a lower resolution but higher precision can actually have better quality than one at a higher resolution but lower precision.
Netflix’s solution is to write an algorithm that finds the optimal bitrate-resolution encoding for every movie, rather than use something naive like an average. At a high level, the algorithm works by plotting bitrate versus video quality at each resolution.
This produces an overall curve called the convex hull, which represents the maximum video quality possible at each bitrate. Since there are technically infinite bitrate-resolution combinations, the algorithm runs a trial encode on a fixed set of resolutions to measure video quality and interpolate several resolution curves, ultimately choosing the bitrate-resolution combo that is closest to the convex hull.
Proprietary CDN
A CDN is a globally distributed network of proxy servers deployed in multiple data centers, designed to serve content with high availability and high performance. A CDN achieves this by routing requests for content to the node that can most efficiently handle that request, such as the node that is the fewest hops away from the network. Netflix has its own proprietary CDN called OpenConnect which connects directly to ISPs (Internet Service Providers), which are the companies that provide internet to customers (think Comcast, Verizon). Netflix has optimized its own CDN routing using intelligent mapping to determine which server is the best location to stream from.
Fast and Reliable Data Retrieval and Update
Netflix has built several in-house technologies to improve its ability to quickly and reliably update event and streaming data, which would require an in-depth technical explanation of cloud computing and networking I don’t have room for here. Just looking at the sheer number of open source projects that Netflix has released, however, you can easily get a sense of the technical contributions that Netflix has made in these areas.
In particular, honorable mention goes to Astyanax and Dynomite. Astyanax is a Java Cassandra client that abstracts the database connection pool from the Cassandra API, so that the pool can be set up and managed without touching Cassandra directly, as well as provide a way for engineers to easily narrow or customize a query, again without touching Cassandra. Dynomite provides a more efficient way to query single-server databases like Redis or Memcache than using traditional master-slave setups. Dynomite works by connecting Redis databases to a Dynomite node which can calculate whether its associated Redis database contains the data sought for in a request. It can also send the request to the correct Dynomite node through a series of hops across nodes. Both of these solutions shave milliseconds off of querying and returning data, which eventually add up to seconds on a Netflix customer’s device.
Gathering Movie Preference Data
Personal Recommendation Engine
As I’ve touched upon in the previous section, Netflix’s personal recommendation engine is an amazing feat of engineering. Netflix has an excellent two-part post on their tech blog dedicated to explaining all the intricacies behind the engine, but I wanted to provide a summary for those who don’t want to get quite so nitty-gritty into the tech.
The basic idea of the personal recommendation engine is to create a model that can accurately predict a user’s movie preferences. In today’s world, this usually means training a machine learning model on inordinate amounts of data.
While Netflix certainly has talented machine learning engineers and data scientists, the biggest reason why Netflix’s models are so successful is the quality of data. The Netflix engineers built their own extensive database of all the possible features of a movie that cause a like or dislike preference. They did this by spending months working on the Netflix Quantum Theory, a 36-page document which details all of the microtags that could be used to categorize movies. These tags include items such as the “social acceptability” of main characters, jobs of main characters, movie setting, or whether the movie ending was “happy”, “sad” or “ambiguous” Most of the tags include a scalar value, so that movies that are considered “romantic” are not simply labeled romantic but are given a score of romance from 1 to 5. From these microtags, engineers produced 76,897 genres which are uncannily specific, such as “Feel-good Foreign Comedies for Hopeless Romantics” or “Scary Cult Mad-Scientist Movies from the 1970s”.
Keep in mind too that Netflix has extensive microdata on your movements within the website, including not only whether you watched a certain movie, but also how far you watched, the number of times you paused, your scrolls, mouse-overs, clicks, and the time spent on a given page.
Note that this approach is far more advanced than using users’ self-reported preferences or simply ranking movies by overall popularity. In self-reported surveys, for instance, users tend to have a rosier view of what they enjoy watching (people tend to say that they watch a lot more foreign movies and documentaries than they actually do), and ranking by popularity is the opposite of understanding individual preferences. With this data-driven approach, Netflix’s personal recommendation engine has been so successful that it drives 75% of its user activity through recommendations.
Closing Thoughts
By taking a closer look at the design and engineering behind key features such as Netflix’s beautiful new UI and personal recommendation engine, I aimed to show that product managers should watch Netflix not only for its addictive shows, but also for its addictive product design which so successfully drives subscriber growth and retainment.
