Happy New Year from us and Skype

It's now week two of 2011 and we're all getting back in the swing of things after a very busy break. Busy, because in addition to overindulging in mince pies, arguing bonding with family members and unwrapping gifts, we were also working – right through until 3 January – on a project for Skype.

On 30 December 2010, Skype announced a new product: Skype for iPhone with free video calling over 3G and WiFi. To celebrate the app's launch and the massive opportunities it offers all iPhone users, Skype asked Made by Many to conceive and execute a global digital campaign.

A huge achievement for Skype

Video calling has been on the agenda for a lot of companies for a long time. Orange tried and failed to bring out a videophone in 2000; Apple nudged at it with FaceTime but the service isn't available on the iPhone 3GS or over 3G.

Not only does Skype for iPhone work on the 3GS and the 4th generation iPod Touch, but you can also receive video on the iPad. What's more, it works across WiFi *and* 3G. Best of all and unlike FaceTime, both callers don't have to be on iPhones: anyone using Skype on their Mac or PC can video call their iPhone friends.

More than just a technical achievement, free video calling from a mobile is also a cultural watershed.

This was total science fiction 20, even 10 years ago. 

Remember the eighties? Those brick-like Gordon Gekko mobiles and the incredulity of hearing and talking to someone from a cord-free phone? What an absolute headspin that now, in the same lifetime, we can call our parents (who grew up with black-and-white TVs and telegrams) from a kayak in the middle of a harbour and show them the sunset... as it happens... for free.

We're pretty excited about this app's potential in terms of social impact.

The idea

Skype is about shared experiences – people sharing the moments that matter to them, sometimes from opposite sides of the earth. By making video calling mobile, this app makes it possible to share moments you couldn't have shared before. This was our starting point: the magic of feeling like you're right there, in that moment.

Skype has a wonderful, playful banter with its user community, and its user community is massive and engaged. So we gave these people something to puzzle over and play with, in the form of a teaser site, videos, tweets and Facebook messages.

How it works

We built the teaser site around the idea of moments you wish you could have shared. This site showcased an array of videos that each captured a moment someone wanted to share: a toddler's first brush with snow; a horseback ride in Maui; the view from stage at an epic concert. 

Once the app was available on the 30th, these moments became shareable. We celebrated that by adding a lovely product video that shows how shareable life can be with free video calling. The teaser site's headline transitioned to reflect what the product means for users, and the video's caption spelled it out even further.

The biggest bit, though, was still a day away...

On 31 December at noon GMT, we rolled out the most exciting (and, er, most challenging) aspect of the project: a global celebration of the New Year that rolls out time zone by time zone and features  hundreds of videos of what New Year's Eve is like around the world.

Technical highlights

The main story was our ability to write a lot of code in a short space of time. It was a matter of using the right tools for the job: Agile, Rails and Amazon.

From the front-end point of view, we started out with the idea that we wanted to use native web technologies such as HTML 5, JavaScript and CSS instead of flash so that the experience would work on the iPhone and iPad.

On the teaser site, we used feature detection to assess whether users needed to be served HTML5 or the flash video fallback. The site launched with eight videos but we added more as time went by. 

As the project evolved, it became clear that we needed to produce separate versions forsmartphones. The iPhone versions of the sites feature CSS3 transitions in order to make the animations as smooth as possible. We used touch events to allow the user to swipe through the panels, and the HTML5 video worked like a charm (frantic, last-minute re-encoding issues  aside).  

Design highlights

As this whole project was happening around an iPhone launch, it pretty much went without saying that both sites had to look really beautiful in Safari for iPhone. We designed completely different interactions for the iPhone versions that both nodded to the desktop web versions of the sites. 

We used little visual hints to suggest an app-related announcement without stating it outright.

In the teaser site we teased at the idea of an iPhone app by incorporating the dot navigation just under the videos. 

When a user clicks on a time zone, the page opens up to showcase all the videos uploaded from that time zone. Celebrity videos are indicated by a star, and actual New Year's Eve calls from people using the app are indicated by a flying iPhone.

When the user clicks on a thumbnail, the rest slide away so the selected video can play on the page. There's also sharing functionality to post individual videos to Twitter and Facebook.

Happy New Year indeed

This was a huge project: lots of people, lots of agencies, lots of ideas and *lots* to do. Because of the rigid deadlines (you can't really move New Year's Eve), it was also a bit more tense than many of the things we've done in the past. Factor in the project's global reach and the fact that most team members literally took this home for Christmas (to Wales, Ireland, Canada and beyond) and the enormity of the challenge becomes clear.

But last week, in the project retrospective, all of those involved agreed: we loved every minute of it.