Site Redesign: Giving The Netflix Homepage A Fresh Look

Netflix Redesign by The Fox Is Black

Click image to enlarge

I often complain about the design and look of websites. There’s a lot of sites out there that simply need some love and a few tweaks, and they’d instantly be much better off. There are also a lot of sites out there that have been around for so long that they’ve got digital junk laying around their site, like they could be on an episode of Hoarders. Instead of complaining endlessly about the matter I’ve decided to do something about it. So here’s my first try at redesigning an existing website to look and function better.

Let me be clear about my objective. I’m not trying to rethink or reinvigorate these websites, I’m simply giving them a facelift. Clearly these sites are popular for a reason, so I’ve made a list of simple suggestions on how they can improve their user experience. My version is meant as a critique of their current website, definitely not an attack on anyone in particular.

To start off my first redesign I chose a website which I use quite often… Netflix. I use Netflix quite often, and I love using it… on my television. The 10 foot experience is perfect for browsing movies on your couch. But when you use their website it looks like it hasn’t been updated in about 5 years. Is it functional? Yes. But could it look and function better? In my opinion, the answer is yes. I’m not here to make the whole damn site better, far from it, I simply have some ideas that I think would help. I should also make it clear that I have no relation to Netflix, this isn’t some kind of ad, I’m just doing this because I’m a weird-o. So what would I change? Read on to see my suggestions.

Color Palette
Netflix Modified Color Palette

Original Color Palette

Netflix Original Color Palette

Modified Color Palette

The first thing I’d do is adjust the site’s color palette. Netflix currently uses it’s trademark deep red, which is reminiscent of movie theater curtains (a nice connotation), a dark blue for their links and primary action buttons, a yellow-ish gold for their user-rated star and navigation arrows, and a series of grays to round things out. I’m a fan of the red, it’s obviously their color, but the blue seems like a web legacy color which kind of drives me crazy. The yellow color of the stars also seems a bit dull to my eyes.

My suggestion would be to leave the red, introduce a bright green that can visually stand it’s own against the intensity of the red, and change the yellow to a shade that’s bright and poppy. The red and green seems like a natural idea to me. I think this combination manages to defy the X-mas stigma that tends to pop-up when you pair the colors, and instead makes the standard links and buttons pop-out quite nicely. I enjoy scanning the page and seeing lots of green opportunities available to me. I also like the bursts of yellow where I’ve rated things. I’ve also simplified the shape of the stars and made them flat rather than the 3D style that’s currently on the site. To me the fake 3D-ness interferes more than it enhances.

Search and Site Navigation

Netflix Navigation and Search

A big change I made was to the top portion of the site, specifically the search field and the navigation. I have no metrics of what the most important aspects or areas of Netflix are, but I feel like Search would be high up on their list. So, I straight up copied YouTube. If it works for one of the most largest websites out there, why not for Netflix? I increased the size of the Netflix logo, which felt kind of weak to me, and put in a big ol’ search bar next to it. My guess is people want to instantly find the movies they want to watch, so the giant search bar would help facilitate that.

I also gave the top level page navigation a bit of a makeover. I didn’t feel like the one, giant navbar that’s currently used worked very well, so I decided to use a common tool and make some tabs. It’s far from innovative or fancy, but it works. I gave it a little visual hierarchy, some differing shades of gray, and voila. I feel like this area could potentially use some more work, but I think this application is stronger than the existing one.

User Engagement and Suggestions

User Engagement and Suggestions

Click image to enlarge

I based my mock-up idea on a screencap I took which leaned heavily on user engagement, specifically, making it easy for the user to finish watching a movie they’d started, and also getting the user to rate the content that they’d seen recently. But these actions were displayed in such a way that took up way too much room, effectively pushing the recommendations way down the page. So I consolidated things here and tried to use the space more efficiently.

Previously, the ‘You Recently Watched’ section stretched the entire width of the page, as did the ‘Rate’ a previously watched film section. I decided to consolidate these into one, cohesive, 950 x 145 pixel module unit that gives you the ability to rate four movies and finish watching three movies you’ve previously started. I chose to use the same progress meters because they work just fine.

Finally, there’s the ‘Top 10 for Bobby’ section which is used to give the user suggestions. My assumption is that this area is meant to be a cream of the crop, the “here’s exactly what you want” area which gives a user suggestions that they’ll love. Unfortunately, this section doesn’t feel special, premium or custom-tailored in any way. So I thought it would be nice to introduce a gradient here which transitions you from some utility features into a more premium, just-for-you area. I kept the overall structure here pretty much the same, though I grayed out the other selections to give more focus on the selected film. I also ripped out the description of the content, which used to live in the flyout menu, and put it next to the content so you can easily read what the movie is about and have access to the info more easily, no messy pop-outs needed.


Redesigned Netflix Recommendations

Click image to enlarge

I didn’t want to go crazy with the Recommendations section of the site because it seems pretty functional just the way it is. I did think you could use the space a little more efficiently though, so I chose to add another entry into each section. I think I could definitely be wrong about my ideas here. Five options could end be feeling too cramped or like there’s too much information there, and maybe Netflix has some metrics around this, I don’t know. It’s not quite perfect, but I think it works.

Miscellaneous Thoughts

Honestly, I don’t really feel like Netflix is that bad, which is part of the reason why I chose it to be the first. I feel like Netflix could take two weeks with one designer and one developer sitting together in a room, and they’d be way better off than they were before. My ideas aren’t meant to be revolutionary or groundbreaking in any way. It’s simply saying that small changes can make a big impact. I’m sure I could have done a lot more with this project, but I wanted to create something rather quickly and get it out quickly so that I didn’t dwell on my ideas or overthink things too much, as I tend to do.

I’d love to hear your feedback on this self-assigned design project. You don’t have to like or agree with anything I’ve done, all I ask is for you to be constructive and polite with your comments. I’m planning on doing more of these as well, so if you have any ideas for future redesigns, feel free to leave them in comments. Just remember that this project is aimed toward larger blogs that lots of people use, don’t think you’re going to get a free site redesign out of this, haha… I’m really hoping to see if Netflix picks up any of these ideas. I don’t really care about making money, I just want to see good design spreading throughout the web.


April 18, 2011