A Look at the New MSN.com Design

Since March 9 of this year Microsoft has been rolling out their new design of MSN.com.

Backed by countless hours of testing and roughly 70,000 pieces of feedback from their users, the design has been tweaked over the last four months to its current state.

Visitors who cannot yet view it at http://www.msn.com can access it at http://preview.msn.com.

In this post, we take a look at the new redesign and examine its positive and negative aspects.

Feel free to share your opinion on the design in the comments area.

Over the last decade three main search pages established a solid grounding as sites that people turn to when they start their online experiences.

While Yahoo and MSN focused on adding functional elements to their pages, Google stayed with a minimal design and instead they put their new applications on different URLs with only subtle mentions on their main page. Google came out ahead but Yahoo and MSN have not given up and they still hold a major portion of the market.

One of the main goals of the new design is to update the interface with a much cleaner look; a look reminiscent of Google. To achieve this they’ve changed the background to a consistent white and they’ve added tabs for the various content sections. They’ve also given higher visual weight to the main news section by giving it a bigger heading and making its images larger. This gives the user a clear indication of where their eyes should be immediately drawn, which helps to make the site feel less busy.

The white background makes the site look clean but it does so at the expense of losing the blue, which made the old site easily recognizable and unique. Despite the feedback that MSN has been receiving that states that the white background feels cleaner, it might be beneficial in the long run for Microsoft to embrace their old blue background color. By going with a single background color many vertical lines were removed. This makes the site feel wider despite it actually being slightly thinner by around 20 pixels.

The tabs also make the page look much cleaner. The sections on the page do not seem to be grouped in an obvious way but this isn’t necessarily detrimental. MSN realizes that this page will not be used like a newspaper or even as a news website.

Each section provides small headlines and short sentences aimed at enticing the reader to click through and learn more. When talking about the new design, Scott Moore (MSN’s General Manager of Content and Programming) explained that the site uses machine learning to divide the users into eight groups.

He didn’t go over the details but this might mean that the placement of the sections/tabs will be determined by the things in which the users have shown interest.

 

Content Additions

A feature that the MSN team decided to focus on is social networking. Users can now log into either their Windows Live/Facebook/ Twitter account to get live updates displayed on their MSN homepage.

This is a feature that some people will find slightly handy and others will ignore completely. “Social Media” has been an Internet buzz word for more than a year now and it’s surprising that MSN has taken so long to integrate it into their home page.

The social media addition won’t influence many people into using their homepage but it doesn’t affect their appearance negatively and it shows that they’re embracing the Internet instead of forcing their users to only use MSN applications.

The MSN homepage redesign has given the Bing search bar much more prominence. It’s been given its own section instead of being forced to share its space with many various elements.

This increase in attention for Bing has given their search engine a double digit increase in searches. The larger Bing search bar could be one of the best features of the MSN redesign because it shows that MSN now has a better understanding that homepages are generally used as a starting point for a web search. People will be quick to change their homepage if they think that MSN is taking too long to load irrelevant content.

The third major addition is a focus on local content. At the top right of the page there’s a link for Local Edition. Local Edition is like another version of the homepage but it’s more relevant to each individual. The user can save up to three different cities (or zip codes) but it’s not very intuitive about how to add them. The user has to input a city name, click “Save” and then to add another one they must click “Change”. It would make more sense to instead have the link read “Add”.


Local Edition

Once the user has selected a city they have access to local news, weather, sports, movies/events, restaurants, gas/traffic and a few other items. All these features are really well implemented except for the Restaurants section.

For the Restaurants it simply lists nearby restaurants with links to reviews, 5 star rating images, and directions. When the Review or Ratings links are clicked a page is loaded that lists various details about the restaurant but it doesn’t have any customer reviews and the rating widget is nowhere to be seen. It feels like this feature was taken from a static reference book.

sThe other features are all well done and it’s worth trying them out. Be advised that at this point in time Local Edition is only available in the United States.

The last addition worth mentioning is the TrendWatch feature which lists the latest Twitter trends. This feature is oddly similar to Yahoo’s Trending Now section but it has arrows next to each search query to show its popularity momentum. It’s a bit tacky and its placement at the bottom of the page makes it feel more like an after-thought than a useful feature.


Yahoo’s Trending Now compared with MSN’s TrendWatch


 

Performance

Interestingly, the old MSN site downloads all its content to the user’s machine using one second less than the new design. The new design then executes much more code making its total completion time almost 3 seconds longer than the old design.

The Local Edition performs slightly better than the new design with a document ready time of 2.582 seconds but the fully ready time is an ugly 10.545 seconds due to an embedded video being loaded.

Because everything displays in roughly the same amount of time, users are not likely to notice the difference in performance and this might be detrimental to the new design’s success.

Home pages should be extremely fast and this is an area where MSN has the opportunity to really shine against the majority of their competitors. Crowds of people crammed in coffee shops or airports sharing wireless networks want sites that load the fastest.

If they have MSN set as their home page they will quickly navigate to a faster site or they’ll use the search at the top right corner of most modern browsers. If this occurs often enough then the users will be tempted to change their home page altogether.

Note: http://www.webpagetest.org was used for testing. The following are the three tests that were performed:

 

Overall Design

The overall redesign is effective. It addresses some of MSN’s concerns with their old design and it provides a cleaner image for Microsoft.

The design provides a slightly better visual hierarchy but there’s definitely room for improvement. The main content section is the first to grab the user’s attention, followed by the sizeable Bing search bar, but after those two elements it’s tough to pinpoint what exactly will draw their attention next.

This is due in part to the page having a large amount of content which all has different levels of importance to each individual. Because everyone is different it’s tough to know exactly how to set the visual path but even a slight hint could yield significant results.

No section has a higher visual weight than any other section.

While the color scheme works, it does not define the design. Except for the slight gradient at the top of the page and the MSN logo, there’s nothing that displays the MSN identity. The site comes across as bland and without any personality. The page isn’t given a chance to sell itself by being charming; it can only rely on its features.

One of the best aspects of the redesign has been the introduction of significant white space. Each news heading has been given an extra 12 pixels of vertical space to separate it from the other headings. The font size has been increased as well which makes everything much easier to read.

 

Conclusion

This new design feels like it is being updated to fit in with MSN’s competitors. While everything looks nice and behaves as it should, not enough has been done to make the design push the boundaries of what a modern website can do.

The site traded its identity and clutter for cleanliness and a few mediocre features. Local Edition is a great addition and it has a good chance of catching on, especially if it’s given a well marketed mobile version.

 

References


This article was written exclusively for Web Designer Depot by Eli Penner

What do you think of MSN’s redesign? What would you have done differently?


  • Sani

    Hmm… Most of the article points out the good things about the new design. However, the conclusion slams Microsoft. Not surprising since no matter what MS does, the Mac Loving design community (or dare I say, cult), will find reasons for negative criticism.

    Case in point: http://www.webdesignerdepot.com/2009/05/apple-vs-microsoft-a-website-usability-study/

    And the intro of: http://www.webdesignerdepot.com/2009/02/22-website-designs-inspired-by-applecom/

    • http://www.sleepyhero.com Eli

      I am by no means an Mac-lover. I listen to my music on a Zune and I run Windows 7 at home. I don’t own any Apple products. I agree with you that most of the design community loves Apple.

      I also don’t think the conclusion slammed Microsoft all that hard. The design is a bit boring but it’s clean and Local Edition is pretty handy. The conclusion is a broad look at the design as a whole. Most of the article looks closely at the specifics. I really wanted to be fair. I apologize if it didn’t seem like this was the case.

    • Jay

      So you’re assuming that he was critical of the design because you think he uses a Mac? I’m sorry but that’s a completely ignorant statement. If Apple.com was designed similarly to this site, I can guarantee that he would draw the same conclusions.

      I find these points to be very well thought out and I agree that the design is overall somewhat lacking in terms of visual hierarchy.

  • http://lenatailor.designerteam.info Lena Tailor

    MSN now looks great. BIG improvement! But it’s not likely to get many people to give up their google page. I used to used the igoogle page but went back to plain simple google because it loads faster and is less cluttered.

  • http://webtolerant.com Amey

    I liked the old MSN better. IMO the blue made it more easier to read and find information. New design seems to spread out.

    Is it just me or does the new MSN also seem vaguely similar to dailyfinance.com?

  • http://www.cuoma.com Santiago

    I think that the white background makes the site look clean but please losing the blue in 100%, is a shame, because old site have a lot of branding about the blue.

    Maybe the new site have a lot of interesting things, but i think is a commodity, or similar to other millons news sites over the world. But finally is MSN. :-) a big player!

  • http://curbside.com/concierge-services/ Rich @ Curbside

    The new design is definitely less cluttered than the old one but it really isn’t breaking any molds. Very expected.

  • http://cssah.blogspot.com/ cssah

    I love the new design it’s awesome the color scheme is perfect, white space , and the interesting thing that they remove the gradient bg it was so boring . Th site become more accessible . would like that they redesign the Microsoft home page and i think they work on it now.

  • http://deliciousroom.com/ Yaro

    I don’t know… Microsoft’s design-style never convinced me.

  • KS

    It’s definitely an improvement, but wow. Guardian much?

  • http://www.corywilliams.com.au Cory

    Looks great, it’s just the menu fails. I find the delay really annoying. And it being a long menu list, you loose where the menu ends as it just blends into the content below. It could use a more defined outline, or something to make the visual distinction easier.

    • Marco

      Same thoughts. this site is hard to use. No delay on user actions, please! maybe more whitespace for a better readability.

  • Erico Lisboa

    Seriously… They are a big virus…
    please guys.. avoid this $$%%!!@$ as much as you can!
    I’ve a question.. the Msn Portal works well in I.E6? hahahaha

  • Art

    I don’t think it looks better

  • http://twitter.com/HiteshMehta Hitesh Mehta

    I am loving the new design of msn. Its pleasing to the eye and really liked the way the colors are used across the homepage. Very very aesthetic. Good work!

  • http://www.speed-motion.com.ua Oles

    I do not see any difference. Better not become

  • http://twitter.com/dazjones Darren Jones

    I certainly agree that they needed to update their brand. I do agree with Santiago that the blue was a key part of their brand and it seems strange that they have completely dropped it except for a slight gradient at the top of the page.

    The delay on the user actions is unbearable, although it is an improvement on the old it is still cluttered and not enough whitespace to make it easily readable.

    5/10 for effort.
    3/10 for excecution.

  • http://pixeno.com Pixeno

    I prefer the new design. Nice article by the way :)

  • 1623yankee

    The new MSN website may have lots of technical pluses but are they really pluses? Two things strike me.

    First, that it is not only a simple but apparently/deceptively simplistic approach, with its open spaces and calming pastels. It is obviously designed “down” to meet retailers’ principles of drawing the eye where the retailer wants it to go by losing the clutter. In other words, it caters to the “dumber” approach that Americans require because of built in, stupid herd mentality that has been trained into today’s United States. It is corporate and possibly psycho/political manipulation of the worst and most obvious sort.

    Second, that it enables the force feeding of selected information that leaves the user/reader little or less apparent choice of input. It is obviously set up to limit the reader/interacter’s ability to garner ALL of the material that the user would need to form unbiased, undirected conclusions. In short, MSN’s new front page is a propaganda tool.

    Yahoo attempted the same propagandist/corporate/retailer process using the overactive thyroidal approach of BANGING you squarely with oversensitive cursor activations that were enough to drive people AWAY from the site. Fortunately Yahoo’s pundits and geeks have started taking their meds again and things have calmed down.

    • http://www.sleepyhero.com Eli

      I don’t quite agree with you; I don’t think MSN sees themselves as a contender as a valid news provider. The “news” they provide is more like the magazine covers at the checkout line of a grocery store rather than the front page of a major newspaper.

      I wouldn’t call it a “propaganda tool”. It’s more of a distraction than a direct attack on the reader’s opinions.

  • http://www.jordanwalker.net Jordan Walker

    They did a great job, I am really impressed.

  • http://www.martincourchesne.com Martin

    I do love the new design ! Really clean. Nice colors. It’s definitely an improvement

  • http://www.sametomorrow.com adam

    I think they did a good job redesign MSN. It’s a lot more up to date looking and more pleasing on the eyes. It also seems alot less cluttered therefore easier to navigate.

  • http://www.madmacgirl.com madmacgirl

    I’m not a fan of the new design.

    Another minus is that when I go to the new site, MSN always asks if I want to download Silverlight to my computer, with no options to make that request go away. So now everytime I go to MSN, that question is always there.

    The new design strikes me as wimpy and I don’t even get a sense of Microsoft’s brand.

    Again, not a fan.

  • http://twitter.com/pearsestreet social network design

    Yes designs should be like this ,that is it should be simple and at that time attractive.

  • http://3circlestudio.com/ Justin Carroll

    The new design is much more simple than I thought it would be. As for not embracing modern Web trends, I wonder how many great ideas died in the process of making this site. I’m a little bothered that they traded their blue background for white, not because of personal preference, but because I think they may have missed an opportunity to embrace their brand.

  • http://www.natashastorm.co.za Storm

    Wow! The new site looks so much cleaner! I absolutely love the bright navigation. The site doesn’t look as cluttered as it always did. Stunning.

  • Niubi

    Feh, looks the same to me. If you look at the recent redesign of DubLi as compared to the old one, there’s a much more noticeable difference. Anyway, MSN homepage is a horrible website with far too much information – give me Google anyday!

  • Russ

    I think it’s safe to say that anyone that ‘currently’ use the MSN.com site will find the new design refreshing. I think they have made a good move.

    It’s pointless arguing Microsoft here though – if you don’t use them, like them then why on earth would you read the article in the first place.

    Great article

  • http://www.ukpb.co.uk/ Buy My House

    Awesome and very innovative improvement in msn, really it is looking very decent and spectacular.

  • http://moronicbajebus.com Seamus

    The thing that I haven’t seen mentioned is that it brings it more inline with the online identity of Microsoft Live. Of course this identity is not across the board, but that is another topic altogether about Microsoft.

    http://home.live.com/
    http://hotmail.com/

  • http://www.alejandroperazzo.com Punta del Este Real Estate

    nice but new logo is kind of odd. its like pepsi chanching the logo

  • http://www.sentril.com NYC

    Wow the redesign is so much better than the old version. The old version just felt so 90s.

  • http://www.cpasitesolutions.com/ Brian O’Connell

    I rather like it. No, it’s not very daring. It’s not supposed to be. It’s simple and clean. It looks easy to navigate. Advertisers will appreciate the lack of distracting clutter on the page which is a small price to pay for the huge reduction in dedicated adspace. I’m don’t really use MSN, mind you, but from what I see it’s a nice change of pace.

  • http://msn.com Sam Alberico

    can you tell me how I can access past msn.com articles? I would like the one from march 31st, yesterday on people who troll those who have lost loved ones.

  • http://msn.com Sam Alberico

    Need yesterdays articel on trolling those who have lost loved ones.

  • http://www.kaplang.com/blog Kaplang

    wow I am loving this new look, nice and fresh :)

  • http://www.msndesign.com Manish

    I like the new design of MSN website. It is so clean, easy to navigate and much better than previous design.

  • http://www.gamblingsiteguide.com/ Sites

    The design provides a slightly better visual hierarchy but there’s definitely room for improvement.

  • http://savitamunde.wordpress.com Savvy

    Hello Eli,

    This is very informative article to me.
    I would like to know more on MSN and their business. Can you provide me few links or articles or videos if you know anything…

    Thanks,
    Savita