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.