As The Tweets Float By

To fully explain the latest ING Direct project, Sihan (account), David (creative), and Anthony (technology) have teamed up to take you through the journey of strategy, design, and development that’s behind it all.

About six months ago, ING Direct asked us to implement large scale touch screens in all of their café locations across Canada. These screens are street facing so pedestrians can interact with them as they pass by in Montreal, Toronto, Calgary and Vancouver. We thought this was very cool and were totally psyched to get started.

This touch screen project was to refresh the existing Twitter visualization for ING Direct otherwise known as Orange Tweets. This site pulls in all the tweets about ING Direct and presents them in a fun and interactive presentation.

To get some creative traction, we started by sourcing infographics that represent conversations over time, studying multi-touch kiosk demos of various nature, and canvasing the web for existing interactive visualizations. Shortly after, we started out brainstorm on paper. We sketched, debated, and sketched some more until the team had landed on the hot air balloon motif, where by the balloons themselves are metaphors for tweets and the environment in which the balloon live in is the twitter-sphere. Cool, we thought!

From there, we started detailed design and development with a basic logic on how everything worked. The hot air balloons float in the sky on 3 different layers with the most recent tweet living in the foreground, closest to the user. The Twitter feed is modifiable through an admin panel (by ING Direct), and further controllable through the interface in the design (by the user). The interactivity within the environment allows the users to retweet and reply via each individual balloon (the tweets) without leaving experience of Orange Tweets.

The deployment was delivered in two formats, web and touch screen. To take the “balloon” motif to another level and ensure that users could play in the environment, we added a physics engine (Box2d / WCK) into the mix to give the idea some more flavour. The result: a “floaty” atmosphere where hot air balloons thrust on their own, can be grabbed by the user and tossed around and bump into each other, affecting their flight paths.

Development for touch screens is slightly different than for web. UI elements need to be bigger to account for potentially less precise user input (our hands and fingers are significantly larger than a mouse cursor, which has pixel-perfect precision). Users can’t log in and tweet through the touch screen – that would require an on-screen keyboard and less-than-user-friendly system for logging in using the touch screen.

Knowing all this, and with the appropriate amount of planning, we created both versions of the app in tandem, and the results… well, you can see for yourself, either by visiting orangetweets.ca, or very soon by stopping by an ING Direct café in your city.