Creative + Technology + UX + Brand

Hi. My name is Henry Kuo and I like to create experiences. I design for context. For customers' needs, aspirations and emotions. I see from the thousand-foot lens of the needs of a brand to the microscopic level of the timing of a hover state. I get my hands dirty in code to experiment, test and validate. I push for the final 1% in execution that's only noticeable if it isn't there. I question. I challenge. I seek reasons, not opinions. Though every once in a while, I just like to have a little fun.

Scroll down or use arrow keys to continue

Some basics

I reside in Los Angeles. Grew up in Louisiana. Lived in New York, San Francisco and Hawaii in between.

My career has taken me through design, digital, UX, PR and global ad agencies to my current position on the client side that's brought even greater clarity and intimacy with the customer.

My technology of choice to play with is JavaScript both on client and server with iOS development as a hobby on the side. (This site, by the way, was fully built from the ground up. Scroll to the last section to see a bit about its development.)

iPhoneception

Plant a prank on your friend's iPhone

An interactive web page that mimics the iOS home screen on any iPhone ... with an evil twist.

The iOS (6) interface in HTML, CSS & JavaScript

I had the idea to recreate the iOS home screen as a web page with just HTML, CSS & JavaScript. I mimicked every little detail, even to the way the buttons change transparency on tap but become fully opaque once the finger starts to drag.

If one were to load this web page on an iPhone and add it to the home screen, it could then be launched full screen just like a native app and fool any unsuspecting person that it is, in fact, the actual iPhone interface.

Prank time!

So my next thought was this is cool, but how could it be cooler? What if when you tried to open an app, the app's icon exploded in flames instead? Or a giant zombie popped up out of nowhere with a crazy scream? All you'd then need to do is grab your friend's phone for one minute to load up the page, add it to their home screen and launch it to set the trap. You wouldn't even need their Apple ID password.

April Fools' Virality

I targeted April Fool's as the perfect time to spread the word. I sent feelers out to numerous sites in the approaching weeks and it got generously featured on TUAW, the most popular apple blog on the internets. It didn't take long after to go viral, attracting 1.5 million unique visitors around the world.

See it in action

Watch the video above and just imagine how your friends would react if they had no clue what they were in for!

Visit iPhoneception »

Tabasco Nation

Show your love for TABASCO and earn prizes & badges

A Facebook app for passionate lovers of TABASCO

A Facebook app with flavor

TABASCO wanted a platform to let people celebrate and show off their love of TABASCO. I took the TABASCO red color and ran with it, adding grungy textures for a tactile and worn feel.

I also created custom vector art and hand-crafted over 36 unique badges that fans could earn through various forms of participation within the app.

I adopted the TABASCO bottle's red cap shape for the frame of the badges and then meticulously designed each badge with its own unique artwork, incorporating various flourishes to enhance motion or decoration.

A profile frame for your favorite flavor

In addition, I designed and illustrated seven unique profile frames that fans could select to show off their favorite TABASCO flavor. These are my four favorite ones.

Media

No large-scale marketing campaign comes without media placements, and this one had me designing a wide variety from basic banners to full page takeovers.

Yogan No Tabi: Journey of Lava

What if Doodle Jump was a side-scroller?

An upcoming indie game for iOS

Initial prototype

My all-time favorite iPhone game is Doodle Jump, a game where a green alien jumps upwards from platform to platform.

I'd always wondered what it would be like if it was a side-scroller, but lacked any experience coding anything remotely close to Objective-C. After a considerable amount of time, I made a decision one day to just download Xcode, open up a few tutorials and just see what happens.

It wasn't as scary as I thought, but still far from easy, and a few weeks later, I ended up with the prototype in this video, without aid of any starter kit or game engine, all the code native and hand-written. I even managed to match the accelerometer controls of Doodle Jump which was no small feat and something I'll admit I kind of lucked into through experimentation.

Yet another endless runner?

I'm actually not a fan of endless runners, Doodle Jump being a rare exception. So once I had the prototype, I decided the game should have a specific beginning and end with a meaningful journey in between. I went through tons of character and art style explorations, the latest of which is this mixture of texture, collage and cutouts.

Home-made scene construction tool

Since the code was all hand-written, I needed to create my own method of being able to visually construct and freely maniuplate a scene which would then output the scene's code for the app. I turned to plain old JavaScript in the browser and it worked out perfectly, allowing me to move, resize, and edit every attribute and quickly push into the app to test each scene's playability.

The game is still currently in development with a planned release date in 2015.

Navigators

A new brand for a new band of ballers

A launch of a new app needed to hit the right tone

Welcome to the Club

This was a quick brand exploration for an app targeted at college students to make money in their free time requiring only access to their phone. The concept was to make it feel like a secret society to give members social cachet beyond the functional value of their role.

Cisco Space Invader

HTML5 Interactive Game for iPad

An interactive ad experience touch-enabled for iPad

A touch-enabled HTML ad as a playable game

As part of a Cisco Security campaign, I built this working prototype of a video game that could be played on both desktop and tablet where your goal is to protect your city from invading security threats. It was designed more specifically for tablet with HTML5 the choice of execution since Flash is simply not an option for iPad.

Play the Game »

Barbie 50th

It's Barbie's world.
We just play in it.

Celebrating 50 years of glamour

A Site Map for Looping Video

For Barbie's 50th anniversary, I came up with the idea of creating a mega-set environment using all of Barbie's dolls, buildings, cars, pets and all other accessories. A video camera would fly through this set, from wide shots to close details in smooth twists and turns, ending up in the same position it began so that the video could loop indefinitely. This video would be then used as the basis for the website where a user could move forwards, backwards, and pause to interact with details.

To create a site map for the idea, I drew an oval track that shows the entry point into the video, and how the video would go through various sections of the set, eventually looping back on itself.

NYSee

Before Google Street View, there was NYSee.

An art project that let you navigate every street of Manhattan through video

Navigate Manhattan through video

A few years before Google Street View appeared, I had the crazy notion to take a video of every single street in Manhattan and build an application where users could actually navigate the entire city through those videos with the ability to turn at any intersection.

And I was crazy enough to actually do it!

Planning and execution

It took me a year of planning simply to map out a route that would take me through every street in a fairly efficient manner. I had to match that route with a database of every street so I knew exactly how to parse the raw video. The result of that planning was that it took me a mere 10 days to grab all the footage. 10 days to traverse every single street in Manhattan!

I then spent 3 arduous years editing the video, creating a database matching timecodes to intersections, and completing the app.

Recognition and obsolescence

Completed in 2006, it was accepted into Ars Electronica, an absolute dream result. A year later, Google Street View launched and pretty much made the project obsolete, but it still remains a cherished artifact as an interactive snapshot in time of Manhattan.

JavaScript Video Manager

Fullscreen video management powered by Javascript

Curate your own fullscreen video playlist for ambient TV viewing

What's on TV when clients drop by?

When clients came by our office, we would often be at a loss of what to display on our many video screens. Either an old and tired demo reel or whatever's on CNN or ESPN. There was no particular strategy or thoughtfulness to it.

I decided to take matters into my own hands and thought we needed a quick way to collect and order any number of videos without needing to edit and export a whole new video reel.

HTML & JavaScript? Aren't those just for websites?

HTML5 had matured very quickly at the time, and with the new video tags and JavaScript's ability to manipulate timecodes and volume levels, I built a simple responsive page that could loop through any number of videos added to it.

I even built interstitial screens for twitter feeds, dynamic text with images, livestreams, and the ability to display any web page for a specified amount of time.

The responsive nature of the page allowed it to work on any size monitor, large or small, landscape or portrait, always showing the videos and other content full screen.

Managing the content

I constructed the code in such a way that even a non-developer could figure out how to edit the content. And because the output is basically a web page, reviewing changes is as simple as hitting the browser's refresh button.

Check out a demo »
(Chrome, Safari and Firefox only)

Cisco Together

Together is happening all over the world

Technologists talk about what it means to be together in today's world

Access content without losing context

Cisco Together was a campaign featuring prominent technologists talking about what it means to be together in a connected world.

For the design of the website, I had a novel idea of a grid of boxes that expanded and minimized to reveal content within without ever leaving the page. It allowed users to freely explore the videos and articles without the disorientation that can come from loading page after page of content.

No content restrictions

Each content's container had a flexible height to accommodate content of any length. The minimized containers simply ragged and floated around the expanded content.

Media

I designed a wide variety of media placements, each with their own unique templates and interactions.

TakePart

Learn. Share. Change.

Compelling social change through personalized journeys

Craft a meaningful story through the news

For a relaunch of the TakePart website, I led the UX strategy to come up with a unique new way for people to discover content.

It started with the basic concept of news articles not just being related, but related in a specific order, not necessarily chronological, but in a way that crafted a coherent and meaningful story.

The final concept was to place summaries of the articles for each story in a basic list of rows. Clicking on a summary row would expand it to view the full article without loading a new page, so the user could still see the articles that come before and after, retaining the context of the focused article within the larger story.

I executed the idea through to the wireframe stage ending up with a 150+ page IA document.

Exploratory Stage

These are just a few of the many diagrams and charts developed while in the brainstorming stage.

Ratchet & Clank

The story so far...

Consolidating the disparate R&C sites under one roof

Site Redesign

This was a pretty straight-forward redesign I executed when Sony wanted to consolidate all of the disparate Ratchet & Clank sites for each game.

The style was based off of their latest game's menu system, and made to feel like video game box art.

Just the First Frame

Just the first frame of the best comics on the web

You decide if you want to read the rest

You have to click through for the punchline

In the web comic industry, there has long been contention between comic artists and sites that unscrupulously aggregate their work. These aggregation sites are great for audiences who want to view the comics quickly and casually, but offer little to no benefit to the comic creators who lose out on both ad impressions and any analytics of who is viewing their work.

A long time fan of the genre, I thought if only the first panel were shown then you would have no choice but to click through to the original source to read the entire comic.

Everyone wins

Both artist and audiences benefit. Audiences get a fun visual way of discovering new comics. Artists get the audiences driven directly to their site for ad impressions and retention.

Over 800 comics monitored daily

I maintained the site for over 2 years, making updates to over 800 comics simultaneously at its peak. I continually optimized steps in the process to streamline and reduce effort, though the cropping was always done manually.

The site is no longer active, but during it's time it was incredibly well-received by the many artists who allowed me to share their comics and a service I enjoyed providing each day.

HenryKuo.com

About this site

A brief peek under the hood

Basic concept

The basic idea for my site was to marry the freely-scrollable nature of a long single page site with the single-slide focus of a slideshow presentation. As you've already seen, while scrolling down the page, it will "lock" into the closest slide when you stop scrolling, removing the awkward "in-between" states that so many single page sites have.

I built this entire site from scratch, the only library of note being Smooth Scroll which required some injected code allowing me to cancel an auto-scroll transition if it detects the user manually scrolling. (It's actually trickier than you might think, because JavaScript has no way to detect the difference between code scrolling the page and a user scrolling the page. To JavaScript, any scrolling is simply a scroll state.)

Photo Credit: lorisflickr cc

Swappable page templates

I started with a few basic page templates and how they should appear in landscape vs portrait orientation. Page template 1, for example, shows text on left and image on right in landscape, but in portrait, the text is on top with the image on bottom. Additionally, font sizes change in relation to the size of the display, ensuring the site will be mobile-friendly.

I can easily edit content and preview it on the fly, swapping templates as I please to see what feels best.

It's probably easier to just see it in action

Words are boring! Watch the video for a brief demo. There's a lot more going on under the hood and options I don't show in the video, but you'll get a sense of how easy it is for me to build a few quick slides.

Thanks for coming by

Find me on LinkedIn, Facebook, Twitter, Google+, or send me an email.

1
/