Holiday-O-Matic

Illustration, Information Architecture, Interaction Design, Interface Design

Live machine in action

The machine in action on the live site.

send form

Interface for sending a Holiday-O-Matic generated greeting.

back

Back” of the machine, showing privacy policy, legal, and about the charity.

back of machine for print version

We sent out print versions of the Holiday-O-Matic, so I helped illustrate the cord and some plastic interface elements of a “plugged in” version for the back of the print card.

Sketch: Brainstorming

Brainstorming how the Holiday-O-Matic message will be phrased with the team

Sketch: Early Ideas

I sketched out several ideas for how the machine might look before settling on the final version.

Early Wireframe

A wireframe/sketch showing some early ideas for the machine’s form and functionality.

Original sketch

This is the first sketch showing the form the Holiday-O-Matic would eventually take.

Rough Site Map

With a small team, we didn’t need much more than a rough hand-drawn site map to understand the basic flow.

The Task:

Create a greeting card for the holidays that clients and friends would pass along, showing off our team’s capabilities and helping the agency stand out among the yearly interactive holiday greeting hoopla.

We were encouraged to be creative and have fun, with only the following requirements:

The Idea:

The idea we came up with started out as a “Build Your Own Holiday” Generator. We knew we wanted to build some sort of machine that would let people mix and match traditions from various holidays, along with random things thrown in for fun.

Eventually the idea evolved into a slot machine interface that would allow people to randomize the options, or manually pick their favorites from the list. I presented sketches and some high-level wireframes for possible ways to implement this idea. We ended up combining elements from a couple of my sketches to create the final product.

The Process:

Once the overall interaction design was finalized, I created Photoshop mockups of the actual machine and the interface elements. Meanwhile, the content managers defined the final list of options, and our illustrators designed the logotype and created the in-window illustrations.

The visual elements were handed off to the dev and motion graphics teams to bring the machine to life. I went to work designing the emails that would be generated by the machine, while the print designers worked on a print version of the greetings we could use to promote the Holiday-O-Matic.

After several rounds of testing the machine, refining the animation and transitions, adding sound effects, more testing and QA, more refining and tweaking, we finally launched the site in mid-December and set out to promote our creation.

Promotion efforts were purely word of mouth: Sending greetings to our friends, encouraging them to check it out and send greetings to their friends. The Holiday-O-Matic was posted on Twitter, Facebook, Digg, YouTube, and was soon picked up by StumbleUpon, Gizmodo.com, notcot.org, and several other blogs.

The Results:

On December 21, four days after the Holiday-O-Matic launched, our stats showed:

The Holiday-o-matic helped show off our team’s technical capabilities as well as our understanding of social networks and viral marketing, with a final count of around 36,000 unique visitors from 124 countries. A link to Worktank’s web site helped drive the agency’s highest one-day site traffic to date. By the end of the donation period, we raised $4000 for the Rotary First Harvest charity.

Awards

On March 18, 2008, the Internet Advertising Awards presented an award to Worktank for the Holiday-O-Matic for “Best Marketing Interactive application.”

On April 18, 2008, we found out the Holiday-O-Matic was nominated for a Northwest Regional Emmy in Advanced Media, in the Interactivity category.