Netflix Lite

Case study: 001

As seen on Dribbble

Why Netflix?

I’ll be honest; I’ve spent a lot of late evenings browsing through Netflix on my MacBook. Beyond a good days work and a good meals gratification, I’ve slumped on my couch many a night searching for that perfect movie or TV series to stream, before my eyes take their days rest.

Or at least that’s the plan.

More often than ever I’ve driven my self into deep oblivion even before I’ve come to terms with what I finally want to see. The reason? Indecisiveness (surely) on my part but, more often than ever I’ve wasted time scrolling through the endless arrays of stacked categories that Netflix provides. The suggestions are not the bad part, I’ve developed an intense fondness towards their recommendation algorithms. What peeves me more is the experience provided to scroll through those endless carousels.

For devices (viz. mice) that have been engineered towards vertically scrolling content for ages and for websites that follow the same norm, it pains me to perform an action so tedious and unnecessary, that at times it has even locked my fingers into a bird claw.

I’ll admit, touch/track pads or even a touch sensitive mouse (a.k.a the Magic Mouse) profoundly simplifies the process but, they do not justify its necessity.


The Carousel

In a single category array Netflix provides 5 (maybe 6) tiled cards horizontally displayed from left to right. If the number of arrays being displayed at any time in the viewport are say 3, you’re seeing a maximum of ~15 movies in a single instance. That’s great but, what I’m actually seeing is just the first 5 recommendations of every category.

What I want is to be able to see more recommendations of a single category (15, or even more) at a single instance along with an easy access to another categories content. Sure I can go into an individual category page and view the content but, that would be a few extra clicks into and out of the page if I do happen to change my mind and switch to another category.

Also, scrolling in this carousel doesn’t help either. The left and right navigation arrows placed on either edges jump through 5 cards at a time instead of a single progression.

It’s human nature to visualize and consume content from left to right; just like we read a book. It is regrettably also human nature to be eager and impatient. Even before we have registered the information from the 4th and 5th cards, we’ve already clicked the right arrow to progress to the next, but as we’re jumping +5 and not +1, we’re compelled to go back and refresh our minds on what those 4th and 5th cards portrayed before we repeat those steps all over again.

It’s the same reason why consuming content on (if you recall) the revamped MySpace 2.0 never worked back in ‘08, nor do the more recent Instagram Stories. Luckily Stories has a continuous playback feature and a short duration span per story so you’re likely to not miss out on much but, manually swiping through the horizontal list with your thumb is slightly vexing and has greater potential to miss out on content you actually want to peruse through due to the seamless scrolling mobile devices offer today. Perhaps its own page would solve the problem, but that’s a hurdle to jump over some other time.


Above the Fold

Netflix does have quite a resplendent above the fold, but rarely does its content remain consistent. On a day when I actually want my last watched episode showing up front and center I get a newly released low budget (and shockingly high grossing) Adam Sandler movie showing up edge-to-edge. And on a day when I might need a stellar recommendation, I land up with the season finale of a show I’ve already binged on the previous night. It isn’t too much of a hassle, but as the entire site is so dynamic with its category placement, it’s hard to visually map the site in your head so you would know where to (or how much to) scroll to reach a particular section of the page which may or may not contain the content you wish to consume.

If it’s Recently Added directly below the fold on a Tuesday, it’s the Popular List a week later. In all honesty what I‘ve actually always preferred is to find my queue showing up right on top of the category arrays, but rarely do I find it (sometimes never appearing on the front page) before I have to dig it out from one of the drop-downs in the top navigation. Sure would be nice to have it pinned somewhere.


Making Amends

I’ve realized while writing this article that the solution can be brought down to just two simple amends:

  1. Practicality over a grandiose above the fold, and
  2. Switching the horizontal scrolling elements with vertical scrolling and vice-versa.

I’ll elaborate. But first, this:

Netflix Lite

The first change is to make the above the fold less dynamic and more practical. The tiled mosaic simplifies my content consuming experience by dividing a third of the area with a list of my history and queue, and the rest with my recommendations, previews and/or future releases. This grid can be easily customized to suit each users preferences through their individual account settings. Now every time I open Netflix, I know where to find my history and queue, my recommendations, and my featured items.

The second change is an easy but less obvious fix. My requirement was to have, 1. less horizontal scrolling, 2. more suggestions from a single category and 3. ease of transitioning between categories. The solution? Switch the scroll type between the list of categories and the list of content per categories.

What used to be a vertically scrollable list of recommendation arrays is now combined into a list of tabs up top (below the fold) and each tab now has a vertically scrolling list of recommended content.

In this way we’ve managed to narrow the number of horizontal scrolling options to just one in the tab list. I can easily scroll and view more content within a single category and with the help of the tabs I can even switch back and forth between categories with ease; and if coded correctly, possibly even with the [Tab] button!

Replacing the tiled landscape mode cards with vertical posters give more space to showcase content. In the 12-span I’m able to accommodate 6 movies/TV shows per row and show on an average a minimum of 2 rows in the smallest viewport available. This means in its worst case scenario, I’m showcasing 12 movies of the same category (compared to previously 5 in each, and 15 in total) and I’m easily able to switch back and forth between categories with a single click of a tab. All tabs in view being preloaded wouldn’t take time when compared to a whole new page loading when a user dives into a category on the existing site.

Other functionality can remain more or less the same as shown above. Netflix does a decent job of providing only the necessary information of a chosen title at a glance along with the option of quickly adding them to a list. It’s just the overall visibility and navigation experiences that make it harder for the user to consume content more efficiently.


In Conclusion

Netflix is already leading its market by having an almost sole monopoly in the online movie streaming discipline. With their Netflix Originals already pushing boundaries in mainstream cinemas and a few visual and functional tweaks like those mentioned above, they could well be on their way to provide a more nourishing and fulfilling user experience with the primary goal for their online users to — consume content first!


Note: This article in no way aims to undermine the comprehensive efforts undertaken in creating the Netflix we all know and love today.

The above representation of the Netflix website primarily focuses on fixing the two issues mentioned in this article. The color scheme has been contrasted from the original dark mode to a much lighter, visually pleasing theme which absents itself from the content on display. A single Call to Action on the top right strengthens the ‘search anything from anywhere’ ideology with a single click, without losing the current view. Red is the only color swatch imported from the existing Netflix color palette to represent a more familiar and focussed action.

This article is also the first in a series of case studies that are part of my new portfolio on Medium; along with a selection of my client work and some other creative projects. You can check them out here.


Like what you read? Give Pixel Plotters a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.