We, here at The Uprising Creative, feel very fortunate and grateful to have such an amazing client base to work with. Clients who trust us to take them into new territory in design and/or web technology and create some very cool experiences. Red Bull Records is one of those amazingly progressive clients who is always open to trying new things, whether it’s glow-in-the-dark packaging elements on album covers like AWOLNATION’s latest release, or experimental, HTML5/CSS3/JavaScript-based API hacks like the one we’ve just launched for Twin Atlantic
The Twin Atlantic project is called the “Twinstagram Photo Mosaic Project” (Check it out HERE) and it was developed with HTML5, CSS3, JavaScript, PHP, and MySQL, as well as a solid batch of API hacks, tying together Soundcloud, Vimeo, Instagram, Topspin, awe.sm, Chartbeat, Google Analytics, the Facebook Open Graph, Google+, and Twitter. Big thanks to all of the involved API teams for the support and flexibility on this project, and big thanks to Media Temple for all of the hosting love.
So into the dirt.. how this project came together and what we’ve done here…
The idea for this one germinated pretty organically, starting from a simple idea. We wanted to give fans some exclusive audio and video content for the holidays. Simple enough. But realistically, we didn’t want to just give it away. We wanted fans to get involved with the content, and with each other. To have fun with it, be a part of it, to see what other fans are seeing at the same time, and to collectively work together to access the content.
So we started thinking about ways to engage the fans that was natural and interesting – more personal and communal than just using Facebook Likes or Twitter Follows to unlock content in a generic digital marketing campaign. We didn’t want this to be just another ploy to get Facebook Likes or Twitter Followers because realistically, they’re hollow if you haven’t provided some kind of tangible experience that has an actual impact on someone’s day. It’s the equivalent of pushing a button on an elevator to go to the next floor – not very inspiring.
The band loves Instagram, and so do we. Its ability to capture a moment in time and space that feels both surreal and honest, and to broadcast it to the world instantly, is infinitely more enthralling than clicking a button or reading text. And thanks to their API, we have the ability to pull a thread from that stream of consciousness and use it in a very targeted way.
So, the idea was born: Fans can unlock the Soundcloud-powered audio and Vimeo-powered video content by sharing Instagram photos tagged with a specific hashtag. It makes it an interactive experience for fans, and allows them to work together to unlock the content. Fans can view the world through the eyes of everyone else alongside them while also allowing them to share that experience with their friends. When you think about it, that’s a pretty powerful concept.
So we set out on this path, using the Soundcloud API to supply locked audio downloads and streams, and the Vimeo API to supply the private video streams. We locked these behind an access wall that requires a certain number of Instagram photos to be shared to unlock them. This process happens in real-time, every time an Instagram photo is shared, using HTML5, CSS3 transitions and animations, and a bit of JavaScript (jQuery & AJAX primarily) to create an ever-expanding gallery of fan photos that is simultaneously unlocking the content. There’s even a custom CMS to allow the band’s management to keep track of the number of photos shared and deal with the inevitable inappropriate image.
But after developing that concept, we wanted to do more with it. Opening up the door to the collective sharing of photos made us really want to do something bigger with the photos themselves. Something to allow the fans to actually contribute to a larger creative process. So the decision was made to pull this stream of photos into a photo mosaic that would create one pieces of art from the band’s latest album package. Not only would the fan photos unlock the content, but they would also become an integral component of a larger piece of art.
Coming from a print design background, it made sense to us to have this photo mosaic created as a limited edition lithographed poster that can be pre-ordered directly from the site. But realistically, that doesn’t have that much of an impact on the web during the actual creation process, so we wanted to offer fans the ability to actually see the poster being constructed in real-time.
We’d seen a few basic PHP and JavaScript-based experiments used to create a photo mosaic on-the-fly, but everything was pretty clunky. We really weren’t sure if it could be done in a way without Flash that would seem fast enough and organic enough to be compelling, but we set out to write a web app that would attempt it. Half way through, we realized that it would actually be possible to pull the photos that were being shared into the photo mosaic in real-time, literally creating the photo mosaic dynamically on the web by pulling photos into it the moment they were shared.
What came out of this process is something we’re really proud of. A lot of work went into it, despite its clean, simple appearance, and we hope it inspires people to think bigger with their digital marketing campaigns. It’s all about building blocks and we all inspire each other by sharing our work and process. Thanks to everyone who continues to inspire us on a daily basis.
Jeff – @jeff_uprising
