In late 2016, Netflix enabled the ability for customers to download TV shows and movies onto their mobile devices to watch without and internet connection.

After initially eschewing offline viewing¹, leadership’s attitude started to shift after our global launch in early 2016. Our service was now available worldwide in countries where internet connections could be spotty, internet speeds could be painfully slow, cellular data costs could be prohibitively expensive, and the ability to watch shows offline seemed like table stakes for any streaming video service that wanted to be successful.

I was part of the design team that researched, conceptualized, designed, and ultimately launched Netflix Downloads to tens of millions of customers throughout the world. My role spanned everything from conceptualization, strategy, and ideation to customer research and prototyping.

Early Design Explorations

We suspected that while downloads would most likely be a popular feature in some markets, in others it may not see as much use, so we wanted to balance discoverability and usability without unnecessarily increasing the complexity of our relatively simple UI.

With this in mind, our early explorations centered around ways to minimize the presence of download icons throughout our UI. The following is one of many of the early explorations I did exploring ways to minimize the amount of download icons we might need throughout the UI for series.

In the following concept, tapping the download icon would expose a condensed list of episodes where you could then tap individual episodes to initiate a download. There was also a bar at the bottom of the resulting screen that would show you how much space you had on your device and how much space would be consumed by the downloads.

Final Designs

Ultimately we found that having download icons in obvious places was the best solution for most of our members and that it didn’t seem to overly complicate the UI.

Prototype Development

I built several different prototypes for this project, but the final prototypes were developed in vanilla Javascript, HTML, and CSS running inside of a native iOS wrapper (written in Swift) to give it the appearance of a native iOS application.

As part of this process, I wrote a method that gave the illusion of the time an actual download might take — this was important because we wanted to be able to simulate realistic download speeds as we learned early on that performance could heavily skew the perception of the feature for the people we were interviewing (e.g. “Wow this is so much faster than [insert streaming service here] — this will be amazing!”). Here’s what it looked like within the prototype:

Here’s some example code to show how it was done:

// Initial progress is 0
let progress = 0; 
// Generate a random integer
const getRandomInt = (min, max) => Math.random() * (max - min) + min;
// Start a new interval timer
const downloadTimer = window.setInterval( () => {
    // Update the progress every 2 seconds
    updateDownloadProgress();
}, 2000);

// Method to update progress
const updateDownloadProgress = () => {
    const newProgress = progress + getRandomInt(0, 0.06);
    
    if(newProgress < 1) {
        // Our download is still in progress...
        // Update the progress
        progress = newProgress;
    } else {
        // Set progress to 1
        progress = 1;
        
        // Download complete, stop the interval timer
        window.clearInterval(downloadTimer);
    }
    
    // Log the progress for testing purposes
    console.log(newProgress);
}

To make the progress appear longer (e.g. to simulate a worse internet connection), either reduce the max value for getRandomInt() or increase the interval timer.

Results

While this wasn’t a traditional A/B test (there was no control experience because this was a novel feature), we did observe very high engagement in those regions where we thought it would have the largest impact. And, to our surprise, we saw even higher engagement in some of the markets where we didn’t necessarily expect to have as much impact.