We had the opportunity to collaborate with Citibank, on a very addictive social HTML5 game.

Here’s a quick primer: stock-picking is a common past-time for those who invest in the stock market. Why not have a fantasy stock-picking game, based on real-time events? It just made a lot of sense. We needed some data from the stock market, plus a method to ‘gamify’ it within a controlled environment.

The objective of the game, was to allow the general public to speculate on the Hang Seng Index. Aptly named “Guess the Index”, players would try to guess if the index went up or down within the game period. These two categories are further divided into subcategories, of 100 points each.

During the promotional campaign, players would log into the game between 9 am and 1 pm to speculate on how the index would perform. Depending on how close the guesses are, players would be assigned carefully weighted points to their scorecard.

Here are a few screenshots:

Login page: Users are immediately asked to log in via Facebook, to keep track of their everyday scores

Game page: One of the pages where the user gets to speculate on the Hang Seng Index

Submission dialog : Requesting confirmation from the user

Personal leaderboard: Allowing users to keep track of their personal scores, by day

The game was integrated within Citibank’s native app, via a WebView element. The WebView element is present on all native iOS and Android apps, giving unprecedented access to HTML5 webapps.

The login system was designed to be extremely simple to follow. On the server-side, we designed a simple system which handled users and their respective scores. Scores would be organized into a leaderboard fashion with our very own MarketJS API, and reset every day.

Sharing results is one of the most critical aspects of any social game. We integrated a simple Facebook share function, attempting to encourage users to share their scores.

We worked very hard to simplify the game flow, down to less than 5 pages. It was by design, because casual users hardly have time to “learn” a whole new fantasy game. These are the users that fire up an app during lunch time, see a link to the game and click on it. They’re expecting quick fun and reward!

Performance-wise, we were happy with how well the game ran. Here in the company, we’d normally test the game against one of our oldest devices, a 2009 Samsung Captivate on Android 2.2. It worked, with 30-38 frames per second! On newer devices, the animation was much more fluid and native-like, reaching 60 frames per second on iOS devices.

In summary, the campaign was a success, giving casual users a chance to play, earn points and compete with each other. This is great example on how HTML5 can improve brand awareness within a short period of time.

To inquire more about the game, view a demo, or request a quote for a similar project, please contact us.