Design

(2012) - Built By You was a proposed internal campaign for Cisco employees to completely reimagine employees' intranet profile pages. I began with a simple idea, that while each employee knows which products they've had a role in creating, they don't really have visibility to all of the hundreds or thousands of places these products are being used in the real world. The goal was to instill pride by revealing the tremendous effect they've had all around the world, making it more real than simply knowing they're products are just out there in the wild.

Next, I came up with an interface that moved beyond the typical intranet profile page with a highly visual and interactive interface. Klout-like boxes give each employee a gamified score of their effect within the company. And below are all of the products, solutions, people, teams, and clients with which they've had any role or relationship.

I designed and built the prototype all in development using Photoshop just to spit out individual images. The prototype was optimized for the iPad for presentation purposes only, and tapping on each box revealed the details of the relationship each individual had to the product or person. I experimented with CSS transforms to make the boxes rotate in a smooth and polished 3D motion.
Demo Page - Profile (view on iPad) >   Demo Page - Team (view on iPad) >

(2012) - I came up with the idea for Just the First Frame after browsing Pinterest and finding a lot of web comics shared in full with no attribution nor link back to their original source. This was very basic and clear copyright infringment. As a redditor and browser of r/comics, this certainly bothered me. It's a solution that is mostly for the benefit of casual comic lovers with very minimal benefit to the actual artists who worked hard to create them.

I actually wasn't even looking for a solution, but then the idea just popped into my head that if you showed only the first frame of a comic, people would have no choice but to click through to the original source while still having a fun visual way to browse. A more in-depth explanation can be found here.

I quickly put together a website to get some feedback on the idea and was just incredibly surprised and humbled to get an overwhelmingly positive response. So what started out as an experiment has turned into a fun daily commitment as I get more and more delighted as more people discover and find my simple idea useful.
Visit Just the First Frame >

(2012) - Bought a used Subaru STi steering wheel and mounted a ProClip iPhone holder onto it just so I could play Doodle Jump like this.

Soccer mode happens to be my favorite because the standard mode gets kind of boring, and soccer mode constantly throws waves of monsters at you in the guise of international soccer teams. I make it even more challenging for myself with a couple rules. No shooting or jumping on monsters unless absolutely necessary. When I get to a goal, I have to shoot the ball in. And the added weight of the steering wheel and the need to go one-handed when I have to shoot makes it that much more challenging.

Video of me playing below. Took me a while to get past that first monster, but I love being able to pull off that difficult non-monster-killing move!

(2012) - I started building iPhoneception as a test to see if I could mimic the iPhone interface with HTML, Javascript, and CSS. Once I was done, it was just too obvious to do some wacky things to the buttons.

It's meant to be used as a prank on an unsuspecting iPhone owner. If you can get access to your victim's iPhone, it takes less than a minute to plant iPhoneception on it. When they pick up their phone and try to open an app, they're met with explosions, gravity-drop, kittens, or a really scary zombie (this one comes with a warning).

Launched at the beginning of February, it surprisingly became a huge hit in Germany with a little bit in Amsterdam. The FWA also generously awarded it with the FWA Mobile of the Day. As April Fool's day approached, I knew it could have renewed relevance and retooled my pitch, and I was insanely humbled when TUAW (the most popular Apple blog for the unaware) picked up the story, which in turn sent the story traveling around the globe once again, with France, Hungary, Canada, Japan, the UK, Russia and China leading the way with a tail of traffic that spanned Europe, the Middle East, Asia and South America.

Below is a sample of some of the larger sources of traffic and much thanks goes to the many thousands of wonderful tweets. I'm so happy to have faux-infected so many iPhones around the world!
Visit iPhoneception >

(2012) - Intel invited some of the brightest minds in technology to talk about mobility, connectivity, and innovation in today's society. They chose a format of 60 second videos making the content easily shareable, consumable and usable in a variety of formats.

The design was just a quick study on their recently revamped website with a few extra touches unique to the 60 second idea. Sadly, I think they missed a simple opportunity by not overlaying the 60 second countdown on each video which would have served as a subtle constant cue to the brevity of time commitment.
Visit 60 Second Insights >

(2011) - TABASCO Nation 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.

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.

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.
Visit TABASCO Nation >

(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'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).
Play Game >

(2011) - 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.

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.
Watch Demo >   View HTML5 Ad (works on iPad only) >

(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 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.

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.

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.
Visit Website >

(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 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.

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.

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.
Visit Website >

(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 through testing to determine the best interface.

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.

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 here and here.
View Demo >

(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 work remains, and the entirety of it was done solely on my own.

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.

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.

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.

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.

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.

(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's Security solution, following their defense of an epic virus attack.

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.

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.

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.
Watch Episode 1 >   Watch Episode 2 >   Watch Episode 3 >   Watch Episode 4 >

(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 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.

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.

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.

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.

The Barbie 50th Anniversary site received a Silver ADDY Award in 2009.
Watch 50 Years of Barbie >

(2009) - 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.

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.

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.

(2011) - 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.

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.

The twitter feed is a custom theme built on top of the freely available Convowall, with the additional kludgy-but-working tweak to have the tweet rows animate and fade for a softer feel.

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

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.

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.
View Demo >

(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 of the interface with more transitions and an auto-scroll effect, though we decided in the end to stick with the basic version.
View Demo >

(2010) - 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.

(2010) - Just a few prototypes I designed and built for an Amgen pitch targeting the iPad platform, built in HTML/Javascript. With emerging platforms such as the iPad and Chromebooks, we wanted to explore the budding experimental trend of websites that are designed more like an application, with interfaces that feel inviting to touch and explore, all more achievable now with the growing standardization and increasing efficiency of javascript in modern browsers.

The demos below are very rough as they were built very quickly for presentation purposes only, but they should both work in any modern browser, including Safari on iPad. Demo 1 may require a reload if the layout appears wonky.
View Demo 1 >   View Demo 2 >

(2007) - In 2007, Toyota was looking for a full refresh of their website. The process took us through several months of research, exploration, architecting and design. The site eventually relaunched on the conservative side of our ideas and designs, sacrificing a lot of the sexiness that is now easily possible with today's web standards, and not that far from what was possible back then. Full-screen backgrounds, flexible layouts, animated menu and interface transitions. We also proposed the idea of an avatar in the menu that could respond to any questions, much like Firefox's ubiquity or Apple's Siri, to help users in any way, particularly with selecting a vehicle.

(2007) - Insomniac Games had separate websites for each of its games in the Ratchet and Clank series, and they wanted to clean up and pull them together into a single website which could also grow to introduce and include any future Ratchet and Clank games.

It was a fairly straightfoward process pulling all the weapons, characters, worlds, gadgets, and videos and letting the user filter through them all by game.

The design was inspired from styling of the then latest game Ratchet and Clank Future Tools of Destruction, and my aim was to make the pages feel almost like video game box art, very visual and letting the game artwork fill the space.

(2011) - This is a custom theme I built using the open source Convowall, tweaking the code to make the tweets scroll down. Below are two examples of basic CSS changes that show how this can be customized to pretty much any look. I actually keep the NFL one running for good stretches of the day in my office which keeps me informed far quicker than any news media site or forum, something that comes in quite helpful to give me an edge in fantasy football.

The Bieber example is just cause it makes a great example, being that people just do not stop tweeting about Bieber at every hour of the day.
View NFL Wall >   View Bieber Wall >

(2008) - During March Madness of 2008, we played into people's competitive nature and loyalty to their alma mater to make this Cisco's highest engaged banner at the time.

The idea was to let you select which college you'd like to play for, answer a series of basketball-related trivia questions, and a mean/avarage score would be calculated based on everyone's score who selected the same college. A leaderboard would then display which school was smartest. People could take the quiz as many times as they like to improve their college's score, and they could also be encouraged to select a rival college and purposely throw the game to lower their rival college's score.

A 35 second shot clock set a time limit for answering all 5 questions and added a touch of college basketball feel, and also ensured people couldn't just go look up all of the answers at their leisure.

(2009) - This was a brief exploration of a redesign for Nature Made's homepage in both wireframe and visual design including various methods for a horizontally scrollable area to highlight their latest offerings.

(2008) - This was a basic process of re-architecting the parents section of the Barbie website. I always feel that inserting line drawings makes the wireframes immensely more readable than just boxes and crosses, particularly when it comes to presenting to clients. It's less work on the mind to interpret and make it easy to imagine what the final product could look and feel like.

(2010) - I originally came up with this idea for Cisco to create an aggregate page of their social media feeds as a purely SEO-minded practice. It wasn't until a few months later that it was brought back in another form to replace their news portal.

The 4-column layout was an easy resolution to share the weight of the different feeds as evenly as possible. And a large full-width feature area ensures Cisco can call attention to something important. And at the bottom are links to the rest of Cisco's social media presences.
Visit Website >

(2008) - To generate buzz around the latest Cisco ASR series of routers, we built a teaser site consisting of five mythical people and how the network helps them do their jobs, from Santa Claus delivering presents to Cupid managing who gets shot with arrows.

Each character presented their stories through a series of funny videos, and the user was consistently presented with the opportunity to register to attend an online event revealing the product.

(2008) - At the time, Cisco was weary of constantly making one-off web pages to promote or highlight new campaigns, solutions or products, which had life spans of a few weeks or even days, ending up sitting dormant on their servers and no specific plan to how to tend to them. I came up with this solution that maintained the layout of the homepage, but expanded the feature area downwards to reveal the content right on the homepage.

The first usage of this displayed a video player with a small library of videos to choose from. A subsequent version displayed video in the full area of the expanded feature. The type of content and interaction was practically limitless within the bounds of the expanded area.

A web banner or other media could also drive directly to the homepage with one of the features already fully expanded, so this page served the same practical purposes as the one-off's with the advantage of easy house cleaning.

(2008) - Just a simple and fun repeating dessert wallpaper pattern I illustrated.

(1996-1998) - Before the internet came about, the popular digital distribution media were CD-Roms and floppy disks. I was working for Waters Design at the time in the early days of my career and had done a few playable floppy disk demos for our clients, and the primary limit to design and production was the meager 1.4 megabyte file size limit. It was always a challenge and a lot of time was spent trying different ways of compressing images.

One of the techniques I tried one day was to take a 640x480 background image (that was full-size monitor resolution back then), reduce it to 320x240 pixels, and then resize it to fill the 640x480 space. Since it was a background image, the loss of resolution might not be so bad if we were in a crunch for disk space. This led me to think, what if I took a 40x30 pixel image and blew it up to fill the space? I started making some random pixel drawings, up-sized them to fill the space, and thought that looked pretty dope. The file size was practically zilch since the original image was so tiny, but the effect of it filling the space was pretty strong. I then started making some animations with these tiny images and had so much fun, I just kept making more and more.

I don't quite remember how I came about deciding to turn these into playable floppy disk demos, but it just became a creative outlet for me to make drawings, cartoons, video game commentaries, and just about any random video loop or interactive page I could come up with. Each floppy disk demo consisted of a 40x30 animated menu screen and 4 chapters worth of randomness. On top of that, I added audio loops for each menu screen and chapter, adding to the challenge of cramming as much as I could into the 1.4 megabyte limit.

I didn't really know what to do with them, and purely out of a random idea, I curated a list of agencies and other random people to mail them to. I created and mailed exactly one per week. I guess I was a bit of a troll back then, because I didn't include a note or any contact information, and I just imagined how funny or odd these people must think this is when they get this random disk each week, pop it into their computer, and see this weird-ass shit. One company did manage to track me down, since I always put my name in the bottom corner in small type, and they offered me a job, but I decided not to respond to maintain the oddity of it all.

My goal was to get to 100 of these, but around #45 came the emergence of the internet as a marketing tool, and the fairly immediate death of the floppy disk for promotional purposes. I created a few more targeting the internet as the platform, but without the 1.4 megabyte challenge, it felt somewhat meaningless. I don't know what it was about that silly file size limit, but it just wasn't fun without it. I made a final push to make it to 50 just to get to a round number, but the creativity had been sapped out of it. 50 sounds cooler anyway.

When I was done with them all, I decided to submit them to some award competitions for the heck of it, not expecting anything at all, and it ended up getting accepted into all of them, including the Communication Arts Interactive Design Annual 4, PRINT Digital Design & Illustration Annual 6, and HOW Annaul Self-Promotion Competition. I actually received a call from one of the judges for Communication Arts and was told that while they don't award 1st place, 2nd place and so on, if they did, they would have awarded 1st place to me. I was delighted to hear that. Little did anyone know that essentially, even I had no idea why I did it at all.