We recently had the opportunity to collaborate with Electrolux, a Swedish multinational brand on a HTML5 quiz game. The marketing objective of the game was connect a music festival with a strong consumer brand.
Figure 1: Landing page of the game
Using HTML5 was a no-brainer, as it allowed us to easily distribute the game to a large audience, without being subject to App Store approval times. Later in this post, we'll describe why we chose HTML5.
The game concept is simple: given a lyric and corresponding audio clip, guess the song artist. Correct guesses would be awarded points, while wrong guesses would lead to points deduction. Users would be able to compete for the top score via a Facebook-powered leaderboard.
On the technical side, we have a large database song data and clips at a time, 10 of which are presented to the user every round of gameplay. The game client would request the metadata and audio clip from 10 randomly selected songs. With some help from the localStorage element, we could ensure that the songs presented are always fresh. We even had a team to update song data every few days, while the marketing campaign was running.
Speed of loading the audio clip was crucial, as it added to the experience of the game. 5-second, highly compressed audio clips was the solution to this.
The UI was presented in a clean fashion. The text lyric is shown in the middle. The audio clip button is visible in the top right, with the pre-loaded clip ready to fire. Upon selecting an answer, the "next" button would appear, acting as a final confirmation button.
Here are a few screenshots:
Figure 2: Start screen
Figure 3: The game screen
Figure 4: Another game screen
The game was distributed via social media and news channels, recording over 177,660 completed gameplays within 72 hours of going live. Most importantly, it solidified a regional music festival with a multinational consumer brand. It's proof that HTML5 can be used to create interactive and engaging experiences, to benefit both users and brands.
Why did we choose HTML5?
We believe the advantages of HTML5 would continue to drive brand adoption, enabling users to quickly engage with their favorite brands.
To inquire more about this project, view a demo, or request a quote for a similar project, please contact us.
|HTML5 Games For Loyalty Rewards: A Case Study with Livetribe||10-24-2017|
|HTML5 Card Game For Boost Mobile||10-20-2017|
|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|