Image
Top
Navigation

Be More Dog

Embrace technology and stop being so cat

Bemoredog.com offers a rich media, browser agnostic user experience to enjoy the modern web.
We wanted users to embrace modern technology by thinking “more dog”, and being more enthusiastic about what the world has to offer and the benefits it can bring.
Using modern web technologies and techniques we not only allowed users to view full browser video to inspire. But we also let users play a game of catch with a cat that wants to be more dog. Using Web Sockets to sync your handheld device to your desktop/laptop and flick frisbees to the HTML 5 video & audio powered feline. If you liked being more dog you can then spread the word using the Dog Bomb video generator.

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.

Objectives

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.

My Involvement

Creative lead, Art + Design and Interaction Direction, Pitch design, Initial design, final design (mostly mobile experience), game mechanic UX, prototype animations and animatics

Credits

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

Awards and Recognition so far

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

Game Mechanic / Storyboard

BMD_play_storyboard_web

ART DIRECTION / Initial Design presentation

Work flows and Prototyping

I also worked very closely with our developers to make sure we were using the best modern video techniques to make sure this non-flash video site did not compromise in anyway.
o2BMD_desktop_v5__insituTest_comparison_possibilities

Creating the cat

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.
Why?
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.

Demo Cat – full version for game mechanic

Carousel demo

Sound

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.

Mobile Design

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.

Behind the Scenes

bmdbts

Final Design

The big thing in this dual experience was to make sure that someone accessing the site from mobile did not feel compromised or as if they were missing out in anyway by not going to the desktop first.
As a result we have a 360 UX loop and no dead ends. As well as mobile specific designs and mechanics for key elements like the dog bomb video maker.
mobile_to_desktop

Key features we ticked off

* Flat, full browser, scalable, multi-device aware, responsive design
* Minimal interface
* Dual screen experience
* Gesture based interactions
* WebSockets
* 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
* CSS3
* Numerous animations and transitions were built with CSS3, which have the potential to be hardware accelerated.

Pitch work Click through Sequences

Early Exploration tests

The Integrated Campaign

The Sequel

After such a great response to Being More Dog in 2014 we asked the nation to test how much they believed it