Designs we left behind

Posted by Ashley Wells on Monday, November 12, 2007 5:45 PM PT
Admit it. You saw our new homepage and it lived up to your wildest fantasies about online news presentation. Me, too. Okay, maybe—maybe—two, three people tops will say ‘what were they thinking?!’ Rest assured we were thinking. For about two years. Here’s how it started.

The gentle evolution



This is our existing design, just wider. And with a rotating video area in the top right. And collapsible links in the center. And icons. And time stamps. Nothing terribly exciting. User groups liked it. It felt safe. But they didn’t love it. Neither did we.

Culture shock



Don’t tell our editors, but I really just designed this one to scare them. Or, ehm, ‘challenge assumptions.’ Did we really need navigation on the left? Why not scroll visual stories sideways? How about we then just list stories? Let readers dial the amount of detail up or down and sort them by importance, number of related videos, user ratings, number of comments, time published, etc? Kinda like news search on steroids.

Nobody ran screaming. They had questions. But good ones. Turns out some of them had even stranger ideas. So we put a more colorful version of the one above in front of user groups with a few more measured options.

Sample platter



User groups can be tough. They debate shades of blue. Ads drive ‘em crazy. But they all agree on one thing: Put the date at the top of the page. Done!

Our first concept was just too complicated. So many options, so little time. The second, with its big rotating top stories, did better. But it didn’t offer enough variety. The last one pushed a video clipping feature at the top—a big ol’ box of video. They weren’t buying it. Turns out news video is often an impulse item.

All these users really wanted from us was simplicity. At-a-glance top stories. Interesting pictures. An easy to find sports section. ‘Tell me what’s important, but give me options to decide on my own.’ Hm. So we don’t have to re-invent ourselves? Like into a social news site? Or one that moves instead of scrolls? Just live up to our potential by doing we what we already do, but better?  If you say so …

Closer



I started this one on a plane with some help from Curious George sitting next to me. “I don’t like type on photos.” Neither do our photo editors. Let’s start with that. Then add flexible layouts. That way we can re-mix the news as it changes. “And you can skip all of that entertainment fluff,” said George. Whoa, Hoss. It helps pay the bills. Beside, everyone has different tastes. My wife might put entertainment up high. What if I let her do that and help George pretend he only reads weighty world news? So I sketched out a series of strips. Move buttons. Resize buttons. And headlines bundled with video, multimedia and in-depth topics. Yeah, that might work.

Back to user groups. They studied the new sketch versus the current site. Chins were stroked. Brows furrowed. Silence. They were torn. That’s a good sign, because the site you’ve already got always wins with these people. But not this time. They noticed the top layout powered by actual humans. And the resizeable, moveable strips. And more multimedia. Some—no, most—began to favor the new one. Not quite perfect. Not yet.

Outsourcing



It helps to have design buddies. In this case, we called on Cameron Moll, Greg Storey and JD Hooge to clean up our latest sketch. Solve this problem. Keep that. Make this work. Explore. Each influenced our final design. Along the way, we landed on a humble new lowercase logo and peacock-inspired color spectrum. Professional, but friendly. By now you know that below is where we ended up. Where to next? Let’s discuss …



Ashley Wells is msnbc.com's Creative Director and the design lead of the redesign project

Comments

Interesting, very interesting. The final product is rather interesting, and the point that many of the oddball nics and nacs are appearing (all lists on top, personality to program pages, etc.) really makes it overall feel pretty good. At this point, it'll be interesting to see how well everything works about two weeks from now
It's a good looking and working site. You did well. it will remain my homepage.

Thanks
Hi Folks
I like the new look. You will have negative comments, of course, but no change is without some resistance.  The look could be debated till the end of time, but onward and thanks.....Good Job.
You should have stuck with the one titled "closer", allowed your loyal readers to dump the content they have absolutely no interest in and left clean navigation on the left.

A good business model never forgets what they are selling and why the customer comes to them instead of the competition.  The more a customer can customize their content, the more likely they are to be a return client.  Taylor your non-intrusive ads around this framework and you'll finally have a winner...
First of all, I have done a lot of soul searching to ensure that I am not resisting rational change. I don't think that I am, because I often change the look and feel of my desktop and my windows mobile device, looking for better formats to get the information I want and need.  Now that I have satisfied myself that I can accept change, I must say that I like the old design of msnbc.com better.  msnbc.com has been my home page for several years, and I go to it many times each day. I love the familiarity which allows me to quickly absorb the latest refresh of information and select links for in-depth information. Yes, I can learn to be familiar with the new design, but it has obstacles for me.

- In the old design, "top stories" was intuitive. A list of several top stories, and one "really top story" with a big picture. My brain can assimilate this rapidly. The new design, however, makes several stories look like "really top stories", with the multiple panes and multiple pictures. Which one do I read first? On the left? The middle? The biggest picture? The biggest headline?

- Too much scrolling. With the new design, I can get less total information on one screen, thus requiring me to scroll or click tabs more often to absorb the same amount of information.

- In the old design, all of the major categories fit down the left side of the first screen. I could use the flyout menus to quickly peruse all of the first and second level links without ever clicking. In the new design, the categories do not fit on the first page. Furthermore, the new flyout design is wasteful of space and covers up too much of the base page. Also, the new flyouts seem to be extra sensitive to mouse positioning, because I am getting more unintended flyouts with the new design, and I am distracted by having to click them away.

- I really like the customization bars for the section headings (business, entertainment, health, etc.). Expand/contract plus move up/down are great.  However, this does not make up for the loss of usability in the "top stories" and left side "categories".

- The top banner is far too large. The lower case logo is ok. The multicolor background is ok. The layout of standard links (e.g., Mail) is ok. The banner just wastes way too much space on the first page.

- Suggestions. Shrink the top banner by half. Make the "top stories" area similar to the old design, using only the right 3/4 of the page. Then give me back all of the left side categories on the first page. Also, the old flyout design had the same amount of information in a more compact format that was easier to read quickly.

Summary. The customizable sections are a big improvement. Everything else above and to the left of the sections was better in the old design. This is not about aesthetics or color or customization. It's about usability and getting the most information into my brain with the fewest mouse movements. The old design was better at that. The new design makes my mouse and my eyes move around more in order to obtain the same amount of information. In my opinion, the old design of msnbc.com was far superior to all other major news sites. The new design, while "prettier" in some respects, has regressed the usability of msnbc.com  enough that I have begun looking at the other sites again.
Wow!! I didnt know Cameron Moll worked on the redesign. Nice work again man!
I liked the first one the best, "The gentle evolution", nice and simple. The new design is too busy.
My initial impression of the new layout was "finally!"

I always thought the old layout was confusing and cluttered. Everything was thrown onto one main page that ended up making me dizzy; I wouldn't stay on the site for more than five minutes.

This new layout is exactly what msnbc.com needed. My hat is off to everyone involved with the design!
Give me a chance to get used to it.  I'm still learning my way around - took me a few days to find my personal stuff...weather, news, stocks, etc.  So far I'm not unhappy with it  I'll let you know better in a few days.
I've got to be honest here, I really don't like the new layout... its harder to navigate and read the "headliners" or sub-headliners.

There isn't enough structure and my eyes don't know where to go.

It was a nice attempt at something different.
I really like the new look.  What I don't like is the fact that I have to sacrifice the list of news stories if I want a snapshot of my stocks.  I wish the stocks were a sidebar or part of the business section..... I have been reading the comments, this is a popular feature with people.  I know have to scroll through my stocks instead of getting a good look at all of them.  I know it won't be changed, but I wish it would be.
I think a few more interesting pictures hilighting the top news stories would be better. Somehow it seems like there's very little information on the main page and now I have to scroll around and search for everything. A little inconvenient and enough to lose my attention really quickly. I like to see many choices on the main screen and pictures always get my attention. I'm glad to see no obnoxious ads dropping down in my face when I open it up... or is it just a matter of time? That will send me packing for sure!
I like this new design much better than what we've been accustomed to the last few months. Having the abililty to choose what you can scroll to see first, next and last is ideal. I like the interactive political votes and all in all, a much more colorful and interesting site.
Overall I like it, but the multiple top stories is hard to get used to. I liked how the old one, the "main" story was big and obvious, then there were a few sub-main stories to the side, then the rest of the news below.

The new top area just has too many things trying to grab my attention. With the sub-main stories having pictures, and the fact that the main story is sometimes on the left, sometimes on the right, is just inconsistent and confusing to me, and makes it harder to tell when something has changed. The old site has good consistency and I liked that.

Like I said I think the changes are good for the most part, but the top stories is obviously a very important part of the site, and I don't feel like it's quite right.
Change is good if you let it be good and the website looks great.  At first, it seemed confusing, all the clickable links, but I realized I can click on the side navigation or scroll down to see stories.  It's not so confusing if you spend time learning what everything does and where it can take you.  I also greatly appreciate all the local news.  I spend a crazy amount of time on this site and will probably spend more.  Thanks for the hard work
Been a fateful daily msnbc'er since 2000.  Really dissapointed in the new headline sroll bar.  love everything else, but the headlines are too big and take up too much room.  Every "window" opened in each section takes up a lot of unnecessary room.

Keep the fancy stuff, go back to the tried and true for the headline scroll menu.

Thanks again for the great site!!
It is like anything new. Change is hard to get use to. I did find it difficult though, after I had clicked on other links, finding how to get back to the opening (msnbc.com) home page. Can you make that area clearer? Keep up the good work.

I liked the quick readability of the old design, especially the one recent article for each stock.  At this point, I think the new design is too busy.  Maybe I'll get used to it...
The TOP news story should always be in the top left corner, and the Breaking News banner should be in bold red color like the old site, not the current pastel red.  There is not enough contrast to draw my eyes to the breaking news section.  Overall, the new design is good but you should take in the comments from your readers to make it the best and keep loyal fans from switching to other sites.
In the article by Ashley Wells (above) she talks about how she was seated next to  a passenger on a plane, who she refers to as Curious George, who made the comment:
       "I don't like type on photos."  

Where did THAT come from? What incontrovertible authority decided that type on photos is inherently distasteful?

The top of MSNBC's new page is a jumbled mess.
One way to resolve this visual disaster area might be to go back to the practice of picking a lead story, then emphasizing that one lead story with the powerful and distinctive look that was uniquely MSNBC.com...

  a powerful photo with type on negative space.



Let's just hope "Curious George" doesn't decide that he doesn't like headlines on stories.
The new design is very attractive, but I do have issues with the video-heavy aspects of the site.

DSL is not available in our area, so we are still on dialup.  Videos and dialup just aren't very compatible.  I prefer having print entries/transcripts at times.  Just don't have time to wait for videos to load...and sometimes they DON'T load.
It's going to take me some time to get used to the new design, but I do like the movable content boxes. So far, MSNBC is still my home page, because much like the move from Office 2003 to Office 2007, I figure I'll get used to it.

However, the site doesn't use valid HTML, and there could be some problems with accessibility. I'm disappointed.
I've been using MSNBC as my home page for many many years, and it's always nice to see that you are putting such thought into how to please your readers. I hate to sum it up with a cliche, but sometimes the thought truly does count!

ps - The only thing I find disturbing is that it's going to be 88 degrees in Phoenix, while I have to drive hoem from work in a rainy/icy mix!
I really *was* expecting something that "lived up to your wildest fantasies about online news presentation". Sorry, but... I honestly don't think this is a patch on, for example, the clean simplicity of the new UK Guardian redesign (www.guardian.co.uk).

Design-wise the homepage especially seems to lacks cohesion and balance. The grid seems all over the place, and there are too many different typography styles going on, even just on the headlines at the top.

Some neat features. I liked the ability to 'customise' around your favourite news topics, and the pull-out headlines from the categories on the left. I was honestly just expecting a lot more from the design given the names who've worked on this - all of whom I have great respect for.

Could it be the solid grounding of a traditional newspaper in making text-heavy news content work gives them the advantage over a traditionally "television" organisation? An interesting thought. (I should also leave scope for the concept that The Guardian appeal more to me due to some cultural difference between UK and US readers).
Everything about the new design is better except the main story thing.  I want to know what MSNBC thinks is the lead at any given moment.  What matters the most right now, this second.  This is how I keep up.  

Since just after MSNBC came into being, (1996?) I have been capturing the lead photo whenever I first sit at my desk.  Now, (many computers later) I have a large file filled with the pic/graphic you chose as the main story. (MSNBC has been my home page since you started)  Viewing this file as a slide show is a fun and informative time-line.

I need to know what matters to you so I can decide if it matters to me.

Foy
Graphics may be nice but web pages loading like a 56K dialup is not.  If there is a way around this please post so all can clearly see.
I honestly didn't mind the "gentle evolution" or "closer" designs myself.  Those at least kept the navigation closer to the top of the page for a user to find without needing to unnecessarily scroll.  I know you were hoping to find a cutting edge design without shaking things up "too badly", however I think you went a little far on your attempt.  People need evolution when it comes to a namebrand site like MSNBC.com, not shock.  

Yes, the new site is pretty, but did you ever consult the people you created it for?  I am beginning to doubt that in your redesigns.  Try usability testing with your users, not with redesign team members.

And I agree, you should lose the obnoxious ads that continually drop down in your face when you open the page...that is plainly ad overkill and is not a service to your users.  When you stop focusing on our needs (as users) is when I will change my mind and go back to CNN.com.

I am not thrilled with the new design - it focuses too much on the one top story and makes me have to search for other stories that I might find more relevant.  The old one was a bit pedestrian, but at least I got my information quickly and easily.
where are the blog links and the clicked links?  I don't see them - otherwise, it will take some getting to used to, but otherwise - not bad - I envy the talent it takes to do this kind of work -
The new design is nice, but seems to sacrifice some of the specificity and prioritization of stories, as some have already (correctly) noted.  

What I haven't yet seen discussed, however, but which is no doubt a part of this project, and which has had far more impact on this site's overall usability, is the radical redesign of the video clip selection and player page.  

I have had a tough time getting used to it, but after using it for a while now, I might just be able to say I like it better than the old version.  Which was (and remains) the best news video site on the web.  Still, I'd love to get a blog entry on the evolution of the news video page just like you did here for the home page.  

Regardless, you guys are the new kings on online news and media.  (Who were the old kings?  Yeah... I don't remember either.)
The new design is great, really well done.  I have been using MSNBC as my homepage for a while now and the new design with local weather right at the top of the page and top headlines, video, and news shows available right from the page are all good additions.
Not all of your readers are under 40.  It is too hard to find what you want to read, so you end up reading a lot of stuff you don't care about.  Maybe you should offer a choice--new or old.  Let the users decide.
Good job!  Only one issue: I would like to see both "more news" and "my news" on the front page instead of having to toggle between tabs.
All of your layouts have the same fault -- WAAAY to much content to load quickly. I removed MSNBC as my default because it takes too long to come up. And..., I refuse to sit still waiting for a comercial to load, no matter how fast.
MSNBC ...What don't you offer the user a choice of selecting the design of their news format ....

offer the choice of choosing ... Closer, Gentle Evolution, Culture Shock, Sample Platter and etc on MSNBC site ....
I miss the old design for all my news needs.  I am looking forward to giving the new design a whirl for a few weeks to see if it grows on me at all.
I get the impression that those who like the new design are those who have taken the time to play with the features, read up on what wasn't finished over the weekend, and set up their pages to their preferences.  The naysayers seem, on average, to be reporting first impressions.  I'm in the first category, and I'm quite happy with the new design.

Oh - and the people who hate the flyout menus?  There's been a "disable" button for those for YEARS now.  Me, I love 'em - I can access a HUGE amount of content through a very small amount of screen space - what's not to love?
Nice design but something to fix...

There's an annoying drawback to the new design.  It's best demonstrated so I'll just describe how to see it for yourself.  Often, I have MSNBC open in tabs and sometimes switch back and forth.  With a scroll mouse, you can just scroll down with the wheel and your mouse cursor may be anywhere.

However, if you happen to have your mouse cursor all the way at the left hand side of the screen and scroll down to near the Categories Section, and then see a news story under the Explore menu, it is very difficult to get to it. When you drag your mouse from the far left hand side of the screen, as it passes over the Categories menu, a menu pops up of stories for that category preventing you from being able to click on the story under the Explore section.  This makes it very hard to try to read a news story under the Explore section.  This is annoying because usually, if you click the back button in the browser and then just use a scroll mouse wheel to scroll down, your mouse is automatically at the far left setting you up to be mildly annoyed when you try to read an Explore "other news" story and find your path blocked by the categories pop-up menu.

The only way to avoid this bug is to either move the cursor at lightening speed over the Categories section, or move the cursor up or down around the whole Categories section without passing over it.  

Please fix this...I like the new design but this can get annoying when trying to navigate the new website.

Thanks...
I prefer the old design better, as it was more user friendly. I could find the articles much easier and just scroll through the rest. The new design is too busy and requires me to search over and over for what I am looking for. I think it LOOKS nice, but the overall user-friendly aspect lacks, but that is just my one opinion in several million.
The site runs notably slower with the new style. Also the anchor tags "returning you to where you last viewed the page" are less efficient. I do enjoy the earth-tone color scheme. I am sure you guys are working out the bugs.
I don't care for the new look. The top part is confusing, and I don't like all the scrolling. But I'll play around with it, and maybe I'll like it better.

I think I like the "Closer" view the best.
I also vote 'yes' to the final design.  Good job, everyone!  (I'm a news junkie, and your site is the best for getting the most...)
I'm trying to get used to it.....but I still don't think I've transitioned. I thought the old look was boring, but this look is entirely too much stuff at once. It was hard for me to find the categories I normally read.
Can I make a suggestion? Move the annoying little red "new" and "updated" tags to the right of the headlines, or come up with another way to show an item as new/updated. I can't quickly scan the headlines if my eyes are constantly being indented by the tags. (This has bothered me since you began the practice in the old layout.)
Overall, I like the design.  One major problem - why isn't there a stock ticker on the main page?  I've scrolled it three times and either it's not there or it is so well hidden that it might as well not be there.
Not a fan of the new design - for one thing, it does not work well on older computers or those with dial up. You have alienated a large portion of your readers.  I have taken the site off my bookmarks at home and will only check in occasionally from my office, rather than having this be the site I turn to first thing in the morning (I don't do television).
The new design is MUCH better. More info, better hierarchy (especially with the sub-section's content), and therefore easier navigation. Nice job!
Before I comment on the new design, I'd like to commend you on the production of this Blog. Aspiring designers and experienced professionals alike appreciate when they can see the creative process at work, especially when it involves such talented people. Thank you for this brief chronicle of your efforts. As for the design, I like some parts of it much more than others. I love the new customizable news rows and I also love the new "Explore" box. I don't like that the left-navigation has now been pushed below the fold. I like the new "Top Stories" section at the top of the page, but I think it's overly large and takes up too much screen real estate; pushing the wonderful "Explore" box and left-nav further down the page. All of the news rows can be repositioned, which is fantastic. I think that it would be equally fantastic to make the "Explore" box and the "Top Stories" area function like the other news rows, and allow users to reposition them on the page to fit their preference. That would allow a user to specify which row was at the top of their page. I would keep the "Top Stories" row on top, but another user might place "Business" or "Local" news on top. Other than those points I think it's a fine job. Oh, and bring the left-nav back above the fold. It makes it easier for return customers to hit their sweet-spot a little faster.
For clarity's sake I'm focusing on the viability of the new design.  As a msnbc web viewer, whether or not the design is "better" the the previous one is a moot point.  The header takes up too much room.  As a result, I didn't realize there was a left sidebar until I scrolled down.  Basic rule of thumb:  people LOOK and then the mouse FOLLOWS.  The layout of the site reverses this natural instinct.  It requires a person to first scroll down  - without visual motivation - then look, then click.
Other option to use the side bar is not user friendly.  In some browsers there is a slight transparency to the flyouts - cute, but not helpfull.
 Overall, the "stacked topic blocks" don't stack up.  Robots might like the logic of it but humans prefer to browse with their eyes FIRST and then followup with a mouse click.
I think the new design is a bit busy - there is too much content on the page, and the top news stories aren't as prominent.  I really like the way you did the images - not putting text on them is an excellent idea.


New comments to this post are disabled

About the blog

This is the work and the thoughts of msnbc.com's site design and editorial concepts groups and a place for us all to discuss design, content and the future of news.

We want this to be a conversation, where we tell you what we're up to and what's caught our eye, and you tell us your thoughts and ideas about the site's design, content and tools.

A tour of the redesign

Take the tour

Archives


Browse by date:

Browse by category:

Add this blog to your news reader