The new msnbc.com: Designs we left behind

~ 14 November 2007 ~

UPDATE: Upon request, I’ve linked the image showing my notes and the screen that followed.

If you haven’t paid it a visit already, the new msnbc.com is worth a look. Nearly two years of research, planning, iterative design, and development went into this behemoth overhaul. It isn’t merely a redesign with a more lively, vibrant brand, but a genuine realign that thoroughly repositions the website as a separate entity from the cable channel, among other things.

Screen showing the new msnbc.com

This redesign is of particular interest to me as I had a minor role in shaping the outcome. Creative director Ashley Wells offers an in-depth, behind-the-scenes debriefing of all things design in his post-launch commentary titled “Designs we left behind,” in which he mentions my role as well as that of Greg Storey and JD Hooge. I won’t reiterate Ashley’s account, but I will offer a few details about the role I played.

Ashley approached me nearly a year ago with an offer to fine-tune a design his team had been working on. Seeing how I almost took a position with them (more about that here), I’ve maintained a working relationship with Ashley’s crew and therefore jumped at the opportunity.

When I’m given the chance to offer design critique and enhancement, I do my best to become cognizant of every detail, knowing a body of work is undeniably greater when each individual element is at its best. I’ve said before details a great designer maketh, but I’m certain we can all agree details a great design maketh, as well.

To assess the details of the design I was provided with, I spent time pouring over the Photoshop template, eventually printing a copy and filling the margins with notes regarding improvements to the hierarchy, typography, and iconography — all of which were minor enhancements to what I felt was already a very solid design.

My enhancement, therefore, doesn’t appear to be earth-shatteringly different. A few aesthetic adjustments and type changes were implemented, while the largest changes altered the lower fold to improve hierarchy and to create a better snapshot of the day’s content higher on the page.

Obviously, the new version published last week is a good deal different than the original design, but such is the path of a year-long iterative design process influenced by new thinking, a major media campaign, and so forth. I really like what I see. The new version is an incredible improvement and an impressive body of work, to boot. Further, aside from all the embedded scripting and CSS, which is likely a result of the CMS or other three-letter curse word, the code under the hood is pretty clean. (Although a DOCTYPE might help, guys.)

Compliments to Ashley Wells et al on a stunning makeover.

 

24  Comments

Veer Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1   Nik ~ 14 November 2007

I am not a regular user os the MSNBC site, mostly because it always felt too cluttered. It’s great to see major websites pay more attention to the presentation of their web content, as it is players like these that you need on your team to win the Standards Game.


2   BlueStreak ~ 14 November 2007

I had MSNBC as my home page until the advertising became overwhelming. I wrote to them about my signing off due to the obtrusive ads — never heard back. Will give it another try. Congrats on having a hand in such a high profile project CM.


3   Dale Cruse ~ 14 November 2007

Interesting behind-the-scenes insights, Cameron. Thank you for allowing us to see some of the process that went into choosing the design.


4   chriskalani ~ 14 November 2007

Looks really good. Although those dropdowns are insane. I’m sure you didn’t have to do with that though, maybe.


5   Tim ~ 14 November 2007

Does anyone else find the design that Cameron gave critiques on MUCH cleaner/simpler than the design used.

Now I understand MSNBC new marketing campaign is to use the entire rainbow as a color palette, which is fine, but the layout and design of the new site looks like dozens of individual design elements smashed together instead of a true “integrated” design.

It seems like people are giving it more praise simply because they were briefly involved with a massive redesign on a major site and not being objective about stating that the new design is actually *worse* than some of the initial design comps.


6   LP ~ 14 November 2007

Sweet layout…very nice on the eyes


7   Ed Knittel ~ 14 November 2007

I have to chuckle - sorry.

The HTML behind this thing is dizzying. Firebug is throwing up all kinds of warnings - especially in regards to repeated IDs.

My favorite is the “Disable Fly-out” option at the bottom of the left-side menu. Adding this must have been a very difficult decision. Someone somewhere got into a pissing match and lost.

I like to imagine it went something like this…

Important Man: “We should have fly out menus that are better than anything that has come before.”

Busy Worker: “But getting them to work well in all browsers is tricky and most people don’t even like them.”

IM: “I’m sorry but I couldn’t understand a thing you said what with all the crying and mumbling that you were doing. Make it happen.”

* some time passes *

BW: “I’ve spent months getting these menus to work in IE, Firefox and Safari. I even got it to work in Opera even if it’s a little slow to respond. No one cares about Opera so we won’t even mention that it’s supported. We probably shouldn’t even mention Safari.” (see: http://www.msnbc.msn.com/id/6901603)

IM: “These menus are insane! How can anyone be expected to use these things?”

BW: “But you said you wanted them.”

IM: “You really must stop crying all of the time. No one can understand you. Put a button on the side so I can turn these damn things off.”

If an option exists to turn something off on your web site ask yourself if it’s even necessary then (Flash mute buttons and “Skip Intro”)

The site looks nice which it’s an improvement. The team did a fine job on that front.

I’ll save my other thoughts about such things as having an anchor class called “linkBlack” and the lack of unordered lists (I’m looking at you “MORE FROM TOP MSNBC HEADLINES”) for some other place and time.


8   James ~ 14 November 2007

Appears that they did not add DOCTYPE to the code. Is there a reason for that?

I like the new look, much better then then old. Congrats Cameron!


9   Julian ~ 14 November 2007

Two years of research.. and it uses flyout menus??? omg


10   Jeff L ~ 14 November 2007

The embedded css/js code is probably more for performance reasons, rather than a crappy CMS.


11   Jeremy ~ 14 November 2007

Excellent work, Cameron. I’ve been enjoying the new MSNBC design since it’s release, and in the back of my head had wondered if you were involved in some way. Much of what I like about the new site reminded me of your work. MSNBC has come a long way in the past several years and it’s neat to hear a little about how it’s all come together. Thanks.


12   Michael McCorry ~ 14 November 2007

I don’t see any any flyout menus. Am I missing something?


13   Andrew ~ 15 November 2007

It always amazes me how much content they fit into these websites. How many links do you think they have on that 1 page alone?


14   Stu ~ 15 November 2007

@Michael McCorry

The links next to the logo!?! Beneath the search box.


15   Greg ~ 15 November 2007

> It always amazes me how much content they fit into these websites. How many links do you think they have on that 1 page alone?

As I recall the finished rendered page would have 200+. Madness.


16   Marc ~ 15 November 2007

Okay I hate to trash something that obviously took a ton of work to put together, but there’s definitely some issues…

First of all its pretty… my complements to the designers on the graphics. I especially love the weather elements.

However… EEEK!!! Those flyouts! They’re so sensitive and there’s so many of them it seems hard to browse the page without accidentally mousing over them. On top of that, they duplicate navigational content that’s already provided in the main body. And “Disable Fly-out” is a cop out. Obviously they know there’s usability issues with the flyouts, otherwise they wouldn’t provide the option. Either make the flyouts show only if I hover over the actual arrow for a full second or two, or get rid of them completely.

Also the content looks great above the fold, but below that it lacks the feel of a natural rhythm. Its got too much whitespace between related elements it becomes very blocky. It gets even worse when you dig deeper into the site.

Looking at the photoshops you put up Cameron, it looks like they had a much better design before.

Frankly, I think The New York Times and The Washington Post still do the best job of presenting a live news site. They fit a TON of content on their front pages without feeling too cluttered, overwhelming or blah. They use proper proportion of feature stories to non-feature stories, headlines to teaser text, etc. They change the column layout multiple times to keep your eyes moving down the page. They feel tight & organized but not cluttered and overwhelming.


17   Jim Ray ~ 16 November 2007

What’s a DOCTYPE?


18   Noel Hurtley ~ 16 November 2007

Cameron, I think your design concept is far-and-above better then the end result. It’s so much cleaner, more organized and professional.


19   Shane ~ 16 November 2007

I like aspects of the final product better, but one thing that I really wish they would of stuck with is the header image from the one you are showing. Also I really enjoyed that folded edge at the top left side.

Other than that it seems that they made some positive changes.


20   dan ~ 17 November 2007

you can disable the flyouts - see the bottom of the left navigation on the home page (right above ‘marketplace’)


21   BristolSEO ~ 20 November 2007

Understanding the thinking of an Interface Designer is one thing, being demonstrated their thinking patterns with specific projects is a gem.

Thanks for sharing the layouts and thinkings of this superb design Cameron.


22   John Yellow ~ 03 December 2007

I’m not a big fan of the msnbc site myself. Seems like there’s too much information cluttered in a small space. But is good to hear that such sites are actually paying attention to layout of their pages.


23   Stephen McCutcheon ~ 18 December 2007

new website design has improved in the days following its original release. At least the designers seem to have got rid of that awful banner ad at the top of the screen.

However I still think its more of a mash-up than an integrated whole. The last design was more solid looking and worked just fine.

For those with extra fast connections, using MSNBC as a home page provides justification for the new look as it is more interactive.

Still for me, its not a huge improvement and if anything, I prefered the last design.


24   Max ~ 15 May 2008

It seems like people are giving it more praise simply because they were briefly involved with a massive redesign on a major site and not being objective about stating that the new design is actually *worse* than some of the initial design comps.




About

Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…


Jobs
Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


Recently

A selection of fine reading, available for a limited time only:


In Print

CSS Mastery CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.

Mobile Web Design Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Recommended

Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


Speaking

HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter