Portfolio

Responsive design at msnbc.com

Apr 27, 2012 · 
One comment ·
msnbc.com, Portfolio · 
By Vu Nguyen

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

This is a test launch of the new for­mat that we build on our new plat­form. It is also our first stab at mak­ing the site feels like a native appli­ca­tion. By using respon­sive design tech­niques, we make the site work on dif­fer­ent screen sizes and plat­forms. So far it has been a suc­cess­ful attempt.

To make this man­age­able, we decided to sep­a­rate the desk­top site from the mobile site, so that we didn’t have to worry about older browsers and busi­ness require­ments that didn’t apply to our mobile busi­ness. It was a good choice because we man­aged to release this project in a very short amount of time. That gave us addi­tional time to refine and add fea­tures post-launch.

There were a few chal­leng­ing prob­lems that we tack­led. We decided to use a front-end solu­tion to serve images of dif­fer­ent res­o­lu­tions to dif­fer­ent screen sizes. There is no user agent detec­tion involved. Another inter­est­ing prob­lem was the dif­fer­ent ad sys­tems between phone and tablet, which we also solved using a smart front-end solution.

msnbc.com new blog format

What make this feels like a native appli­ca­tion is the fact that posts open in place. You can also search, fil­ter or get more con­tent in real time. Everything loads much faster than before due to some heavy opti­miza­tion to the code base and structure.

A while ago, I posted about our last mobile redesign. Since then we have learned a few new tricks that help grow our mobile busi­ness by includ­ing a whole new cat­e­gory of users, the tablet users.

Msnbc.com new mobile site: design for modularity

Jun 29, 2010 · 
One comment ·
Awards winners, Design, msnbc.com, Portfolio · 
By Vu Nguyen

msnbc new mobile front
Click on image to see full size

Last year I went offline for a few months to work on a cou­ple of per­sonal 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 ver­sion. The tar­get audi­ence is peo­ple who own devices that have Webkit-based browsers such as iPhone and Google Android phones. The project was a huge under­tak­ing for me due to the com­plex­ity of our busi­ness and the audi­ence size that this project would impact. Given that most other large news orga­ni­za­tions have released their web­sites for these devices, we wanted to chal­lenge our­selves to do some­thing better.

Continue read­ing »

The answer is in the stars

May 6, 2010 · 
Post a comment ·
Infographics, New York Times, Portfolio · 
By Vu Nguyen

nytimes puzzle graphics
Click on image to see full size

I browsed through my old com­puter the other day and found this piece. It is the first assign­ment I worked on when I was an intern at The New York Times in the sum­mer of 2006.

Karakuri are mechan­i­cal puz­zle boxes cre­ated by Akio Kamei, a Japanese puz­zle designer. The artist in his own words:

At first I began to cre­ate wooden boxes with an idea of a secret box and then looked for a broader mean­ing. I gave it the name “Karakuri box” (trick box) rather than the secret box. Finally “Karakuri box” (trick box) was born. The trick box which you open your­self, can’t be opened if you don’t enjoy humor. Someone who has no expe­ri­ence with trick boxes and oth­ers who have many expe­ri­ences, toe the same line. Sometimes the knowl­edge or the expe­ri­ence dis­turb his trial. I’m usu­ally think­ing about how I can deceive peo­ple with my puz­zles. And so I won­der if my per­son­al­ity has come out in my work.

Adversity Index Map

Feb 24, 2010 · 
Post a comment ·
Awards winners, Maps, msnbc.com, Portfolio · 
By Vu Nguyen

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 cre­ative use of online media from Society of American Business Editors and Writers. I want to thank all the par­tic­i­pants who made this project pos­si­ble. Cheers!

The Adversity Index, from msnbc.com and Moody’s Economy.com, mea­sures the eco­nomic health of 381 metro areas and all 50 states. Each area is in reces­sion, at risk, recov­er­ing or expand­ing. On this map you can explore changes in the four com­po­nents of the index: employ­ment, hous­ing starts, hous­ing prices and indus­trial pro­duc­tion, each shown as a per­cent­age change from a year earlier.

This map con­tains more than 350,000 data points. It was a chal­lenge because we didn’t have appro­pri­ate data­base tools to sup­port the map. We had to split the data set into five big chunks and merged them in Flash. I wrote a tool that allow load­ing data from dif­fer­ent sub­sets and merged them into one data struc­ture that was plot­ted on the map.

Click here to view the map

Awards and hon­ors
2010 – Best in busi­ness from Society of American Business Editors and Writers

Dirty Heating Oil in New York City

Jan 13, 2010 · 
Post a comment ·
Design, Maps, Portfolio, Programming · 
By Vu Nguyen

new york oil
Click on image to view the map

This is a map I cre­ated recently for the Environmental Defense Fund. It shows build­ings in New York City that burn dirty oil. The map con­tains infor­ma­tion about 9000 build­ings that burn either type 4 or type 6 oil. Both types are bad for the environment.

My biggest chal­lenge with this map was the sheer amount of data it has to load, parse and plot. Fortunately, AS3 is fast. It is a plea­sure to see the parser churns through thou­sands of lines almost instantly. Another fac­tor that made my life much eas­ier was the map frame­work I used. I want to thank the peo­ple at stamen.com and the devel­op­ers of mod­est map for cre­at­ing an amaz­ing frame­work. With just a few tweaks I man­aged to plot thou­sands of points on a map.

It seems like the story got a lot of atten­tion. It was men­tioned by The New York Times and Daily News.

To view the map, please click here

Page 1 of 1212345...Last »