BiofusionDesign » Awards winners

Msnbc.com new mobile site: design for modularity

Vu Nguyen — Thu, 29 Apr 2010 16:00:53 +0000

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 (300x250) ads in the design. I haven’t noticed this on other mobile websites.

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.

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

Adversity Index Map

Vu Nguyen — Wed, 24 Feb 2010 11:41:15 +0000

Click on image to view the map

Update Feb 24, 2010: I just learned that this piece won a Best in Business award for creative use of online media from Society of American Business Editors and Writers. I want to thank all the participants who made this project possible. Cheers!

The Adversity Index, from msnbc.com and Moody’s Economy.com, measures the economic health of 381 metro areas and all 50 states. Each area is in recession, at risk, recovering or expanding. On this map you can explore changes in the four components of the index: employment, housing starts, housing prices and industrial production, each shown as a percentage change from a year earlier.

This map contains more than 350,000 data points. It was a challenge because we didn’t have appropriate database tools to support the map. We had to split the data set into five big chunks and merged them in Flash. I wrote a tool that allow loading data from different subsets and merged them into one data structure that was plotted on the map.

Click here to view the map

Awards and honors
2010 – Best in business from Society of American Business Editors and Writers

Endorsements of All Shapes and Sizes

Vu Nguyen — Sun, 16 Nov 2008 01:08:29 +0000

The interactive feature is a collage of politicians, ex-politicians, celebrities and newspaper opinion pages. Mouse over to view which presidential candidate they endorse.

Click here to view the graphics

Awards and honors
2007 – Awards of Excellence from Society of News Design

Interactive Tour of Mount Kilimanjaro

Vu Nguyen — Sun, 16 Nov 2008 00:37:52 +0000

Every year, thousands of people set to climb Mount Kilimanjaro, but about a quarter of them fail before reaching the summit. The rest, who succeed, become very ill from latitude sickness.

Is it worth the efforts? Check out Tom Bissell’s account of his painful and exhausting climb to the summit of Mount Kilimanjaro.

Click here to view the graphics

Awards and honors
2009 – Part of the “Design USA” exhibition at the Smithsonian Cooper-Hewitt National Design Museum
2007 – Gold from malofiej 16
2007 – Gold from Society of News Design
2007 – Best of Category: Interactive/Digital award in the 2007 CaGIS/ACSM Map Design Competition

Election ’08 Campaign Finance

Vu Nguyen — Sun, 16 Nov 2008 00:36:00 +0000

The interactive map shows campaign finance data for each presidential candidate in the 2008 election. The version I worked on that won an award was published in 2007. It has been subsequently replaced by the current version on the site.

Click here to view the graphics

Awards
2007 – Awards of Excellence from Society of News Design

Baroque architecture of Arequipa, Peru

Vu Nguyen — Sat, 15 Nov 2008 23:45:00 +0000

This is my last project from school. In fall 2006, I spent 10 days with a group of fellow journalism students in Arequipa, Peru producing multimedia stories. Each of us covered an aspect of the city. I chose to cover the city’s architecture. We used all kinds of media such as photo, video, audio and graphics in this project. The project was sponsored by Sister Cities International.

I spent a lot of time on this project. It still is the most ambitious 3D project that I have ever worked on. I started with an idea of creating a 3D virtual tour of the famous Santa Catalina Monastery. Later on, I decided to do the main plaza (Plaza de armas) as well as a bird view map of the whole downtown area.

Since I didn’t have enough references to create a realistic model, I ended up spending a lot of time taking pictures and drawing hand maps of the monastery. In the end, I managed to put all the hundreds of doors and windows in the correct place (or in my dream I did ).

On the down side, there is a couple of annoying bugs we never fixed.

Click here to view the graphics

Awards and honors
2007 – One of Times magazine’s 50 best Web sites of 2007

The mystery behind the giant squid

Vu Nguyen — Sat, 15 Nov 2008 00:05:54 +0000

My first infographics project ever. It was also my first project in Alberto Cairo’s 3D class at UNC-Chapel Hill. The notable thing about this project is that it landed me a summer internship at The New York Times in 2006.

I can safely say that it started my career. Today I have a chance to do what I absolutely love and make a living out of it thanks to this project.

Awards and honors
2006 – Summer internship at The New York Times

Click here to view the graphics