Intimacy Doesn’t Scale

Yukimi

For years artists have been using the Internet as a channel of communication to talk to their fans. We send out newsletters via email and keep our fans informed of our every move on Twitter and Facebook. We perform live stream concerts, publish videos directed at fans, and attempt to personalize these experiences by employing location based marketing techniques. However, we struggle with noise of the web and the dullness of a one-to-many relationship.

Our real world fan relationships are similar. When a band first starts out, they likely know all their fans on a first name basis because they are friends and family. As the band grows, they lose this personal touch and begin to market themselves in a one-to-many sense. This is apparent at a live show which sees the band performing for a smaller subset of fans, but even here you’ll see an artist attempting to personalize the experience by referencing the name of the city they’re in. The idea being that this personalized message will add another layer of value to the show’s temporary relationship.

When your artist reaches a certain size you can’t reply to every tweet you receive in the same way you can’t personally thank every fan that comes to your show. Intimacy just doesn’t scale…

Or does it?

I had a theory.

Could we break the impersonal barrier of the web by integrating telephony? The cellphone has become a personal extension of us. We take it everywhere, personalize it to suit our needs, and actually listen when someone talks to us on it. So, why not get the artist to call everyone?

Pulling this off at scale requires a little technology and a lot of smoke and mirrors, but it all starts with a band and their content. That band for me was Little Dragon and the content was their amazing new single Klapp Klapp from their upcoming release Nabuma Rubberband.

 Content

After signing off on the proposal, Little Dragon set up a tripod in their home studio and recorded four very personal scenes. Yukimi is lovable, Erik looks nervous, Hakan was funny, and Freddie bleeds cool when setting up the final scene. They sent these over to me uncut which included them dying from laughter at the end of each shot. You could tell they were having fun with it.

I don’t think I’ve ever rocked the Adobe Creative Cloud so hard as I did on this project. I edited down each scene and extracted the call audio using Premiere. That audio was then cleaned up in Audition to maximize the quality needed for call playback. After Effects was used to add the official video clip into the chalkboard television in Erik’s scene using a mask. Photoshop and Illustrator were running constantly for site and logo design.

Once all the content was prepared, we were ready to program. I would end up pulling a lot of the understanding gathered from recent telephony hacks with Queens of the Stone Age and Trivium. The main key being that this would consist of a synergy between Twilio and Pusher.

 Calling

Yukimi enters the scene via an autoplaying HTML5 video and sits down to read a book. Once a certain currentTime is reached the video is paused and the user is prompted to enter their phone number.

if video.currentTime >= 17.00
  video.pause()
  showIntro()

Once the user submits their telephone number, it is sent to the server to be sanitized by the excellent Phone Lib library powered by Google’s phone number handling library.

p = Phonelib.parse(number)

if p.valid?
  p.sanitized
else
  status 404
end

If valid, the client receives the sanitized phone number which is stored locally using store.js for referencing later.

store.set('number', number)

The scene then continues to play until another currentTime is reached (after Yukimi has dialed your number.) We’ll pause again and send a call request to our server using Ajax.

else if video.currentTime >= 50.10
  video.pause()
  callUser()

From here the server uses the Phone Lib gem again to route your call to the appropriate international phone number by deciphering which country your number is associated with and referencing the 19 numbers we purchased on Twilio. We did this not only to lower our phone bills but also to maximize the likelihood of someone answering, as users are more likely to pick up a local call vs. an international one.

to   = Phonelib.parse(number)
from = Numbers.detect {|n| n[:country] == p.country }

We then use the Twilio ruby gem to initiate the call between Little Dragon and our user.

call = twilio.account.calls.create(
  from: from,
  to: to,
  url: "/call/yukimi",
  if_machine: 'Hangup'
)

This call is routed to another path on our server which simply plays back the appropriate audio file for each of our scenes.

Twilio::TwiML::Response.new do |r|
  r.Play "/sounds/yukimi.wav"
end

 Syncing

At the exact same moment the call is started, we send a Pusher event back to our client which contains the user’s number.

Pusher['klappklapp'].trigger('calls', {
  number: params["Called"],
  epoch: (Time.now.to_f * 1000).to_i
})

The client receives this event in less than 5ms and compares it to the locally stored number. If these match up, the video begins playing again. While I didn’t add it to the final version, I did work out comparing the epoch time of the server and client to estimate lag and adjust the video’s currentTime accordingly.

channel.bind 'calls', (data) ->
  if data.number is store.get('number')

    # now = new Date().getTime()
    # lag = (now - data.epoch) / 1000
    # video.currentTime = video.currentTime + lag

    video.play()

Syncing the call and client will never be perfect given all the factors involved like internet connection and cell reception, but it gets shockingly close and is a testament to the speed of these cloud services.

 Reception

In only five days Little Dragon has made over 19,000 calls to over 20 countries around the world. All while in the middle of one of the busiest press junkets of their career. ;-) Writeups have begun trickling in from both music publications like Rolling Stone and tech editorials like Wired as the campaign makes the rounds.

Did we scale intimacy? I guess that’s up for you to decide. However, if for some reason a user made it all the way to the end of the experience, I have no doubt that they left a fan.

As always, thanks for listening. If you have any questions or comments, please don’t hesitate to ask on Twitter or Email.

 
142
Kudos
 
142
Kudos

Now read this

The Keywork Clock

It’s been less than two weeks since I resurrected myself as a freelancer, and I’ve been busy building faders, re-envisioning old apps, taking some calls, and writing a library of proposals. One of the first projects I signed on to help... Continue →