We just launched a project for News Ltd called 'The London Tracker'. It's a quite ambitious product that is geared up to deliver all the events, results, schedules and editorial news from the Olympics in one simple and user-friendly location.

To make matters a bit more interesting, the whole project was approached as a Responsive Design build. Now, I've been waffling on in the past about Responsive Design and how awesome that design-build-ux ethos is, but talk quickly becomes dull if you can't back it up with the actual goods. So here's some goodies for you guys ;)

Design

Designing Responsive sites is infamously hard, especially if you're looking for a lot of visual embellishments. Our concept took shape over a few weeks of sketching, mock-ups and focus groups with the power-trio of UX, Design and Development.

End result? Pretty rad. It's a complete family of layouts, all thematically consistent and visually optimized for the platform the site is being viewed on. Easier for me to visualize this with a few pretty pictures;

 

UX

Pretty pictures are cool, and we all love embellishment. In the end though, it means nothing if the user journey is cluttered or complicated. If people can't find what they want to find, aesthetics means very little. 

3 rounds of user testing were conducted throughout the development of the London Tracker. Initial paper based testing revealed the original concept was not working right.

After tweaks, a second round of user testing was done on a fully designed clickable prototype. User feedback confirmed the journeys were working well and we progressed with design.

Prior to launch we ran a final round of user testing on a desktop, tablet and mobile device to ensure the site worked on all devices and to uncover any final adjustments required.

The key outtake from this project was that testing on paper early allowed us to uncover critical learnings before we had invested too much time into design and build. 

Front-End

Complaining about traditional Front-End development and how frustrating it can be with IE6/7/8 is pretty much dwarfed by the task of creating a streamlined, consistent and interactive experience across almost every single platform. Our insanely talented FED team created the site bearing almost every device we could think of in mind. From various Android phones to iPhones, iPod touches, iPads (1-2 & 3), mini-tablets such as the Nexus 7, Blackberry playbook and of course various desktop browsers.

Adding animation touches that are personalized to the capabilities of your device was an additional level of polish that went in to the experience.

Since the London Tracker is across several 'Mastheads' (Different networks across News Limited, such as Herald Sun, Courier Mail et.c.), we were also tasked with implementing the header of each website (for various layouts) and making sure their ad-serving was consistent with the parent site.

Back-End

A robust back-end set-up is often neglected and gets the least love generally. In the case of the London Tracker it was given a lot of focus and thought given the very aggressive traffic projections.

We utilised .NET 4.0 MVC and MongoDB to call the Press Association feeds into API calls streamlined specifically for the information required for the front end. .NET caching was vital for ensuring data could be returned quickly, minimising page response times and end user wait times. Additional performance were gained through the use of Akamai products such as NetStorage, Dynamic Site Accelerator, Sure Route and TCP Optimisation.

Infrastructure wise we spread the application over 4 very beefy high availability servers which comfortably coped with the 12,000 concurrent users we threw at the application during load testing. In fact; by the end of testing we broke the load testing software before we broke the application simulating a very impressive 15,000 users concurrently with minimal performance impact.

Summary

Great teams respond to great challenges! We're all incredibly proud of the tracker, and super stoked that it's live for the world to see. We've learnt heaps in the making, and it's to us a perfect case study on how Responsive sites can be put together well as long as you take your time with the preparation.

In closing, here are the links to the tracker on the individual Mastheads. Enjoy!

 

Adelaide Now: http://londontracker.adelaidenow.com.au

Courier Mail: http://londontracker.couriermail.com.au

Daily Telegraph: http://londontracker.dailytelegraph.com.au

Fox Sports: http://londontracker.foxsports.com.au

Herald Sun: http://londontracker.heraldsun.com.au

News.com.au: http://londontracker.news.com.au

Perth Now: http://londontracker.perthnow.com.au