Line In

Nomadic Designer

Case Study: John H Watson MD

Case Study: John H Watson MD

The client for this site contacted me again after I had finished his business website and asked if I could redesign his entertainment site. This site was a homage to Sherlock Holmes, but with a very creative twist - it was written as if the writer were Dr Watson living in the present day.

I love having the opportunity to do sites like these because they offer a lot of creative freedom. The brief was bashed out over a few late night dinners - my favourite kinds of meetings because they are always a bit of a creative free-for-all (and generally involve copious amounts of wine). Plenty of great ideas were thrown around and we both left very excited about the possibilites.

We eventually decided that the site should reflect the author’s circumstances and, of course, that meant basing it around the famous 221b Baker Street. The client supplied some great illustrations of the interior of the flat which gave me some fantastic ideas for little details that would appeal to the hardcore Holmes fan.

We finally narrowed it down to the design looking as if it were Watson’s journal on his desk and I set to work.

Research

The first thing I did was hit the library. Although the site features Watson writing in the present day, I still felt that it was important to keep to the Victorian aesthetic as that is the time period where the stories are set and would therefore more likely appeal to the target audience.

I found some interesting books on Victorian furnishings, with one picture standing out above all the others - an old, dark wood desk with a padded, green leather writing surface. This desk struck me as being most obviously Victorian.

Design

Using both Photoshop and Illustrator, I begun by recreating the desk based on the image. I located some wood textures and an amazing leather texture and then applied some filters and some shading to give it a more realistic look. The texture was originally brown, but I had to have it green so some adjustment layers were used to get the exact effect I was looking for.

One of the biggest problems I initially had was with the fact that there was no way of knowing how long the page would be. This meant that the majority of the page would have to use a repeating background. The problem with heavily textured backgrounds is that it becomes quite obvoious when it’s being repeated - especially if there are variations in brightness.

One solution is to have the repeating part so large (i.e. longer than the height of the average screen) so that it’s not obvious. However, this is totally impractical for the web as the file size for the image would be too much, taking the load time of the site to unacceptable levels.

It took a lot of experimentation to find the balance between repetition and file size, but I finally reached a compromise that I was happy with.

The Details

I couldn’t resist creating a magnifying glass for the search box - it was just too perfect an opportunity to pass up - some ideas just fit so naturally that it just had to be done.

The pipe was another obvious Holmes reference - I’ve written a tutorial on how to design a pipe that explains the exact steps used to create it.

The letters with the knife stuck through them was the most subtle element. Of course, in the novels the pile of correspondence is on the mantelpiece but, for this site, it has moved to Watson’s desk.

Hopefully the real fans will forgive the move and enjoy the reference.

The Launch

The client was very pleased with the final design. Ultimately, though, it is the users that decide whether or not it’s any good but, thankfully, this one seems to have passed the test.

Shortly after the launch, we noticed a 200% spike in visitors. Further investigation led us to a Sherlock Holmes discussion group where they had found this site and shared the link, along with some very nice messages, including this one:

It is lovely isnít it? Someone has obviously taken alot [sic] of time in putting the site together. And it has paid off really well I think.>

As a designer with the typical fragile ego, it’s very reassuring to have the approval of random strangers.

The Lesson

Ego stroking aside, it also shows how much of a draw a good design can be. The design led to nice things being said about the design which led to the spike in visitors.

However, it’s the content that keeps some of those visitors coming back. The design might draw people in, but if the content isn’t there to back it up then they’re not likely to return. Luckily, thanks to my client’s unique writing style and the clever twist, the content on the site was good enough to keep many of those initial visitors coming back.

Vist John H Watson MD.