<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Henry Kuo</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/" />
    <link rel="self" type="application/atom+xml" href="http://henrykuo.com/atom.xml" />
    <id>tag:henrykuo.com,2010-07-23://2</id>
    <updated>2011-12-15T22:11:02Z</updated>
    <subtitle>Design. UX. Code.</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 5.12</generator>

<entry>
    <title>TABASCO Nation</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/12/tabasco-nation.html" />
    <id>tag:henrykuo.com,2011://2.64</id>

    <published>2011-12-03T08:36:49Z</published>
    <updated>2011-12-15T22:11:02Z</updated>

    <summary> (2011) - document.write(&apos;TABASCO Nation&apos;); launched as TABASCO&apos;s first Facebook app, inviting fans to participate in daily and weekly challenges to earn points, badges, and prizes, sharing photos and keeping track of their TABASCO Sauce drop usage. I created all...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Illustration" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2011)</span> - 
<script>document.write('TABASCO Nation');</script> launched as TABASCO's first Facebook app, inviting fans to participate in daily and weekly challenges to earn points, badges, and prizes, sharing photos and keeping track of their TABASCO Sauce drop usage.<br><br>
I created all of the designs for the entire Facebook app as well as the supporting media placements, including rich media banners, homepage takeovers, and a standalone Yelp contest page. I aimed for a certain sense of southern refinement with just a little bit of wear with the use of subtle textures, heavy use of red for obvious reasons, and an etched clip art style made possible with the Engraver Photoshop plug-in. Additionally, I illustrated all 31 badges and 7 profile frames, all original artwork.<br><br>
At the time of this writing, just one month from launch, 7,000 people have joined the nation, over 200 of which have already attained the highest achievable level of Ambassador.<br>
<a href="https://apps.facebook.com/tabasconation" target="_blank">Visit <script>document.write('TABASCO Nation');</script> ></a></p>

<div class="thumb_group">
	<div class="thumb"><a href="/images/tabasco-2.jpg" rel="enlarged" title="Dashboard"><img src="/images/tabasco-2-preview.jpg" width="636" height="867"></a></div>
	<div class="thumb"><a href="/images/tabasco-3.jpg" rel="enlarged" title="Facebook Tab"><img src="/images/tabasco-3-preview.jpg" width="314" height="760"></a></div>
	<div class="thumb"><a href="/images/tabasco-1.jpg" rel="enlarged" title="Badges"><img src="/images/tabasco-1-preview.jpg" width="958" height="482"></a></div>
	<div class="thumb"><a href="/images/tabasco-4.jpg" rel="enlarged" title="Instructional Overlay"><img src="/images/tabasco-4-preview.jpg" width="314" height="544"></a></div>
	<div class="thumb"><a href="/images/tabasco-5.jpg" rel="enlarged" title="Current Challenges"><img src="/images/tabasco-5-preview.jpg" width="314" height="569"></a></div>
	<div class="thumb"><a href="/images/tabasco-6.jpg" rel="enlarged" title="Snapshot Challenge"><img src="/images/tabasco-6-preview.jpg" width="314" height="526"></a></div>
	<div class="thumb"><a href="/images/tabasco-7.jpg" rel="enlarged" title="Badge Earned"><img src="/images/tabasco-7-preview.jpg" width="314" height="395"></a></div>
	<div class="thumb"><a href="/images/tabasco-8.jpg" rel="enlarged" title="Gallery"><img src="/images/tabasco-8-preview.jpg" width="314" height="561"></a></div>
	<div class="thumb"><a href="/images/tabasco-9.jpg" rel="enlarged" title="Leaderboard"><img src="/images/tabasco-9-preview.jpg" width="314" height="571"></a></div>
	<div class="thumb"><a href="/images/tabasco-10.jpg" rel="enlarged" title="Badges"><img src="/images/tabasco-10-preview.jpg" width="314" height="571"></a></div>
	<div class="thumb"><a href="/images/tabasco-12.jpg" rel="enlarged" title="Past Challenges"><img src="/images/tabasco-12-preview.jpg" width="314" height="515"></a></div>
	<!--<div class="thumb"><a href="/images/tabasco-13.jpg" rel="enlarged" title="Anthem"><img src="/images/tabasco-13-preview.jpg" width="314" height="528"></a></div>-->
	<div class="thumb"><a href="/images/tabasco-14.jpg" rel="enlarged" title="Snapshot"><img src="/images/tabasco-14-preview.jpg" width="314" height="506"></a></div>
	<div class="thumb"><a href="/images/tabasco-15.jpg" rel="enlarged" title="Profile Frames"><img src="/images/tabasco-15-preview.jpg" width="636" height="382"></a></div>
	<div class="thumb"><a href="/images/tabasco-16.jpg" rel="enlarged" title="Bleacher Report Takeover"><img src="/images/tabasco-16-preview.jpg" width="636" height="398"></a></div>
	<div class="thumb"><a href="/images/tabasco-17.jpg" rel="enlarged" title="Yelp Contest Page"><img src="/images/tabasco-17-preview.jpg" width="314" height="423"></a></div>
	<div class="thumb"><a href="/images/tabasco-18.jpg" rel="enlarged" title="Landing Page"><img src="/images/tabasco-18-preview.jpg" width="314" height="229"></a></div>
</div>
</div>]]>
        
    </content>
</entry>

<entry>
    <title>Space Invader HTML5 Game Demo</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/11/space-invader-html5-game-demo.html" />
    <id>tag:henrykuo.com,2011://2.63</id>

    <published>2011-11-17T02:48:46Z</published>
    <updated>2011-11-17T04:10:25Z</updated>

    <summary> (2011) - Cisco Security Invaders was a quick game I put together as an example of what could be done with HTML5, which could be served as a full screen interactive ad on an iPad. It&apos;s a rough demo...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Code" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2011)</span> - Cisco Security Invaders was a quick game I put together as an example of what could be done with HTML5, which could be served as a full screen interactive ad on an iPad. It's a rough demo with just a few bells and whistles, serving as a basic proof of concept. You can try it out with the button below, which works on both iPad and modern browsers (though not extensively tested on every browser).<br>
<a href="/ciscospaceinvader" target="_blank">Play Game ></a></p>

<div class="thumb_group">
<div class="thumb"><a href="/images/cisco-spaceinvaders-1.jpg" rel="enlarged" title="Intro Screen"><img src="/images/cisco-spaceinvaders-1-preview.jpg" width="958" height="601"></a></div>
<div class="thumb"><a href="/images/cisco-spaceinvaders-2.jpg" rel="enlarged" title="Gameplay"><img src="/images/cisco-spaceinvaders-2-preview.jpg" width="958" height="601"></a></div>
</div>
</div>]]>
        
    </content>
</entry>

<entry>
    <title>Cisco HTML5 iPad Ad</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/11/cisco-html5-ipad-ad.html" />
    <id>tag:henrykuo.com,2011://2.62</id>

    <published>2011-11-04T23:57:42Z</published>
    <updated>2011-11-15T09:20:52Z</updated>

    <summary> (2011) - The Weather Channel&apos;s iPad app has a media buy that allows a fully interactive HTML5-driven page to be displayed within the app. This is unique in that normally, an interactive page such as this would be built...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2011)</span> - The Weather Channel's iPad app has a media buy that allows a fully interactive HTML5-driven page to be displayed within the app. This is unique in that normally, an interactive page such as this would be built in Flash, but with the shift to the iPad platform, we're now turning to HTML5 with javascript and CSS transforms to perform the same interactivity and motion.<br><br>

Clicking or dragging the slider spins the landscape left and right, and clicking to watch the videos brings up an overlay which plays the video in an iPad-viewable format.<br>
<a href="http://www.youtube.com/watch?v=8pcgdYDvDPQ" target="_blank">Watch Demo ></a>&nbsp;&nbsp;&nbsp;<a href="/ciscoworld" target="_blank">View HTML5 Ad (works on iPad only) ></a></p>

<div class="thumb_group">
	<div class="thumb noborder"><a href="/images/ciscoipadad-1.jpg" rel="enlarged" title="The Network"><img src="/images/ciscoipadad-1-preview.jpg" width="958" height="748"></a></div>
	<div class="thumb"><a href="/images/ciscoipadad-2.jpg" rel="enlarged" title="Device Proliferation"><img src="/images/ciscoipadad-2-preview.jpg" width="636" height="477"></a></div>
	<div class="thumb"><a href="/images/ciscoipadad-3.jpg" rel="enlarged" title="Clouds"><img src="/images/ciscoipadad-3-preview.jpg" width="314" height="236"></a></div>
	<div class="thumb"><a href="/images/ciscoipadad-4.jpg" rel="enlarged" title="Security"><img src="/images/ciscoipadad-4-preview.jpg" width="314" height="236"></a></div>
	<div class="thumb"><a href="/images/ciscoipadad-5.jpg" rel="enlarged" title="Overlay"><img src="/images/ciscoipadad-5-preview.jpg" width="314" height="236"></a></div>
	<div class="thumb"><a href="/images/ciscoipadad-6.jpg" rel="enlarged" title="Video"><img src="/images/ciscoipadad-6-preview.jpg" width="314" height="236"></a></div>
</div>
</div>]]>
        
    </content>
</entry>

<entry>
    <title>Motorlogs</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/motorlogs.html" />
    <id>tag:henrykuo.com,2011://2.60</id>

    <published>2011-10-15T07:57:27Z</published>
    <updated>2011-10-28T01:28:31Z</updated>

    <summary> (2011) - Motorlogs is a website fully designed and built by myself as a cleaner and simpler alternative to the big player in the space, CarDomain. Where CarDomain feels very much like the old MySpace, littered with ads and...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Code" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[
<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2011)</span> - Motorlogs is a website fully designed and built by myself as a cleaner and simpler alternative to the big player in the space, CarDomain. Where CarDomain feels very much like the old MySpace, littered with ads and promotions and arming the user with the full WYSYWIG to make their pages look like web circa 1995, I designed for pure simplicity and focus on content with a clean template that makes for easy browsing.<br><br>

I built it on the Drupal platform which helped jumpstart the build with its vast selection of open source modules, though the learning curve of Drupal was no minor task in itself. I also learned how to manage a VPS server in the process with some performance tweaks and newfound command-line knowledge.<br><br>

The design went through several iterations, one of them including a fully illustrated badging system, and a few custom wallpapers were Photochopped, the Mad Max Camaro in particular being fully composited (aside from the Camaro) from screenshots of the film.<br>
<a href="http://www.motorlogs.com" target="_blank">Visit Website ></a></p>

<div class="thumb_group">
	<div class="thumb"><a href="/images/motorlogs-1.jpg" rel="enlarged" title="Landing Page"><img src="/images/motorlogs-1-preview-xlarge.jpg" width="958" height="453"></a></div>
	<div class="thumb"><a href="/images/motorlogs-10.jpg" rel="enlarged" title="Garage"><img src="/images/motorlogs-10-preview.jpg" width="314" height="342"></a></div>
	<div class="thumb"><a href="/images/motorlogs-4.jpg" rel="enlarged" title="Dashboard"><img src="/images/motorlogs-4-preview.jpg" width="314" height="486"></a></div>
	<div class="thumb"><a href="/images/motorlogs-5.jpg" rel="enlarged" title="Dashboard"><img src="/images/motorlogs-5-preview.jpg" width="314" height="905"></a></div>
	<div class="thumb"><a href="/images/motorlogs-7.jpg" rel="enlarged" title="Journal"><img src="/images/motorlogs-7-preview.jpg" width="314" height="900"></a></div>
	<div class="thumb"><a href="/images/motorlogs-8.jpg" rel="enlarged" title="Gallery"><img src="/images/motorlogs-8-preview.jpg" width="314" height="289"></a></div>
	<div class="thumb"><a href="/images/motorlogs-9.jpg" rel="enlarged" title="Photo"><img src="/images/motorlogs-9-preview.jpg" width="314" height="342"></a></div>
	<div class="thumb"><a href="/images/motorlogs-2.jpg" rel="enlarged" title="Browse"><img src="/images/motorlogs-2-preview.jpg" width="314" height="425"></a></div>
	<div class="thumb"><a href="/images/motorlogs-badges-2.jpg" rel="enlarged" title="Badges"><img src="/images/motorlogs-badges-2-preview.jpg" width="314" height="419"></a></div>
	<div class="thumb"><a href="/images/wallpaper-halo-subaru-impreza-sti.jpg" rel="enlarged" title="Wallpaper"><img src="/images/wallpaper-halo-subaru-impreza-sti-preview.jpg" width="314" height="177"></a></div>
	<div class="thumb"><a href="/images/wallpaper-nissan-gtr-bladerunner.jpg" rel="enlarged" title="Wallpaper"><img src="/images/wallpaper-nissan-gtr-bladerunner-preview.jpg" width="314" height="177"></a></div>
	<div class="thumb"><a href="/images/wallpaper-mad-max-chevrolet-camaro.jpg" rel="enlarged" title="Wallpaper"><img src="/images/wallpaper-mad-max-chevrolet-camaro-preview.jpg" width="314" height="177"></a></div>
	<div class="thumb"><a href="/images/wallpaper-tron-tesla-roadster.jpg" rel="enlarged" title="Wallpaper"><img src="/images/wallpaper-tron-tesla-roadster-preview.jpg" width="314" height="177"></a></div>
	<div class="thumb"><a href="/images/motorlogs-11.jpg" rel="enlarged" title="Previous Version"><img src="/images/motorlogs-11-preview.jpg" width="314" height="351"></a></div>
	<div class="thumb"><a href="/images/motorlogs-12.jpg" rel="enlarged" title="Previous Version"><img src="/images/motorlogs-12-preview.jpg" width="314" height="308"></a></div>
	<div class="thumb"><a href="/images/motorlogs-13.jpg" rel="enlarged" title="Previous Version"><img src="/images/motorlogs-13-preview.jpg" width="314" height="398"></a></div>
	<div class="thumb"><a href="/images/motorlogs-14.jpg" rel="enlarged" title="Embeddable Widget"><img src="/images/motorlogs-14-preview.jpg" width="314" height="139"></a></div>
</div>
</div>

]]>
        
    </content>
</entry>

<entry>
    <title>Cisco Together</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/cisco-together.html" />
    <id>tag:henrykuo.com,2011://2.59</id>

    <published>2011-10-15T07:56:51Z</published>
    <updated>2011-10-28T01:32:09Z</updated>

    <summary> (2010) - The UX of this site was borrowed from the Space Collective website, with boxes that expand and collapse within the page, revealing entire articles and videos without ever leaving the one page. This was similar to the...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2010)</span> - The UX of this site was borrowed from the Space Collective website, with boxes that expand and collapse within the page, revealing entire articles and videos without ever leaving the one page. This was similar to the idea I had for the TakePart website, but in a different design with boxes floating and wrapping around each other rather than a single column of expanding rows. But the premise is the same, allowing the user to explore content in one place without the disorientation that can occur when loading page after page.<br><br>

The Cisco Together site consists of videos of leading technologists in and outside of Cisco talking about video technology and the creative ways it brings people together, from family to academia and medicine, and the possibilities it brings to our future.<br><br>

The design was kept clean with a subtle variety of colors. A multitude of media placements were created, utilizing the technologists and quotes or short video clips.<br>
<a href="http://together.cisco.com" target="_blank">Visit Website ></a></p>

<div class="thumb_group">
	<div class="thumb"><a href="/images/cisco-together-1.jpg" rel="enlarged" title="Landing State"><img src="/images/cisco-together-1-preview-large.jpg" width="636" height="668"></a></div>
	<div class="thumb"><a href="/images/cisco-together-2.jpg" rel="enlarged" title="Expanded State"><img src="/images/cisco-together-2-preview.jpg" width="314" height="446"></a></div>
	<div class="thumb"><a href="/images/cisco-together-3.jpg" rel="enlarged" title="Expanded State"><img src="/images/cisco-together-3-preview.jpg" width="314" height="428"></a></div>
	<div class="thumb"><a href="/images/cisco-together-4.jpg" rel="enlarged" title="Web Banner"><img src="/images/cisco-together-4-preview.jpg" width="636" height="132"></a></div>
	<div class="thumb"><a href="/images/cisco-together-5.jpg" rel="enlarged" title="Web Banner"><img src="/images/cisco-together-5-preview.jpg" width="636" height="132"></a></div>
	<div class="thumb"><a href="/images/cisco-together-7.jpg" rel="enlarged" title="msnbc iPhone Media Placement"><img src="/images/cisco-together-7-preview-large.jpg" width="636" height="212"></a></div>
	<div class="thumb"><a href="/images/cisco-together-6.jpg" rel="enlarged" title="Wall Street Journal Media"><img src="/images/cisco-together-6-preview-large.jpg" width="636" height="242"></a></div>
	<div class="thumb"><a href="/images/cisco-together-8.jpg" rel="enlarged" title="WeatherBug Media Placement"><img src="/images/cisco-together-8-preview.jpg" width="314" height="236"></a></div>
	<div class="thumb"><a href="/images/cisco-together-9.jpg" rel="enlarged" title="Social@Cisco Feature"><img src="/images/cisco-together-9-preview.jpg" width="314" height="221"></a></div>
	<div class="thumb"><a href="/images/cisco-together-10.jpg" rel="enlarged" title="TED Media Placement"><img src="/images/cisco-together-10-preview.jpg" width="314" height="232"></a></div>
	<div class="thumb"><a href="/images/cisco-together-11.jpg" rel="enlarged" title="Say Media Video Banner"><img src="/images/cisco-together-11-preview.jpg" width="314" height="163"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>TakePart</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/takepart.html" />
    <id>tag:henrykuo.com,2011://2.58</id>

    <published>2011-10-15T07:55:44Z</published>
    <updated>2011-10-28T01:35:34Z</updated>

    <summary> (2008) - I designed the UX and IA of the initial redesign of the TakePart website with a final wireframe document spanning 107 pages. Several months of research and discovery took place with three HTML/Javascript prototypes I built put...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Code" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2008)</span> - I designed the UX and IA of the initial redesign of the TakePart website with a final wireframe document spanning 107 pages. Several months of research and discovery took place with three HTML/Javascript prototypes I built put through testing to determine the best interface.<br><br>

The premise of the interface consisted of a single-column of rows of content, each row essentially just displaying a headline. Clicking a headline expanded the row to reveal the entire article or video without leaving the page. Thus, the user could browse through the articles without the disorientation that can occur from page to page reloads. This was particularly helpful since each article was related to one another, and the likelihood of wanting to read more than one of them was greater, with the alternative having to click back and forth between traditional pages.<br><br>

The premise of the interface came with a lot of questions marks, but was one I firmly believed in. After a few months live, it was eventually scrapped for a more formal and common layout, yet I feel vindication in the fact that this form of interaction has since been used in popular sites around the web. A demo can be viewed with the button below, and examples of this interaction can be seen <a href="http://spacecollective.org/recent/list" target="_blank" class="reglink">here</a> and <a href="http://newspulse.cnn.com/" target="_blank" class="reglink">here</a>.<br>
<a href="/takepartdemo/content_video.html" target="_blank">View Demo ></a></p>

<div class="thumb_group">
<div class="thumb"><a href="/images/takepart-38.jpg" rel="enlarged" title="Home Page"><img src="/images/takepart-38-preview.jpg" width="314" height="427"></a></div>
<div class="thumb"><a href="/images/takepart-39.jpg" rel="enlarged" title="Issue Landing Page"><img src="/images/takepart-39-preview.jpg" width="314" height="427"></a></div>
<div class="thumb"><a href="/images/takepart-40.jpg" rel="enlarged" title="Expanded Article"><img src="/images/takepart-40-preview.jpg" width="314" height="427"></a></div>
<div class="thumb"><a href="/images/takepart-1.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-1-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-2.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-2-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-3.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-3-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-4.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-4-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-5.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-5-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-6.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-6-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-7.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-7-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-8.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-8-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-9.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-9-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-10.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-10-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-11.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-11-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-12.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-12-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-13.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-13-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-14.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-14-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-15.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-15-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-16.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-16-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-17.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-17-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-18.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-18-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-19.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-19-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-20.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-20-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-21.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-21-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-22.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-22-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-23.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-23-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-24.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-24-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-25.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-25-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-26.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-26-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-27.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-27-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-28.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-28-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-29.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-29-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-30.jpg" rel="enlarged" title="Wireframe"><img src="/images/takepart-30-preview.jpg" width="314" height="486"></a></div>
<div class="thumb"><a href="/images/takepart-31.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-31-preview.jpg" width="314" height="200"></a></div>
<div class="thumb"><a href="/images/takepart-32.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-32-preview.jpg" width="314" height="200"></a></div>
<div class="thumb"><a href="/images/takepart-33.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-33-preview.jpg" width="314" height="200"></a></div>
<div class="thumb"><a href="/images/takepart-34.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-34-preview.jpg" width="314" height="200"></a></div>
<div class="thumb"><a href="/images/takepart-35.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-35-preview.jpg" width="314" height="200"></a></div>
<div class="thumb"><a href="/images/takepart-36.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-36-preview.jpg" width="314" height="200"></a></div>
<div class="thumb"><a href="/images/takepart-37.jpg" rel="enlarged" title="Wireframes"><img src="/images/takepart-37-preview.jpg" width="958" height="620"></a></div>
<div class="thumb"><a href="/images/takepart-41.jpg" rel="enlarged" title="TakePart Ecosystem"><img src="/images/takepart-41-preview.jpg" width="958" height="538"></a></div>
<div class="thumb"><a href="/images/takepart-42.jpg" rel="enlarged" title="User Flow"><img src="/images/takepart-42-preview.jpg" width="314" height="176"></a></div>
<div class="thumb"><a href="/images/takepart-43.jpg" rel="enlarged" title="Functionality Road Map"><img src="/images/takepart-43-preview.jpg" width="314" height="176"></a></div>
<div class="thumb"><a href="/images/takepart-44.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-44-preview.jpg" width="314" height="269"></a></div>
<div class="thumb"><a href="/images/takepart-45.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-45-preview.jpg" width="314" height="177"></a></div>
<div class="thumb"><a href="/images/takepart-46.jpg" rel="enlarged" title="Design Concept"><img src="/images/takepart-46-preview.jpg" width="314" height="177"></a></div>
<div class="thumb"><a href="/images/takepart-47.jpg" rel="enlarged" title="Prototyped Concept"><img src="/images/takepart-47-preview.jpg" width="314" height="212"></a></div>
<div class="thumb"><a href="/images/takepart-48.jpg" rel="enlarged" title="Prototyped Concept"><img src="/images/takepart-48-preview.jpg" width="314" height="245"></a></div>
<div class="thumb"><a href="/images/takepart-49.jpg" rel="enlarged" title="Prototyped Concept"><img src="/images/takepart-49-preview.jpg" width="314" height="368"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>NYSee</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/nysee.html" />
    <id>tag:henrykuo.com,2011://2.33</id>

    <published>2011-10-15T07:54:01Z</published>
    <updated>2011-10-28T22:40:24Z</updated>

    <summary> (2006) - NYSee was a 5 year side project that began long before Google Maps launched Street View. In fact, it was publicly displayed just one year before Google pretty much made this project irrelevant. But the body of...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Art" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Code" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[


<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2006)</span> - NYSee was a 5 year side project that began long before Google Maps launched Street View. In fact, it was publicly displayed just one year before Google pretty much made this project irrelevant. But the body of work remains, and the entirety of it was done solely on my own.<br><br>

The crazy idea back in the year 2001 was to videotape every single street in Manhattan, and construct a program to allow a user to turn at any intersection within each video. Underestimation occured at practically every step, but at each point, I'd just gone too far to quit.<br><br>

Planning a meticulous route that would take me through every single street of Manhattan and building a custom camera mount that I could rig up to whatever rental car I got took me a year to complete. It all paid off in the actual filming part which surprisingly took me only 10 days. That's 10 days where I covered the whole city, every street, in every legal direction, including all highway on and off ramps and every bridge and tunnel in and out of Manhattan save the Cross Bronx Expressway which I scrapped dues to its complexity and exhaustion from 10 days of 8 hour non-stop driving.<br><br>

Over 4000 hours of video then had to be transferred to hard drive, all through a single mini-dv deck, one tape at a time. The biggest task actually came next, and that was to edit the frames of every single street so that playing it would move down the street at a continous pace, no slowing down for lights or acceleration from stops. This took me 3 entire years, all in spare time. No fancy editing environment. Just Quicktime Pro, copying and pasting frames like stop-motion. Without a ShuttlePro, this probably would've taken me twice as long.<br><br>

Once I had all the final edited video, I pulled it all together in Macromedia Director with a custom database, embedded map built in Flash which communicated with the core Director program to follow along with the video, and various audio clips matched with the level of traffic in each frame to enhance the experience.<br><br>

The design left something to be desired, but I was happy just to get it working, and I barely got it finished in time to be accepted into Ars Electronica 2006, the annual festival of art and technology held in Linz, Austria.</p>

<div class="thumb_group">
<div class="thumb"><a href="/images/nysee-1.jpg" rel="enlarged" title="Street View - Lafayette St"><img src="/images/nysee-1-preview.jpg" width="958" height="708"></a></div>
<div class="thumb"><a href="/images/nysee-17.jpg" rel="enlarged" title="Ars Electronica 2006, SIMPLICITY - the art of complexity"><img src="/images/nysee-17-preview.jpg" width="636" height="636"></a></div>
<div class="thumb"><a href="/images/nysee-2.jpg" rel="enlarged" title="Street View- East 13th St"><img src="/images/nysee-2-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-3.jpg" rel="enlarged" title="Street View - 5th Ave"><img src="/images/nysee-3-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-18.jpg" rel="enlarged" title="Ars Electronica 2006 booklet page"><img src="/images/nysee-18-preview.jpg" width="636" height="636"></a></div>
<div class="thumb"><a href="/images/nysee-4.jpg" rel="enlarged" title="Street View - Greenwich St"><img src="/images/nysee-4-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-5.jpg" rel="enlarged" title="Street View - South St"><img src="/images/nysee-5-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-6.jpg" rel="enlarged" title="Street View - Brooklyn Bridge"><img src="/images/nysee-6-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-7.jpg" rel="enlarged" title="Street View - Central Park East Dr"><img src="/images/nysee-7-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-8.jpg" rel="enlarged" title="Street View - Broadway"><img src="/images/nysee-8-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-9.jpg" rel="enlarged" title="Street View - Wadsworth Ave"><img src="/images/nysee-9-preview.jpg" width="314" height="232"></a></div>
<div class="thumb"><a href="/images/nysee-10.jpg" rel="enlarged" title="Hacked-together Camera Rig"><img src="/images/nysee-10-preview.jpg" width="958" height="530"></a></div>
<div class="thumb"><a href="/images/nysee-11.jpg" rel="enlarged" title="Camera Rig in Place"><img src="/images/nysee-11-preview.jpg" width="314" height="487"></a></div>
<div class="thumb"><a href="/images/nysee-12.jpg" rel="enlarged" title="60-something odd Mini-DVs with footage"><img src="/images/nysee-12-preview.jpg" width="314" height="419"></a></div>
<div class="thumb"><a href="/images/nysee-13.jpg" rel="enlarged" title="Page from street directions"><img src="/images/nysee-13-preview.jpg" width="314" height="419"></a></div>
<div class="thumb"><a href="/images/nysee-14.jpg" rel="enlarged" title="Custom Map of Manhattan"><img src="/images/nysee-14-preview.jpg" width="958" height="719"></a></div>
<div class="thumb"><a href="/images/nysee-15.jpg" rel="enlarged" title="Wireframe"><img src="/images/nysee-15-preview.jpg" width="636" height="358"></a></div>
<div class="thumb"><a href="/images/nysee-16.jpg" rel="enlarged" title="Snippet from Excel Spreadsheet"><img src="/images/nysee-16-preview.jpg" width="314" height="112"></a></div>
</div>
</div>]]>
        
    </content>
</entry>

<entry>
    <title>The Realm</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/the-realm.html" />
    <id>tag:henrykuo.com,2011://2.57</id>

    <published>2011-10-15T07:53:56Z</published>
    <updated>2011-10-28T22:43:58Z</updated>

    <summary> (2009) - The Realm was an animated web series with custom artwork by renowned comic book artist Mike Mayhew. It featured four superheroes, each representing an aspect of Cisco&apos;s Security solution, following their defense of an epic virus attack....</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Art" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2009)</span> - The Realm was an animated web series with custom artwork by renowned comic book artist Mike Mayhew. It featured four superheroes, each representing an aspect of Cisco's Security solution, following their defense of an epic virus attack.<br><br>

A follow-up project allowed people to create their own custom comic page, armed with the entire library of Mayhew's artwork created for the web series, all meticulously outlined and color-corrected.<br><br>

I designed both websites, starter custom comics, wallpapers and media, the black & white wallpapers in particular being a joy to assemble from Mayhew's gorgeous drawings.<br><br>

The Realm series won a 2010 Bronze Effie Award and the Comic Creator received a 40th Creativity Annual Awards Platinum Award and w3 Awards Gold.<br>
<a href="http://www.youtube.com/watch?v=_YC1pJVQg00" target="_blank">Watch Episode 1 ></a>&nbsp;&nbsp;&nbsp;<a href="http://www.youtube.com/watch?v=izEexTiOTSE" target="_blank">Watch Episode 2 ></a>&nbsp;&nbsp;&nbsp;<a href="http://www.youtube.com/watch?v=7uuJ-qg3zK8" target="_blank">Watch Episode 3 ></a>&nbsp;&nbsp;&nbsp;<a href="http://www.youtube.com/watch?v=bj15MAkZaN8" target="_blank">Watch Episode 4 ></a></p>

<div class="thumb_group">
<div class="thumb"><a href="/images/realm-1.jpg" rel="enlarged" title="The Realm Landing Page"><img src="/images/realm-1-preview.jpg" width="958" height="613"></a></div>
<div class="thumb"><a href="/images/realm-6.jpg" rel="enlarged" title="Screenshots from Animation"><img src="/images/realm-6-preview.jpg" width="958" height="349"></a></div>
<div class="thumb"><a href="/images/realm-2.jpg" rel="enlarged" title="Video Player"><img src="/images/realm-2-preview.jpg" width="314" height="235"></a></div>
<div class="thumb"><a href="/images/realm-3.jpg" rel="enlarged" title="Solutions Screen"><img src="/images/realm-3-preview.jpg" width="314" height="235"></a></div>
<div class="thumb"><a href="/images/realm-4.jpg" rel="enlarged" title="Firewall Security Solution"><img src="/images/realm-4-preview.jpg" width="314" height="235"></a></div>
<div class="thumb"><a href="/images/realm-5.jpg" rel="enlarged" title="Engineer View"><img src="/images/realm-5-preview.jpg" width="314" height="235"></a></div>
<div class="thumb"><a href="/images/realm-7.jpg" rel="enlarged" title="Comic Creator"><img src="/images/realm-7-preview.jpg" width="636" height="520"></a></div>
<div class="thumb"><a href="/images/realm-8.jpg" rel="enlarged" title="Custom-made Comic"><img src="/images/realm-8-preview.jpg" width="314" height="746"></a></div>
<div class="thumb"><a href="/images/realm-9.jpg" rel="enlarged" title="Custom-made Comic"><img src="/images/realm-9-preview.jpg" width="314" height="746"></a></div>
<div class="thumb"><a href="/images/realm-10.jpg" rel="enlarged" title="Custom-made Comic"><img src="/images/realm-10-preview.jpg" width="314" height="746"></a></div>
<div class="thumb"><a href="/images/realm-12.jpg" rel="enlarged" title="Wallpaper - Trace"><img src="/images/realm-12-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-11.jpg" rel="enlarged" title="Wallpaper - The Realm"><img src="/images/realm-11-preview.jpg" width="636" height="398"></a></div>
<div class="thumb"><a href="/images/realm-13.jpg" rel="enlarged" title="Wallpaper - Jux"><img src="/images/realm-13-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-14.jpg" rel="enlarged" title="Wallpaper - Vixa"><img src="/images/realm-14-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-15.jpg" rel="enlarged" title="Wallpaper - Wall"><img src="/images/realm-15-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-16.jpg" rel="enlarged" title="Wallpaper - Sketch Style - Jux"><img src="/images/realm-16-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-17.jpg" rel="enlarged" title="Wallpaper - Sketch Style - Jux"><img src="/images/realm-17-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-18.jpg" rel="enlarged" title="Wallpaper - Sketch Style - Vixa"><img src="/images/realm-18-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-19.jpg" rel="enlarged" title="Wallpaper - Sketch Style - Wall"><img src="/images/realm-19-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-20.jpg" rel="enlarged" title="Wallpaper - Sketch Style - Extras"><img src="/images/realm-20-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/realm-21.jpg" rel="enlarged" title="Cisco Homepage Feature - Episode 1"><img src="/images/realm-21-preview.jpg" width="314" height="104"></a></div>
<div class="thumb"><a href="/images/realm-22.jpg" rel="enlarged" title="Cisco Homepage Feature - Episode 2"><img src="/images/realm-22-preview.jpg" width="314" height="104"></a></div>
<div class="thumb"><a href="/images/realm-23.jpg" rel="enlarged" title="Cisco Homepage Feature - Episode 3"><img src="/images/realm-23-preview.jpg" width="314" height="104"></a></div>
<div class="thumb"><a href="/images/realm-24.jpg" rel="enlarged" title="Cisco Homepage Feature - Episode 4"><img src="/images/realm-24-preview.jpg" width="314" height="104"></a></div>
<div class="thumb"><a href="/images/realm-25.jpg" rel="enlarged" title="Cisco Homepage Feature - Comic Creator"><img src="/images/realm-25-preview.jpg" width="314" height="104"></a></div>
<div class="thumb"><a href="/images/realm-26.jpg" rel="enlarged" title="Web Banner"><img src="/images/realm-26-preview.jpg" width="958" height="159"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>Barbie 50th Anniversry</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/barbie-50th-anniversry.html" />
    <id>tag:henrykuo.com,2011://2.56</id>

    <published>2011-10-15T07:53:01Z</published>
    <updated>2011-10-29T06:47:19Z</updated>

    <summary> (2009) - In 2009, Barbie turned 50 years old. So something big needed to be done online to celebrate her big anniversary. Recalling the Halo Believe site from a few years earlier, I thought the idea of a camera...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[

<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2009)</span> - In 2009, Barbie turned 50 years old. So something big needed to be done online to celebrate her big anniversary. Recalling the Halo Believe site from a few years earlier, I thought the idea of a camera flying through a fully built model landscape was a perfect fit, considering how all of the dolls, accessories, houses, vehicles, and animals were made to be assembled together into a toy fantasy land.<br><br>

The budget was considerably smaller than that of the Halo Believe site, but Barbie's own professional set designers took on the epic task of building six gigantic detailed landscapes with the dolls, accessories and all composed within.<br><br>

Since the entire site was based on the interaction of this video being played in an infinite loop, I had to get creative with the site map, displaying an oval track with segments that represent a different chapter in the video, with the ability to dive into detailed content at specific interaction points during the video.<br><br>

I also had the idea of creating a diorama for the timeline, but this was sadly scrapped for a fairly traditional timeline. You can see the diorama timeline in the wireframes below and imagine how the dolls and accessories would relate to when they appear in the video. A simple and fun idea, and one that I'd like to do in some form in the future.<br><br>

The Barbie 50th Anniversary site received a Silver ADDY Award in 2009.<br>
<a href="http://www.youtube.com/watch?v=HD3xWuCibCM" target="_blank">Watch 50 Years of Barbie ></a></p>

<div class="thumb_group">
<div class="thumb"><a href="/images/barbie-2.jpg" rel="enlarged" title="Screenshots from Video"><img src="/images/barbie-2-preview.jpg" width="958" height="449"></a></div>
<div class="thumb"><a href="/images/barbie-3.jpg" rel="enlarged" title="Wireframe with Looping Video"><img src="/images/barbie-3-preview.jpg" width="958" height="620"></a></div>
<div class="thumb"><a href="/images/barbie-1.jpg" rel="enlarged" title="Video Player"><img src="/images/barbie-1-preview.jpg" width="636" height="558"></a></div>
<div class="thumb"><a href="/images/barbie-4.jpg" rel="enlarged" title="Wireframe - Landing Page"><img src="/images/barbie-4-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-5.jpg" rel="enlarged" title="Wireframe - Loading"><img src="/images/barbie-5-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-6.jpg" rel="enlarged" title="Wireframe - Introduction"><img src="/images/barbie-6-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-7.jpg" rel="enlarged" title="Wireframe - Video Player"><img src="/images/barbie-7-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-8.jpg" rel="enlarged" title="Wireframe - Interaction State"><img src="/images/barbie-8-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-9.jpg" rel="enlarged" title="Wireframe - Item Overlay"><img src="/images/barbie-9-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-10.jpg" rel="enlarged" title="Wireframe - Item Overlay Story"><img src="/images/barbie-10-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-11.jpg" rel="enlarged" title="Wireframe - Item Overlay Share"><img src="/images/barbie-11-preview.jpg" width="314" height="203"></a></div>
<div class="thumb"><a href="/images/barbie-12.jpg" rel="enlarged" title="Wireframe - Tell a Friend"><img src="/images/barbie-12-preview.jpg" width="314" height="203"></a></div>
</div>
</div>

]]>
        
    </content>
</entry>

<entry>
    <title>Epic Mickey Concepts</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/epic-micky-concepts.html" />
    <id>tag:henrykuo.com,2011://2.34</id>

    <published>2011-10-15T07:52:56Z</published>
    <updated>2011-10-29T06:50:16Z</updated>

    <summary> (2009) - In 2009, we were pitching Disney for their upcoming game Epic Mickey. We didn&apos;t receive the account, but below is some of artwork done for this pitch. For one particular concept, I came up with a game...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[


<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2009)</span> - In 2009, we were pitching Disney for their upcoming game Epic Mickey. We didn't receive the account, but below is some of artwork done for this pitch.<br><br>

For one particular concept, I came up with a game that would have been played in the real world on your mobile phone. You would pick a side, Club Mickey or Gang Oswald, and using a Google Map API, anywhere you went while the app was open, you would leave a trail of your team's paint. The basic idea was that the team with the greater amount of paint in any particular region would be winning. A web component would show every participant in real-time on a 3D spinnable globe.<br><br>

Disclaimer: the globe with the cities and islands is artwork I pulled from the web, utilizing it as a major element to illustrate how a 3D game would work.</p>

<div class="thumb_group">
<div class="thumb"><a href="/images/epic-mickey-1.jpg" rel="enlarged" title="Title Screen"><img src="/images/epic-mickey-1-preview.jpg" width="958" height="539"></a></div>
<div class="thumb"><a href="/images/epic-mickey-2.jpg" rel="enlarged" title="Game Concept"><img src="/images/epic-mickey-2-preview.jpg" width="958" height="539"></a></div>
<div class="thumb noborder"><a href="/images/epic-mickey-3.jpg" rel="enlarged" title="iPhone Game Concept - Choose Your Side"><img src="/images/epic-mickey-3-preview.jpg" width="314" height="165"></a></div>
<div class="thumb noborder"><a href="/images/epic-mickey-4.jpg" rel="enlarged" title="iPhone Game Concept - Choose Your Side Alternate"><img src="/images/epic-mickey-4-preview.jpg" width="314" height="165"></a></div>
<div class="thumb noborder"><a href="/images/epic-mickey-5.jpg" rel="enlarged" title="iPhone Game Concept - Gameplay"><img src="/images/epic-mickey-5-preview.jpg" width="314" height="165"></a></div>
<div class="thumb"><a href="/images/epic-mickey-8.jpg" rel="enlarged" title="Title Screen Backdrop"><img src="/images/epic-mickey-8-preview.jpg" width="314" height="177"></a></div>
<div class="thumb"><a href="/images/epic-mickey-9.jpg" rel="enlarged" title="Title Screen Backdrop"><img src="/images/epic-mickey-9-preview.jpg" width="314" height="177"></a></div>
<div class="thumb"><a href="/images/epic-mickey-10.jpg" rel="enlarged" title="Title Screen Backdrop"><img src="/images/epic-mickey-10-preview.jpg" width="314" height="177"></a></div>
<div class="thumb"><a href="/images/epic-mickey-6.jpg" rel="enlarged" title="Box Concept"><img src="/images/epic-mickey-6-preview.jpg" width="636" height="252"></a></div>
<div class="thumb"><a href="/images/epic-mickey-7.jpg" rel="enlarged" title="Box Concept"><img src="/images/epic-mickey-7-preview.jpg" width="314" height="222"></a></div>
</div>
</div>]]>
        
    </content>
</entry>

<entry>
    <title>Ogilvy Video Screens</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/ogilvy-video-screens.html" />
    <id>tag:henrykuo.com,2011://2.55</id>

    <published>2011-10-15T07:50:56Z</published>
    <updated>2011-10-29T06:53:27Z</updated>

    <summary> (2011) - Ogilvy&apos;s LA office has television screens spread around hallways, kitchens and the entrance area, all smartly connected with Mac minis. Utilizing my renewed javascript/Jquery capabilities, I built a fully programmable application with the ability to include and...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Code" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2011)</span> - Ogilvy's LA office has television screens spread around hallways, kitchens and the entrance area, all smartly connected with Mac minis. Utilizing my renewed javascript/Jquery capabilities, I built a fully programmable application with the ability to include and order any video, website, templated announcement, twitter feed and even live stream.<br><br>

Every video is faded in and out of black via code to make for smoother transitions, with the audio also being faded in and out. A hairline timeline above the ticker at the bottom indicates the video's progress.<br><br>

The twitter feed is a custom theme built on top of the freely available <a href="https://github.com/lsemel/twitter-convowall" target="_blank" class=reglink>Convowall</a>, with the additional kludgy-but-working tweak to have the tweet rows animate and fade for a softer feel.<br><br>

Templated announcements appear on screen at customizable intervals as well as in the rolling ticker always displayed at the bottom.<br><br>

And any website or live stream can be inserted into the program with a customizable time for it to display before fading out and continuing to the next program item.<br><br>

You can view a demo with the button below, which I've tested in Safari, Chrome and Firefox, and it's best viewed in a browser's fullscreen mode.<br>
<a href="/ogilvyvideodemo" target="_blank">View Demo ></a></p>

<div class="thumb_group">
<div class="thumb"><a href="/images/ogilvy-video-2.jpg" rel="enlarged" title="Video Player"><img src="/images/ogilvy-video-2-preview.jpg" width="958" height="599"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-1.jpg" rel="enlarged" title="Programming Guide"><img src="/images/ogilvy-video-1-preview.jpg" width="958" height="672"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-3.jpg" rel="enlarged" title="Video Player"><img src="/images/ogilvy-video-3-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-4.jpg" rel="enlarged" title="Video Player"><img src="/images/ogilvy-video-4-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-5.jpg" rel="enlarged" title="Real-time Twitter Feed"><img src="/images/ogilvy-video-5-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-8.jpg" rel="enlarged" title="Real-time Twitter Feed"><img src="/images/ogilvy-video-8-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-6.jpg" rel="enlarged" title="Video Player"><img src="/images/ogilvy-video-6-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-7.jpg" rel="enlarged" title="Video Player"><img src="/images/ogilvy-video-7-preview.jpg" width="314" height="196"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-9.jpg" rel="enlarged" title="Code Snippet - Schedule"><img src="/images/ogilvy-video-9-preview.jpg" width="314" height="367"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-10.jpg" rel="enlarged" title="Code Snippet - Functions"><img src="/images/ogilvy-video-10-preview.jpg" width="314" height="367"></a></div>
<div class="thumb"><a href="/images/ogilvy-video-11.jpg" rel="enlarged" title="Code Snippet - HTML"><img src="/images/ogilvy-video-11-preview.jpg" width="314" height="367"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>McKesson For Better Health</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/mckesson-for-better-health.html" />
    <id>tag:henrykuo.com,2011://2.54</id>

    <published>2011-10-15T07:50:19Z</published>
    <updated>2011-10-29T06:54:31Z</updated>

    <summary> (2011) - This website built for McKesson basically took on the same interface as the Cisco Together site with boxes expanding within the page to reveal video and text content. I built this working demo as an alternate version...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Code" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2011)</span> - This website built for McKesson basically took on the same interface as the Cisco Together site with boxes expanding within the page to reveal video and text content.<br><br>

I built <a href="http://henrykuo.com/mckessondemo/" target="_blank" class=reglink>this</a> working demo as an alternate version of the interface with more transitions and an auto-scroll effect, though we decided in the end to stick with the basic version.<br>
<a href="/mckessondemo" target="_blank">View Demo ></a></p>

<div class="thumb_group">
<div class="thumb"><a href="/images/mckesson-1.jpg" rel="enlarged" title="Landing Page"><img src="/images/mckesson-1-preview.jpg" width="636" height="685"></a></div>
<div class="thumb"><a href="/images/mckesson-2.jpg" rel="enlarged" title="Expanded Video"><img src="/images/mckesson-2-preview.jpg" width="314" height="397"></a></div>
<div class="thumb"><a href="/images/mckesson-3.jpg" rel="enlarged" title="Prototyped Concept"><img src="/images/mckesson-3-preview.jpg" width="314" height="307"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>Zebra.com Concepts</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/zebracom-concepts.html" />
    <id>tag:henrykuo.com,2011://2.53</id>

    <published>2011-10-15T07:48:51Z</published>
    <updated>2011-10-29T06:55:36Z</updated>

    <summary> (2010) - This was a very quick pitch to refresh Zebra&apos;s website to modern expectations of web design with a fresh clean and open style with a wider footprint. Stylization was kept to a minimum with clean shapes and...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="Design" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2010)</span> - This was a very quick pitch to refresh Zebra's website to modern expectations of web design with a fresh clean and open style with a wider footprint. Stylization was kept to a minimum with clean shapes and lines to make the content easy to scan and read. A bold header motif using photos masked within a barcode pattern matched perfectly with Zebra's business, which largely centers around the use of barcodes to tag and track just about anything in the physical world.</p>

<div class="thumb_group">
<div class="thumb"><a href="/images/zebra-1.jpg" rel="enlarged" title="Home Page"><img src="/images/zebra-1-preview.jpg" width="958" height="539"></a></div>
<div class="thumb"><a href="/images/zebra-2.jpg" rel="enlarged" title="Home Page Alternate"><img src="/images/zebra-2-preview.jpg" width="314" height="277"></a></div>
<div class="thumb"><a href="/images/zebra-3.jpg" rel="enlarged" title="Product View"><img src="/images/zebra-3-preview.jpg" width="314" height="593"></a></div>
<div class="thumb"><a href="/images/zebra-4.jpg" rel="enlarged" title="ISV Accelerator Program"><img src="/images/zebra-4-preview.jpg" width="314" height="256"></a></div>
<div class="thumb"><a href="/images/zebra-5.jpg" rel="enlarged" title="Support Page"><img src="/images/zebra-5-preview.jpg" width="314" height="260"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>Cisco ESPN Studio Mockup</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/cisco-espn-studio-mockup.html" />
    <id>tag:henrykuo.com,2011://2.52</id>

    <published>2011-10-15T07:47:10Z</published>
    <updated>2011-10-29T07:04:32Z</updated>

    <summary> (2010) - Cisco was exploring an opportunity to create and showcase a custom Telepresence unit on a live ESPN Sportscenter broadcast in the context of interviewing a professional athlete far across the globe. We were provided a few shots...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="3D" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[
<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2010)</span> - Cisco was exploring an opportunity to create and showcase a custom Telepresence unit on a live ESPN Sportscenter broadcast in the context of interviewing a professional athlete far across the globe.<br><br>

We were provided a few shots of the studio, but they weren't enough to illustrate the full flow of how we envisioned the script to unfold. Even though I'd had practically zero experience with any 3D programs beforehand, I decided it was the ideal option since it would only require creating the studio once, and then the view could be placed absolutely anywhere we needed.<br><br>

I went ahead with Google's free Sketchup application, and just spent a few hours going through the tutorial and getting comfortable with the interface. I got the hang of it quickly enough, and then just went about building the ESPN studio from scratch, using the photos as reference. I pulled out images from the photos such as the floor and the SportsCenter backdrop and texture-mapped them onto the relevant 3D panes, and then plopped a couple of the anchors into the scene and I was set.<br><br>

It's nothing mind-blowing, but I'm pretty happy with the result of my first 3D endeavor.</p>

<div class="thumb_group">
<div class="thumb"><a href="/images/cisco-espn-1.jpg" rel="enlarged" title="3D Wireframe"><img src="/images/cisco-espn-1-preview.jpg" width="958" height="532"></a></div>
<div class="thumb"><a href="/images/cisco-espn-2.jpg" rel="enlarged" title="3D Basic Colors"><img src="/images/cisco-espn-2-preview.jpg" width="958" height="532"></a></div>
<div class="thumb"><a href="/images/cisco-espn-3.jpg" rel="enlarged" title="3D Textured"><img src="/images/cisco-espn-3-preview.jpg" width="958" height="532"></a></div>
<div class="thumb"><a href="/images/cisco-espn-4.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-4-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-5.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-5-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-6.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-6-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-7.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-7-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-8.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-8-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-11.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-11-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-12.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-12-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-9.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-9-preview.jpg" width="314" height="170"></a></div>
<div class="thumb"><a href="/images/cisco-espn-10.jpg" rel="enlarged" title="Storyboard"><img src="/images/cisco-espn-10-preview.jpg" width="314" height="170"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

<entry>
    <title>New York Times Concepts</title>
    <link rel="alternate" type="text/html" href="http://henrykuo.com/2011/10/new-york-times-concepts.html" />
    <id>tag:henrykuo.com,2011://2.51</id>

    <published>2011-10-15T07:46:22Z</published>
    <updated>2011-10-29T07:07:41Z</updated>

    <summary> (2010) - Cisco was working on a partnership with the New York Times to create a new video platform for the New York Times website. It centered around making live events a more &quot;human&quot; social experience, incorporating live video...</summary>
    <author>
        <name>Henry Kuo</name>
        
    </author>
    
        <category term="UX" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Work" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://henrykuo.com/">
        <![CDATA[<div id="projectcontainer">
<p class="projectdescription"><span class=projectdate>(2010)</span> - Cisco was working on a partnership with the New York Times to create a new video platform for the New York Times website. It centered around making live events a more "human" social experience, incorporating live video chat rooms to invite friends through Facebook or Twitter. One example also incorporated a map of the world with real-time audience data, as well as a standard text chat window and live twitter feed.<br><br>

Another example was a continuous 24 hour broadcast, with one hour  allotted to a specific city in each time zone at 6pm local time for each. So one could tune in at any time day or night and get the 6 O'clock news from around the entire world.</p>

<div class="thumb_group">
<div class="thumb"><a href="/images/nytimes-concept-2.jpg" rel="enlarged" title="Live Video Stream - Live Video Chat"><img src="/images/nytimes-concept-2-preview.jpg" width="636" height="465"></a></div>
<div class="thumb"><a href="/images/nytimes-concept-1.jpg" rel="enlarged" title="Live Video Stream - Comments"><img src="/images/nytimes-concept-1-preview.jpg" width="314" height="235"></a></div>
<div class="thumb"><a href="/images/nytimes-concept-3.jpg" rel="enlarged" title="The 24-hour 6'oclock News Channel"><img src="/images/nytimes-concept-3-preview.jpg" width="314" height="200"></a></div>
<div class="thumb"><a href="/images/nytimes-concept-4.jpg" rel="enlarged" title="The 24-hour 6'oclock News Channel - Video Player"><img src="/images/nytimes-concept-4-preview.jpg" width="314" height="194"></a></div>
<div class="thumb"><a href="/images/nytimes-concept-5.jpg" rel="enlarged" title="Video Interaction Visualization"><img src="/images/nytimes-concept-5-preview.jpg" width="636" height="393"></a></div>
<div class="thumb"><a href="/images/nytimes-concept-6.jpg" rel="enlarged" title="Wireframe - Chat with Text"><img src="/images/nytimes-concept-6-preview.jpg" width="314" height="194"></a></div>
<div class="thumb"><a href="/images/nytimes-concept-7.jpg" rel="enlarged" title="Wireframe - Chat with Video"><img src="/images/nytimes-concept-7-preview.jpg" width="314" height="194"></a></div>
<div class="thumb"><a href="/images/nytimes-concept-8.jpg" rel="enlarged" title="Wireframe - 360 Interaction"><img src="/images/nytimes-concept-8-preview.jpg" width="314" height="194"></a></div>
</div>
</div>
]]>
        
    </content>
</entry>

</feed>

