The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

tv2murder-header

To celebrate the New Zealand launch of Disney’s “How to Get Away with Murder” TV show, TVNZ Blacksand created a unique murder mystery game app, presented as an “Alternate Reality Game,” a concept developed in the late 90’s with EA’s “Majestic” and Halo 2’s “iLoveBees”.

TVNZ Blacksand handled the app’s visual design and created the video content, and Rush Digital developed the game, in which the player is a new junior member of a legal criminal defense team, defending client Hilary Finn, who is accused of murdering her boyfriend Tim Carter, a local sports hero.

The app, built with Ionic, is presented as the internal communications hub of the fictional law firm, M Attorney-at-Law. Sections in the app include Secure Email, Secure Messaging, Secure Voicemail, Notes, a Contacts List (which is actually a disguised global leaderboard of Facebook friends and all other players), and News, which links to the Twitter feed of the game’s fictional investigative journalist, Freddy Law.

“Central to the whole experience is the Tasks section, which lists specific actions the players have to do to progress their case,” says Danu Abeysuriya of Rush Digital, the developer of the game. “These were released over a six-week period, unraveling the murder mystery narrative and engaging players to go out of the app into the real world–to Twitter, YouTube, Tumblr, print publications, partner websites–even making and receiving real-life phone calls and texts, all to uncover clues to progress their case.”

When players complete a task, they are asked if they want to ‘leak’ or ‘bury’ the evidence in order to support their client’s case. Players receive points for the tasks they completes and the items they discover. They also have the opportunity to gain bonus points by completing weekly tasks and by sharing whether they leak or bury task evidence.

The target audience is 18-30 year old fans of the “How To Get Away With Murder” TV show.

“Ionic’s workflow, simplicity and cost were the most relevant to the types of the projects that we were looking to execute,” says Abeysuriya. “The main pain point for our clients was ‘cost vs. cross-platform’– we didn’t want to exacerbate this by adding large ongoing licensing fees, and Ionic was a good option for keeping costs down while still getting on Android and iOS effectively.”

Abeysuriya’s development team used all the default Ionic controls & styles (lists, sidebar, header, nav, etc.) when creating the prototype and the first iteration of the app. Next, they customized the CSS to fit with the design provided by TVNZ Blacksand. Platform-specific alterations included enabling the back-button on Android and basic app lifecycle tweaks.

“We actually ended up with quite a bespoke UI in the final version,” says Abeysuriya. “The place where Ionic really proved its worth was the speed with which we were able to get up and running and rapidly iterate.”

The team was able to build the app in under six weeks.

“Getting onto Android using Cordova was a breeze once we had the iOS build done,” says Abeysuriya. “This is something that’s quite rare in the app world, especially because we had some pretty heavy Facebook integration going!”

Check out the video promo for the game and the [video promo for the TV show “How To Get Away With Murder“.

Download the Android version.

Download the iOS version.

  • Ronan Connolly

    Impressive stuff.

  • Badru

    Great.