The Concept Being The Gift of Giving

Created for the forthcoming Christmas season, the campaign highlights interactivity and integrates engaging and entertaining online content with commerce, thus giving the consumer an immersive digital experience. With the campaign, Georg Jensen becomes the first Scandinavian design brand to activate the users smartphone as a true second screen experience.

This allows consumers to experience the campaign on two screens at the same time and offers the possibility of adding products to a wish list on one screen without interrupting the storyline of the video on the other.

Campaign website: giving.georgjensen.com

Wish list: wishlist.georgjensen.com

But It Is Just a Video

Well, no. The combination of video, sound effects and html interaction is not new to the web, but doing it as a smooth user experience can be tricky. In this site we are using a 3 minute and 23 second long HD video, multiple sound effects and allowing the user to play, pause and jump seamlessly between scenes without having to re-load anything.

Creating Smooth UX

We wanted to give our visitors the best visual and interactive experience across multiple platforms - but of course at the same time, keeping the file sizes to a minimum. To accomplish this, we used SVGs where possible. By using vector based graphics, we are able to ensure a high level of control and clarity, across different applications and viewport sizes.

Apart from the logotype animation in the welcome sequence, the biggest use of a SVGs can be seen in what we like to call the 'gift selector' - a step our visitors come across three times in the course of the main video. Here we have taken full advantage of the potential of SVGs - together with touch/mouse detection, we are able to animate paths, masks, gradient fills, and image transformations, giving our visitors a unique experience.

Using Socket.io

We had an idea to let the user interact with the campaign from their smartphone. Socket.io was chosen to take care of the communication between the users desktop/tablet and smartphone. We deployed a node-server to Amazon, which take cares of communication between smartphone and desktop clients.

When the users reach a product within the video it will be pushed to the smartphone and displayed on the users screen. The main attraction is the interactive part of the solution, where the user is inspired to select what gift to give to their counterpart. With the help of socket.io we're able to communicate the movement of the slider on both screens in realtime as the interactions happen on either the desktop/tablet or smartphone.

23 Video Was The Right Choice

The video is hosted at 23 Video, who offers video hosted on 7 different content delivery network (CDN) around the world making us able to stream to users around the world with the minimum server delay (load time for the video is lower than one second). Furthermore they have a thing called "Actions", http://www.23video.com/actions/, we use them to allow content editors to add products to the experience that are shown within specific frames.

We integrated these actions to trigger when the interactive 'gift-selectors' should be shown, activate sound bites on animations, show the products in scene and as anchors, making us able to perform jumps within the video.

Precision was key in timing when to trigger animations during the experience, but unfortunately 23 Video wasn't able to provide the precision our content editor needed - so by request they improved their product and are now offering precision down to milliseconds (pretty awesome, thank you Kalle Kabell and Steffen Fagerstro�m Christensen).

Backend Considerations

Due to the highly relational nature of giving and receiving wish lists, we decided on using a Graph database, specifically Neo4j. This gave us an advantage in that arbitrary relations could be mapped out without much difficulty as the project progressed.

Docker, Elastic beanstalk and node.js are the backbone of many Umwelt projects these days. Docker makes it trivial to deploy servers and helps us keep environmental difference between our ci/buildserver and the host server to a minimum. Elastic beanstalk helps us scale to meet demand.

Node.js is quickly becoming industry standard these days due to its non-blocking i/o model and huge ecosystem. Express was used for routing and its middleware – Passport.js being a good example of this.

Tape was picked as our testing harness for its simplicity.

Ruxit was added in order to get deep monitoring of the servers. Ruxit is very useful as it is easy to setup, integrates nicely with our other tools and gives us a nice overview of all the individual services and how they interact.

Winston was implemented to give us more control over logging. Not only can Winston log locally or to a file, but we can push the logs real time to papertrailapp, giving us a better understanding of on going events.

TL;DR

• - Build on Angular
• - 23 video playback
• - SVGs are so, so nice!

Database

Neo4j graph database hosted on an aws ec2 instance behind a load balancer.

Server

Dockerised Node.js server running on ec2 instances managed by aws elastic beanstalk. Serving a restful api via Express.js with Passport.js middleware to handle authorization.

Unit tests in Tape. Winston & Papertrail for logging and Ruxit for monitoring.

Credits

• Agency: Umwelt - Copenhagen, Denmark
• Production: B-Reel - Stockholm, Sweden
• Creative Direction: Neal Drasbeck / Lise Stubkjær / Emil Asmussen
• Client Service & Concept Development: Martin Michael Hansen / Charlotte Riis-Cordsen / Lucinda Enevold Herforth
• Technical Direction: Ralf Sohl / Esben Sohl
• Development: Kasper Worm Andersson / Sanne Didriksen / Joshua D.P. Nielsen /Christian Werther
• Director: Magnus Härdner
• Producer: Lina Ehrenpreis
• Line Producer: Leila Falkenberg
• Executive Producer: Rikard Åström
• DOP: Hannes Isaksson
• Editor: Nils Andersson
• Composer: Daniel Björkman
• Distribution: Be On - AOL Platforms

Click here to visit the site »

Written by: Esben Sohl - a Senior Product Strategist & Associate Partner at Umwelt.