Archive for the ‘Portfolio’ Category
World Cup KickOff 2010
The FIFA World Cup is one of the biggest events in the sporting calendar. Every four years, 32 countries come together in one to compete for the pride and glory of one Cup. The event takes the World by storm with billions watching the event while many companies use the event as a marketing opportunity, either directly or indirectly.
This year is no different and the World Cup finally kicks off today after years of preparation in the capital of South Africa, Johannesburg, where the local team will take on Mexico.
Four years ago (pretty much to the day), I had the idea of downloading all the World Cup fixtures into my Outlook calendar by developing a small website using the hCalendar Microformat and Brian Suda’s X2V parser.
Little did I know I was on to a winner when the website quickly got promoted by all the big social networks at the time (remember Digg?), even the Guardian and Yahoo! saw fit to make a feature of the website, driving traffic up to an average of 10,000 visitors a day. All this contributed to quite a successful project which motivated me further to pursue football calendars.
Over the years, I’ve dabbled in a few other projects of a similar nature: I built 6 Nations KickOff after a suggestion from Owen, collaborated with Klaus and Gareth on Euro KickOff, launched F1 Calendar with Andy and even worked with UEFA on a bespoke calendar service for their website.
All this built up to last Friday though when, after months of blood, sweat and tears, I relaunched World Cup KickOff for South Africa 2010.
It has to be said the project has been a labour of love and torment. I started the design process back in September 2009, knowing full well that I had to get this right. Having worked on multiple calendar based solutions, I was fully aware of the issues presented and what users come to expect from such a service.
Timezones are always an issue to combat, especially with the inconsistencies between countries around the globe adopting Daylight Saving Time. By setting the timezone in the calendar event, user’s calendar software should automatically recalculate the time to their local timezone. I wanted to keep the website solution as simple as possible so decided to avoid confusing users with the timezone filter.
Since 2006, software and mobile devices have become a lot more versatile in the ability to subscribe to remote calendars. The most popular devices to adopt such technology comes from Apple with iPhones, iPads and Macs all supporting remote calendars in their iCal software. With this shift in calendar logic, it seemed natural to push the subscription functionality to users more than the download functionality (which lacks the ability of automatic updates).
One of the biggest selling points on the original World Cup KickOff was the ability to filter your calendar by country. For Euro KickOff, we extended this to Group & Stage, Venue and Date. This seemed to be an underlying factor to the success of this service so it was clear this feature was necessary for World Cup 2010.

However, for me, the primary call to actions were Download and Subscribe, so I gave these features prominent position before the filters. Some would argue that the process should be in reverse but, as a fan of the World Cup in general, I was confident the majority of vistors to the website would be interested in the entire competition, not just for their country.
When it came to the actual aesthetics and design, I really struggled to find a style I was happy with. There must have been over ten attempts that were just binned. It was only in the last month or two where I found a style I continually looked back on and didn’t find fault with it (always a good sign for a designer).
I wanted to portray the natural essence of (South) Africa with a slightly aged design, hence the softened hue of the green, cream and black colours used. Personally, I’ve recently been fond of retro styles, with designs relying heavily on clean and clear typography wrapped in solid blocks to get a message across. Thankfully, after a couple of sneaky peaks on design hub Dribbble, I got some really constructive and positive feedback from the design elite which confirmed I was on to a winner.
As with most of my recent projects, I adopted the popular 960 Grid System to ensure the layout worked on as many desktop environments as possible. By breaking the grid into three equal columns of 300 pixels with 20 pixel gutters, the layout had a solid structure with plenty of room in each column for legibility.

I was conscious of the amount of space required to display all the necessary information for match fixtures; with a date, time, two countries, a venue and grouping for each fixture, it seemed logical to present the information in a tabular grid. During earlier prototypes, I considered alternative layouts, such as replicating football tickets, but this took up too much screen real estate so the idea was binned. In the end, a table spanning two columns made more sense and allowed for enough room to fit all the information on a single row.
The final stages of the project came together naturally with all the information gathered, the functionality finalised and design guidelines complete. Running up to the launch, there were plenty of nervous moments, panicking about meeting the deadline. Thanks to support from some close and helpful friends (hat-tip to Charles, Brian, Cole and Paul), it all came together and launched with minimal fuss.
As per usual, it’s been a real pleasure working on this project. I’m really proud of what has been accomplished but also look forward to building on World Cup KickOff and other sports calendar websites in the future. The framework is coming together nicely and could easily be applied to other sports. No doubt, though, I’ll find fault with what currently exists and will continue to refine the system and process.
UEFA Calendars
Having built quite a few calendar-based solutions over the last four years, the majority of which for major football tournaments, you can imagine my surprise when UEFA approached us to develop and integrate a similar calendar solution for their organisation.
As one of the largest football bodies in the world, it was clearly going to be a huge project that required immense planning and a thoroughly thought out solution. That didn’t deter us though.
Teaming up with Brian Suda, the developer who made the likes of World Cup KickOff and Euro KickOff possible, we put together a plan that would not only deliver what UEFA wanted but also impress them with our ideas.
Over the course of the last year, we have been working closely with UEFA to build the calendar system, using a suite of tools including their comprehensive internal infrastructure as well as a host of solutions we have been building over the last few years.
One of the biggest challenges was supporting all the international languages UEFA currently offered including French, Spanish, Italian, Portugese, German and Russian. By using a selection of translation tools and some rigorous testing, we found a reliable solution that worked perfectly for everyone.
After a hugely successful testing phase during the end of the 2008-9 season, UEFA were more than happy to keep the relationship going with us continually consulting and developing the bespoke calendar solution into the 2009-10 season.
You can read more information about the UEFA Calendar project or head on over to the UEFA Calendar service itself to find out more and download or subscribe to the calendars of your choice.
One Phat DJ goes solo
For a long time, this website became dominated with content for the One Phat DJ Podcast. While it was good regular content about fresh funky house music, it was distracting from my main focus in life - the Web and digital media.
The One Phat DJ website has been available for quite a few years now - the first instance was setup way back in 2001 - but has usually been a single page pointing visitors to the podcast and connecting services such as Twitter , Facebook and Last FM.
A few months back, I decided it was time to migrate all One Phat DJ content to a dedicated website to highlight a clear distinction between my two different “guises”.
With the introduction of the Funky House Finesse brand and a regular slot secured on Lifted Radio, I gave myself a weekend to setup a basic website using my favoured CMS WordPress, plugging in all the existing content with minimal effort.
The project is evolving (like most good websites) and is sure to grow over the coming months but, for the time being, if you are more interested in the musical side of my life than the digital media, I suggest you pop on over to the One Phat DJ website, put it in your bookmarks and download the archive of mixes directly from there.
Download the Formula One schedule with F1 Calendar
The Formula One calendar commences in Sydney, Australia next week. If you already knew that, chances are you’ll be quite interested the latest addition to the KickOff series of sports calendar web apps…
F1 Calendar is a quick way to check Formula One race times and dates for the entire season, either on the website or directly from your own calendar application.
Similarly to the previous KickOff services (which include Six Nations Kickoff, Euro Kickoff and World Cup Kickoff), all the dates and times can be downloaded straight to Outlook, iCal or even your iPhone - basically any software or mobile device that can recognise the industry standard ICS file format.
Not only can you download the race times but - if you’re software or hardware allows - you can subscribe to the remote calendar file which will automatically update as and when any changes are made to the schedule.
F1 Calendar also introduced full support for world time zones, changing all the times to your local settings. It also remembers your recent selections so you can go straight to the upcoming times quickly and easily.
Not only that but we’ve also allowed a level of customisation to your calendars: you can even decide whether to include just the race times or the qualifying rounds as well.
Working with Andy Higgs this time round - an amazingly talented web designer & developer - we approached the project with a relatively simple design, targetting the typical demographic who are interested in Formula 1. By incorporating the existing grey and red image associated with racing, it established a familiar look for the intended audience.
Focussing on the core functionality as getting the data quickly and easily, the most prominent feature was the Download and Subscribe functionality. We didn’t want to isolate the users who just wanted an online reference though so the schedule list had to be present and simple to understand. Each event focussed on the actual race but the user could easily drill down to qualifying times by clicking on the event title.
It was great to collaborate with Andy on this project as it was the first time we had worked together since meeting at The Multipack several years ago. Andy was a joy to work with, showing huge enthusiasm for the topic and real initiative throughout the development process. No doubt I shall work with him again on future projects.
If you like F1 Calendar and find it useful, please share it with your friends on Twitter, Facebook, Delicious or any other social network you’re on.
There is also a dedicated @f1cal Twitter account so feel free to follow us for updates or send us any suggestions.








