Kingsman: The Secret Service. The movie trailer, gamified

To truly immerse audiences in the release of the film, Kingsman: The Secret Service, Director Anrick Bregman and a team of storytellers, designers, and developers to created an unforgettable interactive experience that allowed users to perform Secret Service missions from the comfort of their own homes.

In case you’ve never seen the movie (you should), Kingsman is an action spy film directed by Matthew Vaughn, based on Dave Gibbons and Mark Millar’s comic book, The Secret Service. A dapper  veteran secret agent, played by Colin Firth,  sees potential in a young protégé and guides him  into the world of espionage. The film’s villain, Mr Valentine, is a tech-billionaire who wants to control the world by using free SIM cards, so he can bring about a genocidal solution to global climate change. It’s a must-watch.

Players begin the second screen experience by connecting their smartphone to their desktop and using it to control the action happening on the larger screen. The two devices are linked and can exchange up to 25 interactions per second—kind of like their phone is an extension of the larger screen.

Using touch and swipe action and a virtual compass to control the outcome of missions, players have the opportunity to prove their skills as a potential Kingsman agent.

Our design team was inspired by the ultramodern gadgets and stylish tailoring that embodies the film’s gentlemanly Kingsman agents. We translated the film’s art direction into a design approach to create an experience that feels sharp, smart and immaculate. This is complemented by Firth’s narration as he speaks directly to users during their mission briefing.

Next, they’re instructed to help Colin’s character discover hidden data and steal intel from the enemy. The first mission, The Rainmaker, takes “agents” straight into a fight scene from the film and allows them to fight as Colin himself, using swipe action to kick some ass. Tracing the shapes correctly enables the remainder of the scene to unfold.

To build this mission, our developers created several prototypes. Below is one that you can play with. Simply drop an audio file onto it and see the sound represented visually, just as it is on the Kingsman site. Change the settings and customize it however you please. 

The second mission allows agents to explore one of London’s most famous places, a key location in the film: St. Pancras train station. Their phone becomes a virtual compass so that they can uncover important intel for the senior Kingsman, Harry Hart.

But the clock is ticking, so they have to rush to scan the station for suspicious activity. When they finally locate the highly sensitive intelligence, they must scan its contents and slip out of the station unseen by Valentine, the character played by Samuel L. Jackson.

To build this mission, our developers used the Street View API to capture a high volume of real images from Kings Cross station. Our design team retouched each image one by one to add the main characters from the film into the station’s setting, tweaking a total of 12,000 images.

Our developers ran an export script in Photoshop to create the tile set required for each zoom level. This resulted in a full tile set of 461 images per panorama. All positional data for the markers was loaded with an external JSON, making it easier to tweak and alter.

In addition to the mission,  users can unlock film information, watch the trailer, and download custom-made wallpapers from the site.