About the project

Only is a Danish fashion brand present on over 26 markets across the globe that targets girls between 15 and 25. We were approached by their lead agency, Uncle Grey, and asked if we could help manifest Onlys’ new brand approach and message “Only Because We Can” and showcase the spring and summer collection 2012 through a highly entertaining and interactive film experience. The brief focused mainly on how to tell the story about three girls living their lives to the fullest, crossing boundaries and serving as inspiration for the target audience and communicating the attitude of the brand. The outcome is an interactive film called the “The Liberation” directed by Christoffer Von Reis.

Our Role

Our responsibility was to outline, refine and execute the clients’ original thoughts about the film and make sure that everyone engaged in the project was fighting under the same creative vision for the story that was going to be told. We served as a creative hub and made sure that we had the right talent onboard to make it all happen.

Challenge

We met a few challenges along the road on different levels. First of all, how do you emotionally connect with the most picky target audience there is – young females that already dismiss brands on a regular basis online? Second, how do you make them engage with the film once you have their attention? Tough universal questions that needed to be addressed. The brief also had lots of classic road movie connotations and references that we wanted to help building the storytelling from, but without making it too cliché or overly familiar. Last of all, the products for the spring/summer collection needed to be featured – but how do you do that in a non-intrusive way?

Solution

We decided at an early stage that: — The story needed to be fun and engaging, and somewhat relatable. — The tonality needed to have lots of romantic rebelliousness. Raw with out being stiff. Authentic instead of glossy. — That the users needed to have full control of the story, and with the right amount of interaction also be part of it. So essentially what you see is a young woman’s emotional transformation; from a small-town-girl that is held back by her surrounding environment, to someone who is willing to free herself from all of the constraints society brings. In a way it’s a classic Cinderella-like story told in modern and playful way. The interactive aspect is really important, where the users can play around with the film and at any point find out more about the clothes worn by the models, in a very non-intrusive way and at the same time also be part and interact with key situations through out the film.

Partners

Agency: Uncle Grey
Director: Christoffer Von Reis, Camp David
Post production: Stopp
Artist/original music development: Lune
Adaptive music and sound design: Dinahmoe
Back-end development: Agigen

This project came to life through a carefully planned production, a highly devoted and united team and some wonderful clients who dared to give us the freedom to create The Liberation the way it turned out.

ONLY – The Liberation

The concept development
When Uncle Grey first approached us we instantly felt that their ideas where straight up our alley – the brief featured a great portion of interactive storytelling and refined execution. What could be more exiting we figured. The original idea developed by Jimmy Blom (Executive Creative Director at Uncle Grey) and his team was quite to the point – a film about three girls entering a small quite town causing mayhem, messing with the locals, then getting kicked out of there. Plain and simple storytelling with a great ambition to entertain and inspire and to get the brand message and attitude across.

Since the main component for the experience was going to be live action film, we needed to have a director aboard that could share our ambition for the project but also tell the story in the right way. That is why we went for the reputed and talented director Christoffer Von Reis. Based on what he had done before we knew that he and his team had the right spirit to make a shoot like this happen.

Together we shaped creative alliance to plan the next steps, where the relations between us, Uncle Grey and Camp David became more and more integrated, just like it should be endeavoring a challenge like this.

The first steps focused a lot around the tonality, and mood for the film. We saw references like this, this and this and they triggered the creative process immediately in the right direction. Even if the original idea had a lot of American road-movie attributes we where afraid that would become to cliché if we just went in that direction. The client also communicated that it should feel less Americana and have a more universal feel to it. Overall we worked with a lot with references and moods to get the right visual tonality.

Some early mood references

Early in the process we also spent considerable time to establish the right amount of user interaction. We wanted the users to feel absorbed by the story and not being forced to click at certain points to break the illusion too much. And at the same time not loose them. So to get the right balance it took a lot of testing and playing to make it function they way we wanted from a user experience perspective.

The script
Together with Jimmy and Christoffer we wrote and refined the script. We tweaked it so that it could be played out from a local girls point of view. To follow her perspective; from the way she reacted to when the rebellious girls from out of town entered her reality – suggesting moral dilemmas – to when she decides to join them in the end, is an illustration of liberation and not getting too stuck with conformism in your life. Something we believed that the target audience hopefully would find somewhat relatable and inspiring.

Here’s a storyboard that Christoffer Von Reis put together:

Some shots from the shoot:

The art direction
We kept the design minimal to get as much focus on the movie as possible – and that’s a challenge in itself. The design went through a few different stages during the project. Before we had shot the movie it started out quite complex and detailed, and when we had shot the movie we stripped away most of it to lift the movie which is and should be the hero. It’s easy to over-do things in the beginning when not all the elements are in place, it’s important to constantly review the work to see how it has changed during the course of time and see what doesn’t work anymore. In this case the client was very flexible and understood what was best for the project even though a design had already been signed off earlier on.

For the garment names in product view we wanted a hand written style, something that felt a bit naive, almost as if the girls was the ones who had drawn them. Early explorations of the handwritten type:

Putting it all together
The movie can be paused in every frame. When in pause mode, a high-res image fades in and we place hotspots on pre-defined tracking-points over the clothes. We used some automated scripts in After Effects to simplify the process. First we needed to know the exact frame where the user pauses, which can be tricky when dealing with playing encoded flash movies since you can’t rely on the player heads position to get the exact frame number. So we found this method instead: http://nikohelle.net/2011/11/25/as3-perfect-video-sync-with-embedded-frame-numbers/. A binary code is added in an extended strip at the bottom of each video. Then we can read that number and mask and hide the strip. To store all hotspot positions we used another script. So now we could just animate the points, one layer per piece of clothes with a layer-name set to a corresponding id. This could be done either by hand or with motion-tracking. Run the script and all data is exported to XML. Simple, yet effective.

Pinterest-functionality was also added, so when you pause a movie, each garment in that scene is dynamically loaded into hidden containers and available to the Pinterest image-scraper when clicking the “pin-it”-bookmarklet. The high-res frame is also available as a regular, but dynamically changed pinterest-button up in the right corner. Every frame and product the user explores ends up in the grid in the end.

People posting content on pinterest.com from the site

The sound production in The Liberation turned out to be pretty complex just to make it work the way we wanted it to. We wanted a seamless experience throughout so even if you paused the movie it shouldn’t feel like it all just came to a stop. Here’s a write up from Dinahmoe, our sound partner, about the adaptive sound and how we did it.

Partners
Agency: Uncle Grey
Director: Christoffer Von Reis, Camp David
Post production: Stopp
Artist/original music development: Lune
Adaptive music and sound design: Dinahmoe
Back-end development: Agigen

Launch project

]]> http://www.northkingdom.com/blog/behind-the-scenes-only-the-liberation-temp/feed/ 4 http://www.northkingdom.com/blog/behind-the-scenes-vodafone-netguys/ http://www.northkingdom.com/blog/behind-the-scenes-vodafone-netguys/#comments Thu, 01 Mar 2012 08:55:56 +0000 Robert Lindström http://www.northkingdom.com/blog/behind-the-scenes-vodafone-netguys/ Direct link – Vodafone Netguys. The game is based on the concept behind the  Netguys TVC, filmed in London 2011, for the German market. Vodafone's services are visualised and communicated in a fun way by 4 guys that follow you everywhere and makes life easier for you. The 4 guys symbolise the network bars found on most mobile phones to indicate full connection. — The question for us was; what should we do? And how? The time was very limited. The client asked for a simple and engaging web-based game and we wanted to push...

Direct link – Vodafone Netguys.

The game is based on the concept behind the  Netguys TVC, filmed in London 2011, for the German market. Vodafone’s services are visualised and communicated in a fun way by 4 guys that follow you everywhere and makes life easier for you. The 4 guys symbolise the network bars found on most mobile phones to indicate full connection.

— The question for us was; what should we do? And how? The time was very limited.

The client asked for a simple and engaging web-based game and we wanted to push the boundaries for that by looking at a 3D solution so we got our inspiration from games like “Canabalt” and “Mirror’s Edge” for iPhones. The image above represent the first day work on the visual, trying to figure out what we will actually will see. We know the game would be in 3D, but we had to get our ideas down on paper.

— Graphic profile

To get a better idea of the games graphic profile we also created a logotype for the game. When the characters cloths had a retro design we wanted to create a logotype with a 8-bit feeling but in a modern twist…

… however, in the end we have to use their own font “Vodafone Rg”.

— Environments

When we created the world, we needed to think of three things: it needed to be dynamic, it needed to be light and it had to be stylish. The solution for the dynamic part was to create the blocks separately, as you can see on the image above. When we had to think about the compression we couldn’t use to much textures, therefore we come to use very simple pattern on buildings which gave a very stylish feeling, which we liked very much.

Final environments.

— Programing

The game is dynamic 3d game utilizing the hardware acceleration introduced in Adobe Flash 11. Here below can you see some WIP testes done during the first weeks;

The very first “ugly”-versions to test the game play:
http://demo.northkingdom.com/vodafonenetguys/dev/gameplay_prototype/
http://demo.northkingdom.com/vodafonenetguys/dev/gameplay_prototype2/

Animationtest:
http://demo.northkingdom.com/vodafonenetguys/dev/anim/

Blocks test:
http://demo.northkingdom.com/vodafonenetguys/dev/blocks/
http://demo.northkingdom.com/vodafonenetguys/dev/blocks2/

Game:
http://demo.northkingdom.com/vodafonenetguys/dev/game3/ (First playable version)
http://demo.northkingdom.com/vodafonenetguys/dev/game5/ (Halfway version)

— Characters

The characters we developed was of course based on the real characters from the TVC. We had to create two version of them; one set for the game and one set for the intro movie.

Read more about the project here.

]]>

“Waldner” – the next generation ping pong table, is made with an advanced computer system integration. The table has a multi-touch surface, which responds to human touch and real world objects, like ping-pong balls. The table is also equipped with Siri voice recognition that monitors the game along with a Mac Pro 12-core computer. That means the table is very intelligent; it sees, feels and hears the game. You can even discuss a ball with it to improve your ping pong skills or argue about a point.

“Waldner” is a product concept made by Design Director Robert Lindström. Read more about the table on his blog.

An AR marker printed on the back of Weetabix will enable kids to fuel their Weetakid character for game play by feeding it a bowl of Weetabix every morning. At a certain point in the game, players are prompted to point their device’s camera at the back of the Weetabix Yellow Box. The game then launches into an augmented reality sequence whereby Weetakid appears.

Download the app and try for yourself here.

Read more about the design process on our Design Director Robert Lindströms blog.

From the left: Robert Lindström co-founder and Design Director, Daniel Ilic Creative Director and Jakob Nylund, Senior Art Director.

Daniel will be judging The Webby Awards and be part of the Cannes Lions Cyber Lions jury. Robert will be judging The D&AD Awards and also sits in the digital jury for our own Swedish award show Guldägget/Golden Egg. Jakob will be judging the really cool Visuelt competition in Norway.

Make sure you keep an eye the winners out there. Our subjective objective opinions might have affected the outcome…

Vodafone wanted to communicate how their services are empowering people in an integrated campaign. The ATL (developed by Jung von Matt) focus on visualizing the possibilities and power of the Vodafone network through four main characters – The Netguys. These Netguys can be seen in TVC, Print, Out of Home and also in an interactive experience.

OUR ROLE

In the interactive channel Vodafone wanted to give their customer a fun, casual and engaging game experience centered around the Netguys characters in the browser. The decision was made to evaluate the all new Adobe Flash 11 platform that allows for creating rich dynamic 3D content in a browser. The ambition in the interactive channel was to further expand the storytelling around the concept of the Netguys. We wanted to highlight some of the actual capabilities of the Vodafone network such as Smartness, Power, Reach & Speed and connect them to each Netguy.

TARGET GROUP

Targeting digital natives, 18-30 years old, it was important to find a new and fresh platform to create interest around the concept but also to prove leadership within digital experiences.

CHALLENGE AND SOLUTION

Our idea to communicate was that Vodafone customers have access to the Network of Tomorrow (im Netz von Morgen) but it is really up to them to make use of all the possibilities with Vodafone as a mobile provider. Therefor the message in the interactive channel became: Bist du fit genug für’s Netz von morgen? The game itself created some challenges, as we wanted to create a casual game with easy interaction mechanics but with a highly developed visual experience. The Adobe Flash 11 platform allowed us to move in this direction and we could create dynamic 3D environments but still keep to a simple yet addictive gameplay. As the technology is not yet very adopted we expect the number of players to be lower than if we would go with a more established technology such as Flash 9 or 10. However to keep up with the fast digital evolution we believe brands constantly need to find new touchpoints with their audience and evaluate new platforms of interacting with them. In this project gamification was the touchpoint and Flash 11 the platform. Check it out here —  Vodafone Netguys (eng)

Working with 3 Dreams of Black was an amazing team effort and a result of true collaboration. So many great minds worked hard together cross borders of both expertise and disciplines; spread across the globe we formed a rare creative joint venture that brought Chris and Aarons wonderful visions to life.

Part of the goal was to move and inspire the creative community. Therefor it feels extra good to receive the FWA PCA 2011.

A big thanks to everyone involved making this happen: Chris, Aaron, Doob, Sandra, Thomas for giving us the opportunity. Special thanks to Branislav, Eskil, Bartek, Micke, Klaus and the rest of the guys involved pushing the limits. Full credits here – each and everyone on that list deserve a shout out for being so dedicated.

Also a huge thanks to all the people who voted.

We are all super happy and amazingly proud.

Read more about the project here and about the award at The FWA here.

Earlier this year we got the honor to design four FWA awards certificates. FWA has also a Mobile Of The Day (MOTD) award which we now have designed and delivered to FWA.

(Vodafone BufferBusters is our first MOTD by the way.)

Test prints on the earlier certificates; SOTM (Site Of the Month, SOTY (Sity Of The Year), PC (People’s Choice) and SOTD (Site Of The Day). FWA have a gallery on their website where people can upload and show their awards.

The famous FWA digital award ribbons are vectorized and placed in the lower right corner of the prints.

The basic idea was to make something that would look good on your wall, and even better, if you would have a collection of several certificates. The typeface and the design are taken from the FWA digital award ribbons, which made me start thinking of knitting, which also looks like pixel art in a way. Both knitting and pixel-art is handcrafting, which matched the idea perfect since the winners of FWA awards are filled with both love and care for the craft.

I had the pleasure of holding a lecture + workshop about typography with the IAD students over at Hyper Island Stockholm earlier this week. We talked about the history of type and some basics when it comes to creating a typeface – what to think about, what tools to use and so on. The task they were given in the end was to create a typeface in 24 hours. I’ve included some of the creations in this post, but make sure to look at them all at http://hypertypography.tumblr.com/!

North Kingdom is very involved in the eduction over at Hyper Island. We love to share our knowledge and help the next generation of creatives. Our creative director Daniel Ilic helps Hyper Island to tailor each years educational programme and earlier this month our IA Alfredo Aponte held a lecture about interactive interfaces and how animation can be used to create a better experience. (the presentation can be seen a bit further down on this blog.) Robert Linström, our Senior Art Director and co-founder, did an inspirational talk about the work we do and how we do it. In January our technical director Daniel Isaksson will do a talk and hold a workshop about technology. Apart from lectures we are also mentoring the students. We meet up with them in smaller groups discussing the work they are doing and giving them feedback and how they should move on.

You can read more about Hyper Island here, http://www.hyperisland.com/

Niklaz Lönnqvist- Pumps and skinny jeans

Feeling Horny Alphabet

Luis Carlos Marques

Reidun Solvik

Antonio Ceballos

Sara Frank

Pauline Säll