A Brief Showcase of Work
Hi. My name is Henry Kuo and I like to design and code. (often in tandem) Below is a sample of my work spanning UX, visual design and code.
↓ Scroll down or use arrow keys to continue
↓ Scroll down or use arrow keys to continue
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.
So what's the point of it all then? To play some pranks on your friends! If you can get access to their phone for just one minute, you can install this on their phone without needing to know their Apple ID password. You would then have several fun options to choose from: exploding icons, cute kittens, gravity effect, and the most popular by an enormous margin, a zombie with a frightening scream.
I targeted April Fool's Day as the perfect time for this app to be relevant.
I sent feelers out to numerous sites in the weeks approaching that day, and out of sheer luck, it got generously picked up by the largest apple news blog TUAW. It didn't take long after that for it to go viral, garnering 1.5 million unique visitors from people around the globe, with notable splashes in the U.S., France, Germany and Japan.
Watch the video above to see an example of it in action. And imagine how your friend would react if they had no clue what they were in for!
My all-time favorite iPhone game is Doodle Jump, a game where a green alien jumps upwards from platform to platform.
I had long 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 snap 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 get extremely close to the accelerometer controls of Doodle Jump, which is essentially the most critical aspect of the game, being practically the only way the user interacts with the game.
I actually quite dislike endless runners, Doodle Jump being a rare exception. So once I had the prototype, I decided the game should have a specific beginning, end, and a meaningful and emotional 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. But I'm still in the process of maturing the style, reserving the right to scrap it altogether if inspiration strikes.
I'm also still in the process of devising unique challenges based on the basic mechanic that the character always jumps while the player propels him left and right.
The game is still currently under development with no particular timetable for completion.
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 came up with the simple idea that if only the first panel were shown, then users had no choice but to click through to the artists' sites if they wanted to read the entire comic.
Audiences get a quick and visual way of browsing panels for ones they find interesting.
Comic artists get the full click-through impression with every ad or retention opportunity that comes when a user is on their actual site.
The actual cropping is still done manually to this day, but over time I've continually refined processes to retrieve screenshots of the pages for each day's update.
I currently make use of CasperJS to retrieve the urls from my FeedWrangler account, which then runs through a series of basic logic to weed out non-comic pages and positions the screenshot close to the actual comic image on the page. The script runs automatically every hour, so all that's left is for me to check my folder for new images to crop.
It's been tremendously well-received by the many artists who have allowed me to share their comics and a service I'm happy to provide every day.
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.
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.
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.
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.
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.
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.
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.
These are just a few of the many diagrams and charts developed while in the brainstorming stage.
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.
In the wireframe, I illustrated how we could create a progress bar that resembled the actual set, but as a long strip, giving users very clear context for jumping to different points in the video.
This could also be used during the loading screen, communicating the concept that the set is being constructed as the site loads.
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.
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.
I designed a wide variety of media placements, each with their own unique templates and interactions.
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.
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 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.
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.