Thanks 4 Birthday

A combination project here. There were two separate deliverables; a personalised responsive email and a personalised responsive landing page.

View Project

This was quite a challenging project, not so much due to technical difficulty but understanding user entry points, communicating cross platform restrictions, re-designing a responsive newsletter and all in the middle of Channel 4's rebrand of 4oD to All 4.

The brief from the VRM (Viewer Retention Management) team at Channel 4 to 4Creative (the creative department at Channel 4) was originally to come up with a way using the email database which would encourage user reactivation following a report showing that out of approximately 12 million Channel 4 registered users, less than 5 million were active.

4Creative wanted to send a personalised video to every user in the system on their birthday using chopped up Channel 4 content that sang the song "Happy Birthday". It was originally imagined that the "custom" part would be a video snippet of that person's name in a video. Aside from the difficulties surrounding finding footage for a lot of names, having this "custom" element part of the video would have required a lot of server side video preparation and after establishing an approximate budget it was soon deemed to be out of the question.

So, what to do next?

Well, first was the email. Channel 4 were already personalising their email newsletters with the standard "Hi (name)" so we just needed a method of concatenating the users name to the end of a URL. This meant that if a user clicked the link from the email we could navigate to a URL and carry along with it their name.

In Adobe campaign that looks a little like this.
<%targetdata.url%>/<%targetdata.firstname%>

Which translates to something like this.
http://thanks4.channel4.com/birthday/?name=Paulie

So, in short it's a query URL.

alt

We had discussed having a video on the landing page with an HTML element over the top that would appear at a given playback point in the video. This would have been possible by adding playback event listeners to the video and then triggering visibility of said DOM element at a given point, but, this isn't cross platform.

On Desktop this would have worked but on some devices where videos are forced to play full screen they would leave the DOM element behind and thus the "custom" part of the video would never be seen.

And so really the only option was to leave the video alone. It would just be a video and whether played on desktop, tablet or mobile it would just sing the user happy birthday.

The customisation came in the form of an unrelated HTML element, a graphical bunting which displayed the message "Happy Birthday ". This was responsive as was the page and needed to display correctly for a range of name lengths, the minimum 3 the maximum 12.

alt

If a name were any less than 3 or any more than 12 characters in length the message defaults to "Happy Birthday to you".

The page, "onload" also checks the "name" value against a profanity list provided by Channel 4.

Beneath the bunting was a wrapped up present. This starts to make more sense when you see the graphic in the email. Again, a wrapped up present with the "open me" call to action enticing users to click through from the email.

The present on the landing page begins to un wrap and reveals the video...Voila!

However, the animation of the present wasn't without complication.

We couldn't use a "video" for the animation as we'd be up against all the same issues as above; forced full screen, won't auto play etc, so it was decided we use a .png sequence with transparency. There are 3 different .png sequences each of different file weights and using media queries we can determine which one to load. It's important we don't attempt to load a 4mb .png sequence for users on device. Again, this .png sequence needed to be responsive.

The playback method of the .png sequence utilises a method from superTween.js which we named a "superLoop"

A superLoop is a superTween command that incrementally jumps a sprite sheet a set distance creating the illusion of motion.

On the left is overflow hidden and on the right is overflow visible.

alt

The superTween setup can look a bit like this:

superTween.superLoop( elem:HTMLElement, //html element containing image as bg image loops:Number, //number of loops or 'infinite' { numSteps:Number, //how many frames are in the loop stepSize:Number, //frame height (in px) interval:Number, //time between jumps (in ms, typically 70-120) direction:String, //(PROTOTYPE) whether to scroll image up/down or left/right });

Should the users wish to share the URL, the landing page is openGraph enabled.

alt

Since it's launch in November 2015 Channel 4 have sent the email to approximately five thousand users a day and are reporting a 27% open rate.