Insights... The Gift of Giving, Site of the Day, 2nd January 2016
What did you want to accomplish with the site?
Our client Georg Jensen wanted to increase their focus on their global and digital presence. The brief was simple; Capture the users interest, Initiate sales and be award winning.
With a brand history that spans more than 100 years, the Georg Jensen brand represents quality craftsmanship and timeless aesthetic design, producing lifestyle products ranging from handmade silver hollowware to watches, jewellery and home products.
We needed to be beautiful and exaggerate and dramatize the moment of gift-giving by providing the user with the possibility of choosing the perfect gift for three different characters in a dramatic and engaging interactive storyline.
Created for the 2015 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 became the first Scandinavian design brand to activate the users with smartphone as a 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.
What technical challenges did you encounter and how did you solve them?
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.
We wanted 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 highlighted 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 prompted to select what gift to give to their counterpart. With the help of socket.io we are able to relay the movement of the slider on both screens in realtime as the interactions happen on either the desktop/tablet or smartphone.
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.
The video is hosted at 23 Video, who offers video hosted on 7 different content delivery networks (CDN) around the world making us able to stream to users worldwide with the minimum server delay (load time for the video is lower than 1000ms). 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 Fagerstrøm Christensen).
Besides handling video, real time user interactions and triggering product placement at a precise time, we needed a system to handle the wish list utility.
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 to keep the 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.
What did winning the FWA award mean to you?
The client, The team, Umwelt is extremely honored. FWA has such strong history in recognising cutting edge work and we’re obviously proud to have it featured amongst other high profile projects. Thank you.
Design: Photoshop and Illustrator.
Prototyping: Invision and Axure.
Development: Sublime, Angular and Socket.io.
Database: Neo4j graph database hosted on an aws ec2 instance behind a load balancer.
Video playback: 23 Video, who offers video streaming on 7 different content delivery network (CDN) around the world abling us to stream high quality video seemlessly.
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.
Three hot facts
1. Interactive video storytelling is a powerful tool. The user spends time with the brand on their own terms, products can be introduced without being intrusive and a true bond between the user and brand can be established. Within the campaign period user spend more than 8000 hours with the brand.
2. Working on a tight deadline requires an agile but hardcore team effort. The client briefed us in early August 2015, we did a couple of idea workshops, started filming and the development of both the campaign and utility mid October and with a little hustlin' we launch as planed the 12th of November 2015.
3. The soundtrack was custom made just a few hours before launch.
Campaign website: http://giving.georgjensen.com
Wish list utility: http://wishlist.georgjensen.com
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 Dideriksen / 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