Swim, Bike, Run
Introduction:
A design process can sometimes be torturous. However, once in a while a design feels like it wants to create itself. If you are really lucky, the further into the process you go the more the design comes together and the better the elements, the layout, the navigation flow together. This was the case with the new Ithaca Triathlon Club web site.
The Ithaca Triathlon Club was formed in 2003 when a group of local enthusiastic athletes got together and decided to start a club where people of wide-ranging abilities could find camaraderie and people with whom they could run, bike or swim. About the same time the Club asked One Bad Ant to create a new site for them, which we did. But that was more than seven years ago and the site was looking very dated.
Project Goal:
It was time for a new, modern site, a more functional and more visually appealing one, one designed to better support the club's content. One that didn't look eight years old.
Again the Club asked One Bad Ant for help.
The project began with a meeting with the Club to discuss their vision for the new site. Together we outlined new features and functionality and discussed what was working and what wasn't with the current site. With this meeting under our belts I began working on the new design. I wanted to design a site that said "Wow!". I wanted this to be a site that a group of enthusiastic athletes who train and compete together, who enjoy sport and athletic challenges, would feel captured the spirit of their club.
OBA Solution:
-
A New "Wow" Design: Eight years ago cascading style sheets (CSS) were still an emerging and poorly supported standard. With today's more standards-compliant browsers we have far more control and flexibility in how we design and develop web sites. CSS, Javascript, standards-compliant browsers, even a new graphics format, were all necessary to build the new Ithaca Triathlon Club's site.
The new design came together relatively quickly. I worried it was coming together too easily. The triathlon collage used as the page background and the gray-scale gradient gave the site an edgy, high impact, modern sports look.
The home page slide show, with photos taken from past events, immediately communicated that the club is about and for athletes, and about people who enjoy each other's company.
As this all came together I began to think,"The client is going to love this! This design will really work for them. It really represents them." And that's when I began to worry. The more excited I became by the design and functionality of the site, the more the nagging thoughts grew: "What if the client doesn't like it?". What if they don't like the choice of colors? What if they think the navigation is too obtuse? What if...? What if...?
- New Content Organization: But good design doesn't exist in a vacuum. It is heavily informed by content. I built the site hierarchy and navigation using the content outline provided by the Club. At the same time I also addressed the excessive amount of page space required by the old navigation features, which was one of the major issues the Club had with the old site.
- Dynamic Menus: A site's navigation features have to fit somewhere. Traditionally they either occupy a column on the left- or right-hand side of the page, or occupy one or more rows at the top or bottom of the page. Either method reduces the space available for actual content, sometimes significantly.
Creating an elegant solution to this issue again lies in the advances of modern browsers, CSS and JavaScript. One Bad Ant addressed this issue by first creating multiple rows of navigation elements for the site pages' header - and then hiding them away.
There are six major site sections and navigation links: "Home" (the Club's logo), "The Race," "Membership," "Training," "Calendar," and "About Us" that appear on every page header. A "More" tab also appears directly under the navigation element for the section you are currently viewing. Clicking the tab will pull down (expose) the additional sub-navigation areas for the section. The page content is moved lower to make room for the new menu, and the "More" tab changes to a "Less" tab. Clicking the tab again will close the additional navigation, hiding the options and raising the page content.
As you explore the site's navigation features you may also notice that the "Calendar" icon always displays the current month and day. Granted it's a small detail, but a useful one, and a fun one to have built.
- Countdown and Status Bar: Over the years, and as the Club has grown, I've learned a lot about how the Club wants to use their web site and about the information that needs to be to highlighted. One of the most important items for the athletes is the registration status of the Cayuga Lake Triathlon (CLT). When does it open? Is it open? Is the race full? And if it is open, then take me to the registration page.
I've placed the registration status at the very top of every page on the site so Club members and athletes can immediately find it. This status area also serves as a link to the registration page when it's open.
The second item at the very top of the page is the CLT Countdown. As you'd expect this counts down to the race day, letting the athletes know just how many more training days, hours, minutes and seconds (!) they have until the big day.
Dynamic Maps: There is plenty of information about the big day on the site, but one of the most useful features, especially for an athlete who has never competed in the CLT, is the dynamic race map.
The race map page not only provides written route information, but for each option (intermediate, sprint, or youth) and each event (swim, bike, and run) a "Map It" button dynamically draws the appropriate route on a Google map. This map can be scrolled and zoomed for more detail, including information about transition areas and turn-around locations.
Similar maps were created for the Club's training routes.
Integrated, Multiple Google Calendars: Prior to the site redesign, the Club maintained its own events and workout calendars using Google calendars. This is one of the great free services Google provides. The calendars are easy to use and can be maintained by non-HTML professionals. The only thing missing was that they weren't integrated into the Club's web site, nor were there links to the calendars from within the site.
The new design embeds the calendars directly into the Club's site. The new "Calendar" sub-menu allows club members to view just events, just workouts, or both on a combined calendar. Very convenient. Very easy. And, the Club continues to maintain their calendars themselves.
In the end did the web site capture the spirit of the Ithaca Triathlon Club?
Honestly I'm not sure that's even possible. How do you capture the camaraderie, the months of training, the competition, the dedication of the club members and organizers, and one of the most spectacular regions of upstate New York? I don't think you can, but you can try.
So, I finally presented the new design and the new site features to the steering committee, on a fine spring day that was just beginning to tease us with sunshine, warmer weather, and longer days, and...
"Wow!"
