The dog speaks

Engineering the self – Web design Firedoggy style

It’s not often that you can clear the decks in the studio to get to work on your own web design. Hence, we’re releasing updates of our site in parts.

A few months back, we were fortunate to work with one of the world’s most eminent cloud software producers, Mimecast.  Being so close to their engineering team, we learnt to release software and digital products in what they called “Sprints” – the idea being a liquid product release timeline, where the team doesn’t sit around attempting a “perfect” release.

It’s quite a liberating experience, albeit, somewhat riskier from a traditionalists point of view. I guess as designers, we’ve always had the idea of only publishing material once it had been perfected and checked a million times. The reality is though, in today’s frenetic world, if you adopted this methodology you’d never get anything done. Microsoft always took this viewpoint, releasing operating systems and half backed software with public Betas. Whilst I’m sure this has harmed their brand a little, they are still very much a player.

The crux is to really communicate to your audiences – and here is our humble attempt. Here’s what we have built into this release:

SPEED OPTIMISATION

One of the core parts of functionality that has always had a bearing on our site performance is our Creative Results page. As an agency of no less than eleven years, we have accrued a rather sizeable body of work. We’ve always positioned ourselves as a very visual kind of brand – bold, bright and energetic.

As an agency of no less than eleven years, we have accrued a rather sizeable body of workIn the last site release, Digital Director Sam Cane @samuelcane decided on an awesome isotope plug-in for our portfolio of work. Cliff’s brief was always to present an awe inspiring “Wall of work” – showcasing more than 100 case studies. No mean feat.

Coupled with this, we showed a number of these on our home page. The effects of all this visual work was both taxing in memory and content delivery. In addition to this, we were still using our USA hosts, mediatemple who are based in the West Coast of the USA.

Here’s what we did: the first step we took was to migrate the previous version on to different hosts. We moved to a Rackspace cloud product with added managed hosting. We really wanted to measure the impact of serving content from the UK. We used Google analytics and set some goal based observations for a period of one month. And this is what we have achieved thus far:

A nice start.

With one teensy oversight. A vital lesson on rapid releases is to have all the correct buttons pushed. We lost 28% of traffic, because we forgot to adjust our robots.txt file, which was still blocking spiders on move from testing environment. Damnit.

A NEW DOOR FOR OUR NEW HOME

We know that the home page of any website is a deal breaker. We weren’t happy with our home page, and to be honest, we hadn’t been for a while. Added to the painful strain on page load time from the legacy portfolio mark up was a lack of a key proposition. We literally had a large image and a paragraph of text. Bounce rates support this criticism with bounces as high as 40%. A bounce is someone visiting your site and saying “nah, this is not for me”. Not good.

The brief: create an engaging experience which conveys the Firedog spiritCue one of our largest challenges. Getting the cobbler to make his kids some shoes – a reoccurring experience in a small and busy studio. We’ve had the homepage in the studio for no less than a year, itching to actually get it built. We’ve had about four different designers on completing the design, from start to finish. We’re talking about one page here! Nevermind…

The brief: create an engaging experience, which conveys the Firedog spirit, with plenty of routes into our site and ultimately our business. Key developments include our “Pillars of Reason” – a fancy word for a brand proposition carousel, albeit with some interesting messages. Another key experience change, is the depth of the page. Current web behaviour tells us that audiences want a one page pre-site experience which gets the crux of the business across in one go. We retain some case study materials but bring in a bunch of Firedoggy stuff. We know that choosing an agency to work with or in, is predominantly about the culture.

OPTIMISED CREATIVE RESULTS

As we’ve explained above, our creative results page is our most complex piece of mark up. Ammar has been ruthlessly adapting and fine tuning this code, all with the view to retaining the “Wall” feel – just making it far more quick and painless.

The wall of case studies is now centred on the page and expands out in both directions to better fit wider monitors. The case study elements on the wall reveal detailed case study information using a direction aware hover transition which, using a bit of JavaScript and math trickery, listens for a hover event and determines the direction which the mouse entered each element, revealing the overlay from that side.

CENTERED LAYOUT

The new Firedog Homepage is where we get to tell our story, it’s our elevator pitch. We decided to centre our site experience to stage our story appropriately. It now has that little je ne sais quoi!

The homepage needs to work harder than any page in the web site, it needs to inform, inspire and engage, quickly.  We carried out some research and discovered that people want to be able to get to know us first and foremost, they were happy to have our work presented to them as part of our story, but exactly that – as a part of our story. Firedog are not defined by the work we do, but by the spirit of our approach. With this in mind, we gave our readers a bite sized chunks of Firedog, what we do, where we are, our clients, latest work and our thoughts. Now, you can find out all you need to know (and more) in a matter of moments.

RESPECT THE NEWSLETTER

With your first newsletter you will receive a little Beagle puppy*!Our newsletter, delightfully named The Beagle is lovingly crafted and curated by the team each season. It’s a great read and is probably the nicest example of email design you will have seen. That’s all well and good, but we want more people to read it!  The potential for our visitors to join the mailing list seemed to be hiding in plain sight! So we brought it forward and gave it the prominence that a good newsletter deserves. Take a look and sign up. You won’t regret it! With your first newsletter you will receive a little Beagle puppy*!

*Sorry, that was a little white lie to get you to sign up to the mailing list. It’s actually a Whippet you’ll receive.

FOLLOW THE DOG

Apart from all the usual Facebook and Twitter chit chat, we also wanted to promote our other platforms that we frequently engage with, so we’ve also added the Firedog Pinterest and Tumblr to our social gang. Take a look, you might just like them!