rehabstudio – An obligatory blog
- Wonderland
- 77 East Road
- London N1 6AH
- +44 (0) 20 3384 5210
- Beau Monde
- Unit 12, 8 Cromac Avenue
- Belfast BT7 2JA
- +44 (0) 28 9050 1910
WIP+
As some of you might know we are one of a handful agencies who’s been invited by Google to take part in a two week hackathon to work up some cool stuff for their Google+ hangouts project -Really exciting stuff!!
For those of you who don’t know what we are talking about, here’a s a link to Google’s official blog where they released the news about their latest API end of last week.
This API has a bunch of new features and possibilities to build upon, the ability to respond to facial movements in real-time inside an app for example, and new sendMessage functionality that we’re trying out as we speak.
On that note; We are’re working on a table Foosball game, a game that will take advantage of as many funky features of this new API as possible, you can follow our work in close on our rehabstudio Google+ hangout .
What exactly is an API you may ask? In short, its the interface where development and new code is written. Simple!
Our Fossball game is WIP - Its going well, we’re well excited and … well, we have until 29th May, then we will send our work to Google for a final review, followed by launch 1st June.
This is where its AT rehabstudio G+ hangout page, come hang out!
Laters, rehabstudio
x
Ps. Here’s some more information about this API thing we keep going on about.
How we did it: The Formers
Lines and lines of code excitement across the studio today about the launch of our latest YouTube channel, The Formers, for Google Ideas.
In a tech first, our Belfast development crew have re-created the YouTube channel experience in full – which will be a first for iPad and tablet users once rolled out. The rich layered animation transition and navigation experience has been designed to be fully accessible through a mobile browser (rather than through a dedicated iOS App.)
The Formers is our first partnership production with the Google’s new think/do tank Google Ideas. The project is designed to provoke a global conversation about radicalism by bringing together an eclectic mix of former-extremists, their victims and counter-terrorism specialists. These ‘Formers’ and their survivors both tell their stories on the channel, letting consumers interact with both sides, sharing their views and experiences. The idea being to turn a complex social issue into a positive movement.
A YT iPad first
The YouTube channel is an HTML5 + Javascript-based app. We decided to make it plugin-free to showcase our work with the latest web technologies and standards. It uses CSS3 to provide smooth, hardware-accelerated effects, and makes use of recent innovative Javascript libraries (Modernizr.js and innershiv.js in particular) to ensure backwards compatibility/graceful degradation in older browsers. We also used embedded web fonts to make our typography rich and in keeping with the design, whilst staying accessible and searchable.
The content of the app is presented on a number of parallax ‘layers’ moving at different speeds when scrolling to provide a sense of depth. We chose this style because of the really strong white diagonal in the design. The parallax code itself was custom-written, using hardware-accelerated CSS3 transitions to smooth out the effect on modern browsers, falling back to a Javascript-only scroll on platforms that don’t support them. When the app loads, the page flow is dynamically restructured on-the-fly to accommodate the parallax layering.
The content is marked up using new HTML5 tags such as <nav>, <article> and <section> assisting search engines and devices.
Videos are embedded in the app via the YouTube Iframe Embed API, which serves HTML5 <video> content to platforms that support it, future-proofing the app, falling back to a standard YouTube player in other cases. Video content itself is served via integration with the YouTube Data API, which returns JSON-based video feed data on-the-fly in response to user interaction with the app. YouTube tagging is used to organize the video content according to extremism type and Former name. We used jQuery transitions in the video pages, and throughout the app, to provide a high-class experience.
The channel app also incorporates Google Moderator functionality to provide a means of feedback and discussion between channel users and The Formers themselves. We also included basic support for touch devices and hotkeys/tabbing navigation, to ensure a friendly and full-featured experience across the widest possible range of platforms.
The entire app will be deployed via Google’s own App Engine platform to ensure scalability and the tightest possible integration with Google support.
Check the channel out here.
The YouTube channel is the main consumer site for The Formers project, launched in conjunction with the Summit Against Violent Extremism in Dublin. Jurgen – our main man in Belfast – was there:
“The Formers project is a real game changer, at the summit we got to meet and discuss the channel with Formers and Survivors which really brought the importance of this project home. Working with Google products is always a delight, it’s our first HTML5 YouTube channel and we had real fun refining the interactions for touch devices. Looking forward to watching this project grow.”
The YouTube channel is soon to be followed by a ground-breaking relationships platform created by us and powered by Google’s latest social tech design solutions. Which will transform the collaborative power of like-minded activists, individuals and experts on an international level.
More on that to come.
Fancy starring in The Vaccines new music vid?
We love a good old API mash-up.
*DRUM ROLL*
We are announcing the launch of The Vaccines new site, created for Anomaly, which is also the world’s first Instagr.am crowd-sourcing video.
Fans who want the chance to have their favourite festival snaps immortalised in the band’s latest music video can upload their Instagr.am photos along with the tag #vaccinesvideo.
All images tagged correctly get displayed on http://www.vaccinesvideo.com and the best of the bunch will get animated into the video for the band’s new single “Wetsuit”.
We’ve been massive fans of Instagr.am since the start, so we’re stoked to be part of the first ever Instagr.am video mash up. Can’t wait to see the final video!
How We Did It
API Mash-Up
We used Instagr.am API to trawl for images tagged with #vaccinesvideo. Our server is then setup to search and find the latest photos every couple of minutes – we then grab the images for use in our campaign.
For those who love a bit of tech
Jurgen (our Tech Partner) says the system uses MongoDB, a document oriented database, to store the data collected.The front end is using jQuery for effects and jQuery Address plugin for deep linking and infinite scrolling plugin. The backend is running on Nginx, PHP-FPM and Memcached – all tuned to make the site as fast as possible.
Get your 15 seconds of fame
Check out the film the band have uploaded showing how to get involved: http://bit.ly/thevacc
Pics can be just of you or a bunch of mates, or stage shots. Or anything which shouts Festival!
http://www.vaccinesvideo.com/#
How we made it: Google AdWords 10th anniversary
Q: How do you thank your customers for 10 years of support?
A: Well if you’re Google then you’re gonna want to send them all a unique personalised thank-you video with the name of the company projected on the moon, and spelt from 10Mil Dominos & robotic bees…
And here’s how we did it!
——–
Creative
We choose a hand-made cut and paste style for the channel – photographing all of the interface and graphical elements in the studio before manipulating them in Photoshop.
For the first phase of the campaign we asked the Google AdWords community to participate by uploading their own personal AdWords success stories to the YouTube channel.
We worked with AKQA on the phase 2 which contained the personalised video. They created a challenging shot-list – so we immediately started to work on a bunch of prototypes to see how far we could push the tech. We’d done video personalisation before and this time we owned it!
Here’s one of the earlier tests that we put together, we had to produce the channel in 47 languages so we had to create a text parsing system to generate the company name dynamically over the top of the video.
During the course of the development we also worked on a few easter eggs, after all this was a birthday party & everyone loves a surprise on their birthday 
Motion sensitive swarm of bees
Motion sensitive space invaders
Control the crosshair with your head, space bar to shoot!
The campaign launched, sent an email to each of their customers, the email contained a unique URL linking to the channel where users could view their personalised video.
Code visualisation
This is an awesome display of what it takes to actually bring a project to life, check out the video below which shows our developers contributing to the project during its development. The animated tree places the root directory of the project at its centre. Directories appear as branches with files as leaves.
Final result
Click here to see the rehabstudio personalised video!
How we made it: Life in a Day for Google Creative Lab
We were approached by Google Creative Labs in July to come up with some treatments for Life in a Day YouTube channel at the centre of this ground breaking experiment.
Concept
The core of the idea was to record life around the globe on the 24th July – we concentrated on giving users a feel of the scale of the campaign and inviting them to be a part of it.
Early concept scamp:
We wanting users to get a feeling that the campaign was live, we focused our energy on designing a data visualization views that showcased locality, time and emotion.
Filming Day
On filming day we knew there would be a lot of activity on the site, to turn that activity into participation we created a simple tagging system which geo-located each video on the 3D globe, a heat-map view showed which countries were more active at uploading content to the experiment in a bid to encourage users from all corners of the globe.
Filming day homepage:
The rehabstudio campaign platform was utilized to pull in #LIAD tweets, run it through a blacklist filter and display them in the YouTube channel.
Post Filming Day
So, with 85k+ videos uploaded we needed to create a few different ways for users to explore the content on the site.
Hidden Easter egg (Unfortunately this part did’nt go live):
Globe view wireframe:
Globe view finalised:
Using a combination of the YouTube API & Campaign Platform we data mined the content to create the views which was all cached in memory on the Google App engine for performance.
Results
The campaign has been a massive success, huge numbers, breaking all records for YouTube video uploads at 80K+, the actual channel has been viewed over 21 million times…
Big thanks and congratulations to the team at Google, we cant wait to see the final feature in January.
Oh and yea, and today, it’s Site of the day on The FWA !
How we made it: The Impossible Hoop challenge for Fallon London
Take the Nations favorite chocolate bar and the 2012 Olympics, whisk in Fallon London’s Spot’s V Stripes Campaign, Add a hefty dose of rehabstudio super disco magic fairy dust, bake in the oven for 4 weeks and you get, “The Impossible Hoop Challenge”
It all started in May when we were approached by Fallon to create an online game to sit in the Spots V Stripes Hub, Fallon’s brief was to let people throw “something through something”. So we started by brainstorming the game concept how it should work, how to score points, what environments we should place the user.
Game concept
We knew we wanted to make the environment realistic so we started to sketch up the scenes to see how they’d all fit together.
Early scamp for beach level:
After playing with this concept for a bit we decided to change it… and moved onto a slide on view of the game.
Design
The direction from Fallon was quite photo realistic with a quirky twist, we worked hard with the development of the game graphics to create our 3 levels, Street, Park & Beach. We used matte painters to create the scenes from our sketches.
Development of game concept/ sketch:
Development of the in-game objects:
Initial Art direction:
Finalised Art direction:
Game engine
In terms of the playability and games engine we wanted to create a game that takes seconds to learn and a lifetime to master! With that in mind we started to produce game environment prototypes based on our sketches which worked really well. We then decided to allow users to move the objects in the room so that they could setup some awesome shots. Check out one of our first demos;
Game-engine Demo: (Click n’ drag the catapult to throw)
Social share mechanic
We were keen on make the game work harder, we knew there was going to be a big push across the standard media channels but because of the random nature of the game we knew that players would be setting up some gnarly impossible throws, so we decided to give them a social media share function which allowed them to share the last shot they tool and post it to their Twitter feed or Facebook wall.
Check out an action-replay here
Results
The site’s been an awesome hit – so much in fact that we assumed something wasn’t quite right with the leader-board as we’d racked up lots of plays and points on the first weekend, turned out we had already created a massive following of people playing it 24/7..
So far have racked up an impressive 300k + plays of the game in the first month and it’s crazy to think that at time of writing this the Spots / Stripes teams are within 1,800 points of each other!
And we’re now shortlisted on the FWA, nice.
So come go on, join a side and play the game here!
—-
UPDATE – Ha ha! The game is now FWA Site of the day 31st August 2010