msnbc.com

Today Moms site responsive design

I am so excited that the redesigned Today Moms site launched. It was the last project I worked on when I was still at nbcnews.com. With a small team of super talented people we came up with this responsive design concept.

The site is built on the new platform that we built in early 2012. There are a few great ideas behind this concept, and I want to highlight a couple that makes me smile :) .

Desktop homepage

Continue reading »

Responsive design at msnbc.com

screenshot of msnbc.com technology blogs
Click on image to see the live site

This is a test launch of the new format that we build on our new platform. It is also our first stab at making the site feels like a native application. By using responsive design techniques, we make the site work on different screen sizes and platforms. So far it has been a successful attempt.

Continue reading »

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.

Continue reading »

And here is the new story page from msnbc.com

A few words from Ashley Wells, our Creative Director:

So we’ve stacked up the pieces with the most compelling content on top. Start with a video. Scroll down to read. Want more? Show more. Long text simply expands in place. Then scroll down for photos. Lots of large photos. Share your favorite. Via e-mail. On Facebook. On Twitter. Continue down the page. See what others are saying. Expand. Respond.

Keep going. We post thousands of updates a day and are constantly searching them for related angles. It’s all right there near the bottom of every story. Want the bigger picture? There’s a dashboard view of the latest news trends below. Or jump back to the top of the page. Our site navigation gets bigger, too. Just when you need it.

Read the rest of the article here

See how nature cleans up the Gulf spill mess

Click image to view the graphic

This is another informative msnbc.com infographics about the oil spill created by Clay Frost, our talented designer, together with Ashley Zammitt, our new design intern from University of North Carolina, my Alma Mater. We are currently seven UNC graduates working in the creative department at msnbc.com. I know what you are thinking, but no, there is no connection here ;) .

The graphic shows how the oil is degrading over time through chemical and physical processes in nature. Each process affects the oil differently at various time. So if we do nothing, the Mother Nature should “practically” take care of everything, right? What scares me about this is now I see where the oil is going. >:|

View the interactive infographic

Oil spill interactive graphics from msnbc.com

Click on image to view the graphic

Click on image to view the graphic

The first graphic puts things in perspective by showing us a sense of scale. At its current rate, the leak pumps out enough oil to fill a third of an olympic-size swimming pool every day. The second graphic is a timeline map showing the spread in the Gulf as of May 20th.

I didn’t work on these since I was busy working on other projects, but I think Clay Frost, our infographics designers, did a great job creating these and keeping them up to date.

Adversity Index Map

Adversity index map
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

Page 1 of 3123