Msnbc.com new mobile site: design for modularity

msnbc new mobile front
Click on image to see full size

Last year I went offline for a few months to work on a couple of personal projects and an iPhone app for msnbc.com. About a year later and after the iPhone project fell through, I was asked to design a new msnbc.com mobile version. The target audience is people who own devices that have Webkit-based browsers such as iPhone and Google Android phones. The project was a huge undertaking especially for an inexperienced web designer like myself. For people who don’t know me, I am more of a data visualization person than a web design person. I have designed and launched a few successful brochure websites, but have never worked on a large scale one like msnbc.com. Given that most other large news organizations have released their websites for these devices, we wanted to challenge ourselves to do something better.

Brainstorming

I work with people from all different departments including sales, editorial and development to decide what the product should do. The goal is pretty straight forward. Show everything that we currently have on our desktop website. Given the deadlines, we can’t possibly create mobile rendering for every single piece of content on the full website. We have to come up with a modular design, so we can display whatever we decide and add new content as we go.

The first concept we come up with works like a native iPhone app. The content is divided into sections roughly based on media types. You scroll vertically to get to different sections and scroll horizontally to get more content from each section. The horizontal scroll works like the iPhone photo app.

There are a few problems with this concept. One obvious problem is that it hides the majority of the content behind the horizontal scroll. I am a big fan of how the iPhone photo app works, but it doesn’t apply well in this situation. Another problem is that the design is tied to a specific device, iPhone in this case. The side scrolling feature with the little dots at the bottom of each panel is very iPhonish. Since the website is supposed to work on any Webkit device, we decide to do away with this approach.

Although the first concept is not ideal, it does show what kind of content we want to surface on the mobile site. It also shows different ad opportunities that we want to support. One interesting point about the concept is that it supports showcase (300×250) ads in the design. I haven’t noticed this on other mobile websites.

msnbc category slice

Exploration

The second concept is more inline with the product requirements. It feels like a native iPhone app and at the same time has a distinct msnbc.com look. We modeled the design after the desktop site. The content is organized into slices. Each slice can function by itself and be placed at any location on a page. Some slices also have subsections, for example, the Categories slice has News, Business, Politics, etc. This design provides greater flexibility.

The biggest benefit of this approach is that we can use similar modules to build pages for any other msnbc.com properties such as the Today show, Dateline, Nightly News and others. It also allows us to add new types of content without affecting the rest of the design. As you can see from the image below, all the msnbc shows have unique content and design. They are all built using modules from the concept above. The only thing that is different between these pages is a few CSS overrides that give them distinct look and feel.

msnbc show fronts new mobile site

On the desktop site, we list photos and videos along with articles in the same slice. We wanted to carry that functionality over to the mobile site as well. Photo and video stories are listed along with the rest of the content inside each slice. That way multimedia stories don’t feel that separated and special. They are just part of the experience. Of course, we still have the dedicated video and photo sections like we have on our desktop site.

Final result

The final design that we released to the web looks almost the same as the design concept we came up with. Although I only provided the design for a few specific pages and slices, the development team did a great job of reusing the modules to build many others. For example, we did all the msnbc show pages in the last minute. I only provided the design for the Today show pages. The modularity of the design allowed us to not be concerned about the visuals, but only about what type of content we want on each page.

It was a great learning experience for me. And I want to use this opportunity to thank everybody involved. They were all great and without their efforts, we would never be able to release something like this.

Awards and honors
2010 – Website of the day from Cynopsis Media

Follow any comments here with the RSS feed for this post. Both comments and trackbacks are currently closed.

One Trackback

  1. [...] This post was mentioned on Twitter by Leonardo Carrizo, Tracy Boyer. Tracy Boyer said: Interactive editor Vu Nguyen discusses MSNBC's mobile platform: "Msnbc.com new mobile site: design for modularity" http://bit.ly/bDsH8n [...]