Become a Kingsman Knight
20th Century Fox | 2015
Become a Kingsman Knight is an interactive online 2nd screen gamified experience for the movie Kingsman: The Secret Service. The digital experience created excitement for the film before its release in cinemas and gave people a chance to interact with and learn about Kingsman characters ahead of time.
The landing page background animation was created with code.
The map gave access to special content and functioned as an entry point to the missions.
Each mission started with a brief from Colin Firth and a short animated tutorial.
Each mission unlocked special content users could share across social media channels.
The mobile phone worked as a controller to the actions on the desktop screen.
About the project:
The Secret Service 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 is Mr Valentine, 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.
The experience first asks you to connect your smartphone to a 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, so your phone really acts as an extension of the larger screen.
Using touch and swipe action and a virtual compass to control the outcome of missions, you have the opportunity to prove your skills as a potential Kingsman agent.
The first mission, The Rainmaker, takes you straight into a fight scene from the film and allows you to fight as Colin himself, using swipe action to kick some ass. Tracing the shapes correctly enables the remainder of the scene to unfold.
The second mission allows you to explore one of London’s most famous places, a key location in the film: St. Pancras train station. Your phone becomes a virtual compass so that you can uncover important intel for the senior Kingsman, Harry Hart.
But the clock is ticking, so you have to rush to you scan the station for suspicious activity. When you finally locate the highly sensitive intelligence, you 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.
Awards: FWA Site of the day, FWA mobile of the day, Awwwards, CSSDA 2015 Best Entertainment Site
Role: Creative Director and UX
Website Link: kingsmanmovie.com/becomeakingsman
Technology: Google Streetview, html5, canvas, 2nd screen
Client: 20th Century Fox
Production Company: UNIT9