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:
Splash screen : This is the entry point of the game. User are brought into a sleek, well-designed Citibank theme.
Login page: Users are immediately asked to log in via Facebook, to keep track of their everyday scores
Submission dialog : Requesting confirmation from the user
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.
|3D HTML5 Game for Oreo's Outdoor Promotional Event||09-06-2017|
|HTML5 Game for the Oreo Wonder Vault Ad Campaign||08-31-2017|
|HTML5 Game for a Toyota Car Dealership Event||07-25-2017|
|HTML5 Game Portal for Dice.com Career Website||07-05-2017|
|Me Me Match 3 Jam: Branded Minions Game for Movie Promotion||06-28-2017|
|Minions Banana Hop HTML5 Game for Chiquita and Despicable Me 3||06-21-2017|
|Minions Banana Frenzy Game With Chiquita and Universal||06-09-2017|
|Building a HTML5 game to promote TV viewership||04-25-2017|
|Beat Bozza: HTML5 Game for Lead Generation||04-18-2017|
|Teen Titans Go! Food Fight!||04-10-2017|
|Working with Ford||02-24-2017|
|A Puzzle Game for a Global Healthcare Company||02-14-2017|
|Branding a Match 3 game with Warner Bros Flintstones||02-14-2017|
|The Tom and Jerry Show Cheese Run||02-14-2017|
|A Holiday Game for Wall Street||12-19-2016|
|A HTML5 game for IT Managers||12-14-2016|
|Thunderbirds Are Go: Moon Base Defence||09-26-2016|
|Thunderbirds Are Go: A high-speed chase game||09-12-2016|
|Angry Birds Coloring Book||08-29-2016|
|Ice Age Collision Course: Planet Pool||08-04-2016|
|Lino Grad: A HTML5 game built for a multi billion dollar food company||07-02-2016|
|Betadine Germ Smash: A HTML5 game||06-06-2016|
|Digital signage games in trains||05-30-2016|
|Toyota NHRA: A digital signage game built with HTML5||05-30-2016|
|A HTML5 puzzle game for Mercedes-Benz||05-03-2016|
|Tissot RBS 6 Nations Rugby Game||02-18-2016|
|Scooby Doo Mahjong||02-18-2016|
|A Plinko Game for Kia Motors||01-04-2016|
|Helping a global supermarket chain launch HTML5 games||11-15-2015|
|Thunderbirds Are Go: A HTML5 endless runner game||11-15-2015|
|Disney: Phineas and Ferb Backyard Defense||07-11-2015|
|Disney: Randy Cunningham Saves Norrisville High||07-11-2015|
|American Honey: Escape the Office||03-04-2015|
|Doraemon Gadget Rush||03-01-2015|
|Budlight Beer Bottle Cap Game||02-26-2015|
|HTML5 and Kinect for Instant Win Games||01-12-2015|
|Sunny Boy Chimney Challenge: a christmas HTML5 game||12-07-2014|
|Pest Detective: an educational game built with HTML5||10-22-2014|
|Taiwanese Cultural Event: a game built with HTML5||10-11-2014|
|Green Monday: a shopping game built in HTML5||10-11-2014|
|AT&T Match 3 Memory Game built with HTML5 in 3 days||10-06-2014|
|Sort The Bugs: A Kids Educational Game||09-23-2014|
|Cupcake Vineyards: a wine app built with HTML5||06-10-2014|
|Citibank and Hilton Hotels Match3 Memory Game||06-10-2014|
|FIFA Coca-Cola® Chrome App: built with HTML5||05-07-2014|
|Tic Tac Mints: a marketing experience built with HTML5||04-15-2014|
|Click and Match: a HTML5 Valentine's day dating web-app||01-30-2014|
|Guess the Artist, a HTML5 quiz game with Electrolux||01-19-2014|
|Oddbods Claw Crane, a 3D Animated HTML5 Game||01-13-2014|
|Citibank HTML5 Game||01-09-2014|