Follow / Subscribe
While looking through the design files for the running calendar website a couple of nights ago, I found some of my early design ideas and have decided to share them here along with screenshots of the various versions of the designs, and talk about some of the plans I have for the site for the future.
The New Zealand Running Calendar website officially launched on Sunday April 18th 2010, although it had been a long time in the making/thinking. I'd originally thought it up in 2007 while going out for lunchtime runs around Auckland's Domain.
There was (and still is) another reasonably comprehensive running calendar listing website but I found the search function on it fairly clunky, it's use of coloured text on a black background hard work to read, and it's reliance on people submitting events to it meaning it wasn't as comprehensive into the future as it could be.
So I decided to make a running calendar website myself. The plan was (and still is) that I scout out for events, continually watching existing event websites so I know when they update their information and can get dates for their next event up on this website within a day or two of the official announcement.
The other thing I wanted was to have event summaries on this website, so people could get a reasonable amount of information without having to leave the site until they decided they need more specific information about an event. That's why the calendar lists have a link to the official website, as well as to a summary page where I show a basic amount of information about the event, along with a location map.
I originally wanted the site to be laid out like a calendar, because it's easier to look at a glance what's going on. But it proved to be an impractical design because there's too many events.
Here's a first design idea, which was only ever mocked up in Photoshop. It shows a traditional calendar layout with distances showing on the date. The idea was you would click the date and the little box that appears (that white box floating over the top) would have a list of events on that date. You could then click for more information.
I quickly decided that from a usability perspective this design wasn't really going to work, but it didn't stop me having another go at roughly the same idea. This second design was partially coded so I could generate the layout for the Photoshop design, and is starting to head more towards the final calendar layout.
It again has the floating box which would show the events on the day. Again, I decided it would have usability issues so decided to go to a list format which is on the site today.
I only have a really poor quality screenshot of the original version of the website (and have faked the calendar into it from another screenshot - but it did look like that at the time). It has the search function on the left side, advertising on the right side and the calendar in the middle.
When you click the information, map icon or the text it opened the event information in a little popup window.
Version 2 went live in November 2010, because I decided the search box on the left was taking up too much room and the middle was too small, so I moved the search to the top under the main navigation.
This continued to have the same popup for events as the version 1 design, and then the main site design didn't change for version 3, but the popup was changed in September 2011 to be wider.
This is the current design of the website as of this post. I needed more navigation across the top and wanted to push the ads further up the page, so made the logo wide and moved the Facebook/Twitter/etc links from above the ads to the top of the page. This design went live in January 2012.
Those were the major design changes and layouts, but there have been dozens of minor layout changes over the last couple of years including a re-jig of the news section this month. Over time I've added the social network sharing buttons (the little icons on the left), commenting about events etc, group training and so on.
It's unlikely I'll make any major changes to the main site layout in the near future but there are a number of things that I still want to do to improve the site: