In preparing for the launch of MailChimp 5.3, we in Designlab needed to create a way to give away 1,000 shirts via Twitter and Facebook. The shirts were to be given away in small batches, and we knew from last year that they would go quickly. The goals were to provide a real-time count of how many shirts remained in the current batch,  to effortlessly hide the form when no batches were open, and to send an immediate follow-up email when an order was successfully placed. After looking into some out of the box solutions, we decided to build our own app.

The 2010 shirts giveaway form

Taking the Stage

The app runs on Sinatra, a Ruby micro-framework for simple web applications. It’s hosted on Heroku, whose Git-based app management makes deployment a snap. An admin user can log into the back end and create a batch of X orders, and while there are more than 0 orders remaining, visitors will see the order form. The form hides itself when no shirts remain.

Real-Time Data

Pusher provides real-time client push using HTML5 WebSockets.  We use Pusher to provide a real-time count of remaining shirts in a batch. It is easy to implement, and between the provided Ruby gem and a JavaScript snippet, it takes about 10 minutes to have up and running. Video of the ticker in action is here.

Analytics

By combining MailChimp’s eepurl with BackType, we can see that the shirt app generated at least 63,396 impressions on Twitter through 142 tweets by shirt winners. Also, a batch of 100 shirts will be gone within a minute of being tweeted by @MailChimp.

Client side validation for the 2010 shirts giveaway form.

Responding to Mobile

After running one batch, we noticed that about a quarter of visits to the site were on mobile devices. Using media queries as outlined by Ethan Marcotte in his great piece, Responsive Web Design, we were able to deliver the same form to mobile users, but in one-column.

The form optimized for mobile using CSS media queries