Every Chip Gets A Dip

Tostitos believes that no chip should ever be without dip. So for March 23, National Chip & Dip day, we decided to take that sentiment both very seriously and quite literally by giving everyone in America named Chip his (or her?) own free Tostitos dip. For real. All Chips have to do is visit EveryChipGetsADip.com, submit proof of their “chip-ness,” and get ready to receive the deliciousness. While supplies last, of course.

This project was built one week from conception to completion. It was meant to be a quick shot and was met with overwhelming success. We earned lots of media and gained a ton of traction with the “couponer” community, receiving over 14k submissions and changing what we thought was possible internally.

The Team

Kia handled the front end. Patrick produced the project.

My Role

I built the backend and the front end form validator. I also built the admin tool the allowed submissions to either be approved or denied.

Technologies

Server
- NodeJS: app running on server to bother serve the site and the admin interface
- MySQL: Amazom RDS instance to store the user information
- Amazon S3 for image storage
- Websockets: to sync all admin interfaces so each admin can receive realtime updates and work in parallel
Front end
- JavaScript: form validation & submission was done via Ajax

Is It White?

Remember the dress?

I give you http://isitwhite.com/

I had an idea to make a stupid website that was just white, and links back to the topic on reddit.

I bought the domain, put the site up in about 15 minutes and watched in awe as people started pouring in. To date I’ve had 280k users.

It was even listed on http://www.theuselessweb.com/

If that isn’t a lesson in quick shots, I don’t know what is!

Seagate Living Logo

Our agency was tasked with rebranding the identity of Seagate. The banner was “Creating space for the human experience.” We wanted to show our data as “living.”

Once our design team had the new mark, we “filled” it with data. In this case building a prototype from scratch that pulled information from instagram and realtime streaming data from twitter. The logo was then populated by tweets, instagram photos and later facebook information.

My Role

Prototype production and technical direction on the final product.

Technologies

I built the backend that provided Marpi with the information to populate his logo. The server was built on Amazon Ec2 running NodeJS with a connection to Amazon RDS for data storage.

Here’s a demo of the prototype in action:

Infiniti Shopping Cart

Infiniti asked our agency to participate in pitching some re-branding work. As a part of our pitch strategy we were tasked with coming up with ways in which Infiniti’s in-car technology could be applied to other areas of life. The idea was to show the usefulness of Infiniti’s technology through a series of clever stunts and installations. One such technology is their “intelligent brake assist” meant to help drivers avoid accidents by applying the brakes automatically if the car detects a collision is imminent.

Enter, the shopping cart. Who hasn’t been “healed” by one of these things in the grocery store? So we built a shopping cart that can’t run into anything.

The Team

Patrick and I worked together to come up with several different interactive scenarios for several different Infiniti technologies. In the end we landed on our strongest idea, the brake assisted shopping cart. We worked simultaneously to produce a prototype that could be pitched in a client meeting as well as some demo carts that could be flown to Hong Kong for the final meeting.

My Role

Concept and production

Technologies

Arduino Uno with custom servo driving shield and power supply regulator
Servos with grippers
Pololu stepper motor driver
Parallax sonar range finder
duct tape

The Process

We started first with a cart from the mail room, producing a prototype with duct tape and bungee chords in under 24 hours.

We refined our design until the pitch and ended up actually doing the presentation:

The client loved the idea. They requested that we bring the prototypes to Hong Kong so the rest of the team could see. So we produced two mini version of the idea (always good to have a backup with pitches).

We started by make a modular pack that could fit inside the shopping cart’s shell:

We then removed the stepper motor braking system and designed a new system that included a single servo with a gripper arm that clamps onto the axel shaft of the cart.

and the pack:

Here I am testing the (almost finished) prototype:

Dali Museum

What if you could “Dali-ize” yourself into a work of art? This was the concept behind Gala Contemplating You, where Salvador Dali’s famous work of art turns the viewer into a painting. The concept is simple, take a picture of yourself and we’ll turn you into a one of a kind digital work of art. Shortly thereafter, we show you in the Salvador Dali Museum, next to the real thing for the world to see!

A photo kiosk at the Museum turned visitors’ self-portraits into pixelated replications of the original artwork and projects these new images alongside the original monumental canvas. A corresponding mobile website (galacontemplatingyou.com) allowed virtual visitors – from anywhere around the globe – to submit their photos and become part of the artwork as well. Once displayed, a photo of your work of art next to the original is automatically shared back to you, closing the loop.

We had over 19k submissions gained a ton of press about the project as well as the museum.

The Team

We had a good team for this project. Kia produced the software that controlled the camera mounted in the museum. Marpi, produced the software that controlled the projections and helped with installation. Chris and Pablo had the concept. Patrick and MBK kept us all in check by managing the project.

My Role

Production of the backend, mobile app and in-museum photo kiosk.

Technologies

In-museum photo kiosk
- Objective-C: native iPad app to do initial scaling/adjustment of images & submit the to the backend through an API
Server
- JavaScript: Amazon Ec2 instance running NodeJS, Amazon S3 for media storage and Amazon RDS for database
Mobile App
- HTML5 + CSS3: mobile app allowing users to capture & upload images from anywhere

Doritos Bold Stage

How do you make 70,000 people at SXSW care about a chip brand? Produce three days of can’t-miss performances, all inside the world’s largest vending machine.

That’s exactly what we did. I was pulled in last minute to help make the control software that would allow users to go up on stage, select a bag and try to catch it as it falls from a giant vending machine.

My Role

Tech direction and production of the native IOS apps that interact with the giant vending machine. I also built a simple IOS app that allowed people to share photos of themselves catching the bags of Doritos. This app allowed them to share via Facebook, Twitter and email.

You can see a video of the app working here:

And a user flow for the share app.

Adobe Remix

Our team was asked to take part in the Adobe Remix project, a showcase of creative interpretations of the Adobe logo.

We wanted to highlight the creative activity that adobe products enable. So we re-created Adobe’s logo as a physical installation with 100 handmade cubes, each one correlating to an artist using Adobe software in real time.

Each cube captures a single pixel from an individual artist as they work on their creative projects. “Adobe Lights,” which lives at Adobe’s San Francisco headquarters, brings together physical, digital and interactive elements into one living logo installation.

The Team

The entire beta team participated in this project in one capacity or another. Thanks to Kia and Russell for building the site to display our work. Thanks to Stevie for the design work. Thanks to Chris and Pablo for your amazing ideas. To Marpi for his 3d digital version of the wall. Michael Phillips organized the project beautifully. Kalle fought for us to build it in-house. Finally to Patrick, for your tireless work (physically constructing the wall) and positive attitude throughout, thanks!

My Role

Concept and production.

Technologies

I built the following (Thanks to Patrick Wong for assembling the physical components of the wall!):

Physical – I designed the electronics to power and connect the wall to realtime data
- LEDs – 3000 individually addressable WS2812 LEDs in strips of 60
- 4 X 60 Amp 5V power supplies
- 4 X Arduino Megas
- 1 Mac Mini
Digital – I designed and built the infrastructure to manage the wall and the following pieces
- Native app that artists can install (runs in the background and broadcasts color information over socket connection to server)
- NodeJS Server (running on amazon Ec2) to receive artist color information, store and provide realtime updates to the wall
- Native App (running on mac mini) to receive color updates over socket from the server, parse updates and send updates (byte level) to arduino megas over usb.
- Custom Arduino mega software to receive updates from mac mini and control LEDs.

The Process

After we knew what we were going to make, I spec’d out exactly what we would need to build it. Because of the timeline, we had to get it right the first time. I wanted to make sure we could update every pixel on the wall (all 3000 leds) at 60 frames per second (I ended up only getting about 45). The power system was designed using fritzing.

Each cube in the wall had a strip of 30 leds wrapped around a tube sitting in the middle. Each 30 led strip connected to a different signal pin on the arduino mega. The wall itself was split into quadrants, so an individual arduino only controlled 25 cubes at a time. This also made communication over usb realistic.

The final power board ended up looking something like this:

These power boards sat directly behind the wall and fed the lights through individual cables. In theory we could disassemble the entire thing and make whatever new shape we want!

Here’s the wall without the acrylic panels:

Testing the wall:

A view from the back:

And the final product (shot in the armory downtown):

Cheetos Away!

How do you introduce new Cheetos that don’t look like Cheetos? By letting people play with them. We turned a TV commercial into a game on YouTube, where you can fling new Cheetos Mix-Ups snacks from your phone into a video playing on your desktop.

In order to pitch this idea to Cheetos in a way that would convey how fun it was to fling cheetos across the room, we built a prototype. It included connecting a smart phone to a desktop computer over websockets and running some pretty crude animations so simulate the look and feel of the original idea. The prototype was built within two weeks and the clients loved it.

My Role

Production of the prototype and technical direction of the finished product.

Technologies

HTML5 mobile app
CSS3 animations on desktop
Websockets to connect the mobile device to the desktop