Bank of Ann Arbor was looking to capitalize on the success of their billboard advertising campaign. These billboards poked fun at the lack of knowledge "non-local bankers" have of the Ann Arbor area. For example, "Non-local bankers think Bo and Woody were in Toy Story" is a headline that alludes to two University of Michigan football coaches.
Several dozen such advertisements had appeared around the area and were so well received that fans of the bank were already posting their own ideas on Bank of Ann Arbor's Facebook wall.
The Build-A-Billboard contest was created as an outlet for those who wanted to contribute their quips to the campaign. One Grand Prize winner would have their headline turned into a real billboard.
A previous campaign I had worked on for BOAA had generated a substantial amount of "likes" to the bank's Facebook page. I was given just a few days to build the application and solicit content from their 20,000 new fans.
I started by building a prototype that would take user input, submit it to the server, and use PHP's GD library to render an image with the appropriate text. This was complicated slightly by the need for a heavy shadow on the text, as well as a custom font and forced line breaks.
All of these problems could have been easily overcome by using the HTML5 canvas element and doing all of the drawing on the frontend. However, IE7 support was required for this client, so I had to settle for some creative solutions.
To add a text shadow, I drew the text multiple times on top of the image in different colors and positions. The composite of these layers was very similar to the shadow seen on the actual billboards. Importing a custom font called for a good deal of file conversions to find a format that PHP would deal with.
After struggling for a while to compute on the server where to add line breaks, I eventually settled on using the browser to parse the text before it was sent along to the server. This made it possible to determine the width of characters in a non-fixed width font by using DOM elements.
Reaction to the contest was extremely positive. There were over 250 submissions to the contest, and in the end Bank of Ann Arbor ended up using several of the submitted headlines on real billboards.
The bank gained even more traction on Facebook and were very happy to see new life breathed into a long-running campaign. There was even a write up in Crain's Detroit Business.