Working on this from conception and pitch, to refinement and final output. I was interactive art director of the experience. Shaping the overall look of the site as well as defining the game mechanic and user experience for both the frisbee game and dog bomb video generator. This was a large project involving motion graphics both in-house and 3rd party, css animations, web sockets, and video generation as well as modern responsive site design & build.
The mission for this site was to push beyond what had been done before by others. Other had done browser specific illustration based dual screen experiences. We wanted to create a browser agnostic html5 video based game.
Key things i pushed through on this was to make sure it was modern and fresh and overcome what might have been easier to have done in flash.
Creative lead, Art + Design and Interaction Direction, Pitch design, Initial design, final design (mostly mobile experience), game mechanic UX, prototype animations and animatics
Creative Director – Jim C
Art Direction /Interaction & Design Direction – Jonny Goodall
Mobile Design – Jonny Goodall
Creatives / Script writing – Josh D & Steve D
IA – Chris H
Design & Illustration – Nick F
Motion Design – Tom W
Tech lead – Kieran A
Front end – Rich H
Back end – Dan S
Producer – Steve D
Voice – Julian B
Sound – Factory
3D animation – MPC
IAB digital showcase – 3rd place – September 2013
Campaign magazine – Campaign of the year 2013
FWA – Site of Day – December 25th 2013
Awwwards – honrable mention – December 11th 2013
I also directed the 3rd party animation team at MPC on the cat animations, making sure they were correct for the site, and still visually engaging and varied. This included a full video shoot of a real sofa as well as the 3D modelling and animation of a cat. We used a demo cat initially and this worked as a way to make sure we got exactly what we wanted.
The development of the site ran in parallel to the intensive 3D video production. I was very very keen to not let this stop us in any way in our progress and experimentation.
The key challenges were in the dual screen frisbee game, not only in the user experience of it but in how we make it feel fluid and immersive on a technical/performance level.
We needed to experiment with numerous video techniques to make sure this video site felt seamless, and do this I create a test video asset for the team to work with that – although not visually perfect in anyway – it got across the essentials that needed to work regardless of what “character” we used… This included dynamic scalable backgrounds, and the sequences we need to trigger via the web sockets connection to the length of video and compression requirements to use of dynamic sound and how the carousel worked.
I also had the privilege direct Julian Barret of Mighty Boosh fame, who was the voice of the cat in the TVC and on the site. I also directed the general sound design for the UI element.
One other key challenge was making sure there was still a rich experience for mobile users who go to the site without a desktop/laptop near by too.
Adaptive and specific version of the various areas of the site were made to cater for this and create a full 360 looped user experience.
* Flat, full browser, scalable, multi-device aware, responsive design
* Minimal interface
* Dual screen experience
* Gesture based interactions
* WebSockets allow a single, long-held TCP connection between a client and a server, which enabled a real-time experience between the user’s phone/tablet and their desktop.
* We used socket.io to handle cross browser compatibilities, which allowed browsers that don’t support WebSockets (such as the Android Browser) to use the site
* HTML5 media
* Using HTML5 video, we were able to create a rich environment for the user to interact with. HTML5 audio was another layer to this experience
* We used a “video spriting” technique, which allowed us to seamlessly loop and play animations for the frisbee game.
* We used mediaelement.js to provide a Flash fallback for older browsers
* Numerous animations and transitions were built with CSS3, which have the potential to be hardware accelerated.
After such a great response to Being More Dog in 2014 we asked the nation to test how much they believed it