Winning awards for websites isn’t easy. The competition is huge, the stakes are high, and what might be internet heaven for one person is holy hell for another. But we’ve won them in spades for our Milk Matters site, created last year for Cravendale. We recently added 2 FAB awards to our many commendations the site, one for the Best Website and the second for Most Creative Digital Work. And we thought this would be a great chance to discuss some of the design decisions that went on behind the scenes which we feel made the site chime with so many people.
So a bit of background – Arla gave us the task of a re-designing their site we made for them in 2008, and one of the key objectives was to deliver their key 2009 brand messages, such as “Milk is great for strong, healthy teeth”.
So we decided to create a new animated character for the site that would be able to deliver these messages whilst the user browses. This character would have to be easy to draw and animate, giving us flexibility for animations and updates over the course of the year.
The initial interface designs were focused purely on the bottle, and the way our character could interact with the milk bottle while displaying key messages. Looking back you can see how the different initiatives had taken a back seat in our original designs, they weren’t very flexible and didn’t allow room for loads of content and promotions being added to the site throughout the year.
We wanted to move away from typical images in boxes you see so often in web design so we experimented with different ways of navigating around the site. The stage area became larger and scattered more objects around which represented current and future initiatives. These navigational blocks became more individual with each adopting their own unique look. We made our character smaller so that he could interact with the bottle as part of the site. At this point we liked the look of the 3D boxes sitting in the site.
Here we have a slightly more developed version of the homepage, the 2D character is amongst the 3D blocks and large typography in the background denotes the current site section. The navigational blocks are coming to life with more colour and their own distinct look and feel. One problem we came across was we felt the 2D character and 3D objects did not work well together on screen at the same time. The decision had to be made between a 3D or 2D world. The 3D route would allow us to create some really nice objects, but restricted the interactivity our character could have with the site. A 2D world would let us implement a flash physics engine in the site, therefore allowing the user to pick up any block, object or even the character and throw them around the stage.
The decision between 2D and 3D had been made, and 2D won! The navigational blocks were changed to be completely flat, with the graphics on each more colourful and distinctive. They are now all on one plane, allowing our character to run around the site with greater freedom.
At the finishing line, we had a problem with the blocks potentially covering the Cravendale bottle so we moved it to the front giving it prominence on every page. Everything has been brought closer together and the site looks cleaner and more minimal than ever.
So there you have it – from an initial “boring” design into an award-winning site with an integrated physics engine. And at this stage we had fun sticking a few Easter Eggs in there too – for instance, our office telephone number (0207 841 3970) is one of the only numbers that will make the mobile phone ring. There are loads of other hidden gems in the site still waiting to be found – why not head over there now and have a play?