July 7, 2012 - 4 comments

Making of “The Jack Boxer” (Daybreak)

iphone-jack-boxer-northkingdom-app-att-designchapel-design
iphone-jack-boxer4

NORTH KINGDOM PROJECT — "Daybreak 2012, a transmedia webseries by Tim Kring (Heroes, Conspiracy for Good), launched on May 31st with the release of the first of 5 weekly chapters of the webseries on Daybreak2012.com. Along with the Daybreak 2012 website, the Jack Boxers app was also released for both the iPhone and Android smartphones, along with an accompanying website, We Are The Jack Boxers. The purpose of both the app and the website is to enlist help for the cause of the Jack Boxers, who are fighting the forces of darkness and bringing the Truth to light."Wired Magazine

The “Jack Boxer” app is in the story built by an underground organization with the same name. The app is mainly a way for them to communicate securely using text, image and audio messaging. The "Jack Boxer" is found in Daybreak, which is a web TV series deeply integrated with an immersive digital layer. It's a continuation of a sidetrack from the tv serie "Touch" with Kiefer Sutherland.

"The Daybreak main story unfolds in five, roughly ten minutes long episodes shown on daybreak2012.com and fox.com. But the story doesn’t end there, rather the opposite. On websites and via the smartphone app, the viewers can explore different fragments of an exciting and complex journey. The Jack Boxer application lets the audience be a part of the main character hunt to succeed with his mysterious mission. The app together with jackboxers.com lets fans dig deeper into the Daybreak experience. Much deeper." — Monterosa

The project was a close collaboration with Monterosa Stockholm who impressed me a lot with their expertize and focus on details! They did an amazing job! A true creative technology master piece!

————————

Download — Jack Boxer app (iPhone)
Download — Jack Boxer app (Android)
Watch episodes — Daybreak

Read more about the project & making of — North Kingdom (coming soon)
Read more about the concept — Wired Magazine
Watch "Touch" — FOX Broadcast

————————

dashboard-jackboxer-daybreak-app-design-north-kingdom-designchapel

I have personally been hooked by iPhone apps since I bought my first from US 2007. Today, 5 years later, I have finally designed my first app. And yes, it was so fun I always had imagine! The app was described by someone as a "James Bond app for geeks", which is pretty true. I have I rendered the images you see here in Cinema 4D with screenshots from the app.

The only brief I had designing Jack Boxer, was to make old school user interface with a fresh tweak. We wanted a look and feel of a site/app run by a major Unix hacker. This old retro style was perfect when the production time was pretty tight. The challenge was still to make an unique style.

THE DASHBOARD (above) contains a real time 3D globe surrounded by a glass dodecahedron. Underneath it we have a graphic frequency EQ in two layers. One measuring microphone input and the other connected to the pentagon hair cross that sits on top of the globe. Built in pure OpenGL on iPhone and Unity3D on Android.

jackboxers-and-daybreak_designchapel_northkingdom1

Two websites, one story. Jack Boxers (the game) & Daybreak (the story). The app is also found in the Daybreak episodes by BBDO and Tim Kring, which is an immersive and interactive entertainment experience presented by AT&T.

Images below are taken from these episodes:

daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-21
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-41
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-5
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-6

One of eight sections is the RECORDING and SOUND EDITING TOOL. The sound editor let users change the playback direction and playback rate. This way they can find hidden messages within audio clips that’s almost impossible to hear otherwise.

daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-7
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-8
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-10

The FREQUENCY ANALYZER is another tool built to find messages, this time hidden in series of frequencies. The Jack Boxers have mapped a number of characters to tones/frequencies enabling messaging via sounds that can be found anywhere. The scanning for frequencies are represented by a dynamic point cloud.

jackboxer_screens-copy

My workfile where I have collected all my design in an "Art Direction Overview Map". For me, this was the only way to get a picture of what I was doing. To see how everything worked against each other. The time I had for this was super short, so it helped a lot the design was pretty simple. The feeling had to be an old computer system combined with a new, hi-tech technology. Most of this stuff was created during one hectic week.

northkingdom-at-monterosa-jack-boxer1

A snapshot from my iPhone at Monterosa. On my left side is Carl Rung, Creative Director at Monterosa, going throu the latest updates via an Apple TV. Danilo Boer, Art Director from BBDO New York, and Marcus Ivarsson, Creative Director at North Kingdom are sitting on the other side table.

jack-numbers-and-logotypes-1
doda_numbers

From the shape of the dodecahedron I created some clean and simple digits and logotypes.

ikoner-jack-box-2

The system icons. I wanted them as simple and clean as possible, but still interesting.

jackboxers-findthetruth-blog-tumbrl-designchapel-northkingdom

I also designed a very simple blog for Jack Boxes, based on a tumblr theme.

flash-animation-jack-boxers

Before entering the Jackboxers blog, I have animated a boot up sequence of their computer system. A very short and very simple animation made in Flash, but still very fun to do. And with some cool sound effect it turned out quite cool I think.

You can see the animation on my dev link as well.

——

jack-boxer

Download — Jack Boxer app (iPhone)
Download — Jack Boxer app (Android)

Published by: Robert Lindström in Application
Tags:

Comments

kevin
July 9, 2012 at 11:15 am

That is trully amazing and inspiring. Seriously. Very impressive work.

Comments are closed.

Lucian
July 10, 2012 at 2:33 pm

Very cool!

Comments are closed.

Jovan
July 21, 2012 at 4:59 pm

Awesome work indeed!

Comments are closed.

Joelle
July 30, 2012 at 5:23 am

Wow! Honestly one of the most inspiring and beautifully designed projects of 2012 so far. Obsessed!

Comments are closed.