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.


Recommendations

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.

Bobby

14 Comments Site Redesign: Giving The Netflix Homepage A Fresh Look

  1. Nick April 18, 2011 at 10:04 AM

    Overall, I like it, but the green and red scream Christmas palette to me, especially on the page with yellow stars!

  2. Marshall April 18, 2011 at 10:13 AM

    I agree, not a fan of the green.

  3. Ike April 18, 2011 at 10:35 AM

    While I do appreciate the effort, I’d personally like to see a more radical rethinking of the Netflix site UI as a whole, as opposed to a slight modification of the existing layout.

    The main design element you’ve chosen to alter is actually one that I find to be quite successful on the current site (ie the dark blue). It might be a bit ubiquitous on the web as a whole, but coupled with the red, yellow and all the other colors that pop from the film cover art, it works really well. Not to say that green wouldn’t work, but personally I would go with a much more subdued shade of green, similar to what they’ve done with the blue.

    On the plus side, I really like what you’ve done with the ‘Top 10’ carousel, putting the synopsis info right beneath the panel is a great idea, because frankly the popups can get a bit tiring, especially with that 1-2 second delay. The white-to-black gradient however, I’m not so crazy about.

    Overall, good attempt. I look forward to seeing what other sites you tackle going forward.

    Cheers

    PS: It should be noted that Netflix has recently redesigned the landing page for popular TV series (Brotherhood, Californication, etc), and those look fantastic… IMO

  4. Schroeder April 18, 2011 at 10:39 AM

    Overall it’s a nice improvement, however I agree about the green color. The current blue doesn’t bother me enough to change it because it’s easy to read on white and rarely gets used against the red. I don’t mind the green play buttons but the green links don’t feel like an improvement. I think that if the idea of having the red reminds you of curtains then something equally classy should be referenced, which is why I enjoy the blue. I do enjoy your treatment of the header/nav area, and the overall layout. I think that’s all a good improvement without overdoing any of it. Would like to have seen the footer on there as well just to see if you’d have changed anything there.

  5. jasp April 18, 2011 at 10:43 AM

    I feel like the green color of the buttons gets a little out of hand in the main recommendations section, but overall, lovely. I’m impressed with how you got a white-black gradient (which usually looks godawful) to completely become unobtrusive background.

    I’d love to see some sort of website design contests alongside the book recover contests! It’d be weird to do existing sites, but you could definitely do challenges for types of sites– design a website for a new italian restaurant in santa fe, design a blog for someone training for the special olympics, etc.

    Just a thought.

  6. brook April 18, 2011 at 10:50 AM

    christmas works though… since netflix is like movie christmas every day. haha.

    i dig the UI of the redesign, but i think more than a redesign, they need some serious speed improvements on their web app… and a radical overhaul of the iphone app.

    a) update icons and resources for iPhone 4. the fact they haven’t done this yet is sad. how long has the iPhone 4 been out? for an app that is primarily about a visual experience, and visual media, this is a big failure.

    b) i’m not 100% sure, but the entire app just feels like a badly done webview, which explains a lot of oddness, like the shoddy scrolling, or overall performance slowness. so, they should definitely build a native app if this is in fact just a webviewer.

    c) airplay. it’s great that i can use my iphone as a remote for my apple tv, but why can’t i just throw content onto it from my phone. i doubt this is a big deal to most folks, but the option to occasionally throw a movie that i’m already watching on my phone onto my apple tv would be nice.

    maybe netflix will throw a huge offer your way and you can get to work making it better :)

  7. Brennan April 18, 2011 at 10:59 AM

    I respectfully disagree with the green buttons. I personally find red buttons on the red background more of a subtle thing, where the green creates too many points of interest (10+ per page) and that becomes a bit overwhelming, I think.

    But I definitely agree the whole site needs a redesign – not just aesthetically, but in the organization of it’s information. Keep on it, you’re on to something!

  8. TreasureLA April 18, 2011 at 11:05 AM

    I love the idea of this feature. I agree with Ike that your Top 10 carousel is an improvement, but that the green is a bit too vibrant.

    If you want more of a challenge, the company I work for could use a major facelift. http://www.procon.org/

  9. Lily April 18, 2011 at 12:17 PM

    With the green and the yellow and the red, it reminds me a lot of the Rotten Tomatoes site design. That said, the repositioning makes a lot of sense. Love the gradient.

  10. Kingsley April 18, 2011 at 12:22 PM

    I’m actually completely on board with the use of the green links. I think red and green work fine together as long as its not a dark green. Also the slightly rounded edges on the links makes it feel a bit more inviting.

    Combining the ‘recently watched’ section and ‘top 10’ is probably the best part for me since I hate how much space the “rate what you’ve seen” area takes up before showing the top 10.

    Finally, doing away with those damn fly-outs would be a huge improvement.

    Looking forward to seeing more posts like this.

  11. Cory April 18, 2011 at 2:58 PM

    @ Brook

    The iPhone and iPad applications are pretty dreadful. Not bad for webview based applications, mind you. But they definitely would be a lot to gain from a native implementation. The XBox and Playstation 3 Netflix apps get to have a fancy interface, why not iOS!

  12. julie | julie digs design April 18, 2011 at 6:38 PM

    Wow, this was very interesting to read. Once thought among many, I really like the green instead of the blue. Adds a bit of “pop” to the overall layout and truly makes sense!

  13. Justin April 19, 2011 at 2:55 AM

    I think that lime green is more of a web legacy color than the blue. Immediately reminds me of a angelfire or myspace page from back in the day when people would pick the brightest color possible regardless of the background color. And unfortunately it does come off a little too christmasy.

    Maybe making the blue a little more cyany?

    Good UI tweeks tho.

  14. Elizabeth April 22, 2011 at 7:25 AM

    I really like the improvements. They’re subtle but just enough to make navigation that much easier (especially the search bar!).

    However, I don’t know how I feel about the red and green. The Christmas connotation is still a little too strong for me. I thought, perhaps, a lighter blue, something bright and cheery and different enough to still excite the eye.

    Also, one feature I wish Netflix had was a “to-watch” section, an area which you can check off films you want to eventually watch. To be honest, I really only use Netflix via the Playstation 3 so maybe this kind of feature exists on their website but I keep forgetting films I want to watch and I find that navigating the plethora of genres can sometimes be frustrating (or entertainment in and of itself, depends on the day.)

    I’m looking forward to seeing more user interface updates!

Leave A Comment

Your email address will not be published. Required fields are marked *