Excited about client work

I don’t talk much about the client work we produce at Headscape, but I am really excited about our latest site and so wanted to share a few thoughts about it with you.

We won the work at least partly due to the boagworld podcast, which in itself is an encouraging start. It proves that guerilla marketing really works and also, clients we win via the podcast tend to be more switch on to the web and our way of working.

The job was to redesign the Visit Thames website from the ground up. New content management system, IA, content, design… everything. It was a big job and a very tight timescale. In fact the deadline was so tight that we initially turns the project down. This is something that we have often talked about doing on the podcast but is hard to do in real life. However, our strategy of not committing ourselves to the impossible proved correct and the client agreed to move the deadline back just enough to get us onboard.
Despite the new deadline this has always been a very tight project and there is still a lot still to do on the site. However, the initial version is a massive improvement on the old site and I wanted to tell you about a few of the cool things we have done.

AJAX goodness

One thing I like about this site is that it uses AJAX and JavaScript but doesn’t rely too heavily on it. The client side code enhances the user experience rather than being an integral part. You can give feedback or send to a friend without leaving the page you were visiting. You can add items to your itinerary without reloading. You can get ideas for trips without jumping from page to page. In short the site implements the principles of progressive enhancement and HIJAX.

Kick ass content management

There are also loads of content management facilities that unfortunately we cannot show you. We have made significant modifications to our in-house content management code base allowing site administrators to do all kinds of cool stuff. Functionality includes:

  • Permission and workflows
  • Geocoding points of interest using Google Maps (like Google My Map)
  • Building up pages from a huge number of modular elements
  • Building and managing your own forms
  • Comprehensive reports on all site forms
  • Personalized dashboard
  • Powerful image library allowing basic image editing
  • The ability to create your own domain shortcuts to specific pages
  • Content expiry alerts

The list goes on and on. All of this is built on .net, which may not be the trendiest language in the world but certainly proved hugely powerful and flexible for our requirements. Another nice technical aspect is the fact that the majority of data is stored as XML rather than in a rigid database table. This allows huge flexibility in the management and organization of data.

Google Maps on steroids

One of the primary functions of the new site was the ability for users to find points of interest, which they may wish to visit when spending a day on the Thames. In total the client had 15000 points of interest that he wanted to give users access to. Not only did the user need to know basic information on these points, he also needed to know geographically where they were. The obvious conclusion was to plot them on Google maps.

Of course the biggest problem with Google maps is that it isn’t very accessible. We therefore also wanted to show the points as a list in addition to plotting them on a map. Our other concern was that it became obvious very quickly that even plotting a fraction of 15000 points was going to create serious performance problems.

Using a big blob of AJAX goodness we managed to overcome both of these problems. Basically, each time the map loads we grab the boundaries of the map and call back to the server, only loading in points that appear within those boundaries. Every time you drag the map it calls back and gets a new set of points. Users that don’t have JavaScript enabled can still use a traditional search option to return points based on postcode or place name. Try it for yourself and see what I mean.

Now, the system isn’t perfect. There is a delay each time you drag (although to be honest most of the time is spent calling back to Google) and we have had to limit the zoom level to stop too many points being called back. However, we are working on ways to improve this and it is still a pretty unique solution.

Task focused functionality

Right from the outset we wanted to focus on the primary goal of most visitors to the site, which was to discover places to visit. If you are spending a long weekend on the Thames for example you might want to find:

  • Somewhere to stay
  • Places to visit
  • Some nice places to eat out

It quickly became apparent that what users needed to do was build an itinerary of points of interest. What is more they needed to print those out in a nicely formatted way including a map to show where those points are.

By concentrating on this primary objective the site has a nicely focused feel, making it much easier to use.

Microformats to boot

Okay, so the code isn’t the cleanest we have ever produced but making the design fluid and scalable with font resizing proved tricky in places. However, all of the points of interest are marked up as Microformats which will allow us to do some cool stuff in future such as downloading them as vcards or integrating them with other systems.

The future

Of course like any site that you produce, all we can see are the bugs and problems. However, I am excited about this site because it has some really cool features and we have a client who is planning for the future. We have some great new things coming soon, which should improve the user experience even further. Oh yes, and it has Poirot sharing his passion for the Thames. Nice.

Boagworks

Boagworld