Design—Summer Website Olympics

August 25, 2004

Design is the apparatus today. I will cover just two elements of design, usability and ‘look and feel’. If however, you think I have missed something you can take it up with the judges and the results may change—not like that would ever happen in the Olympics. Let us begin with the competition.

Athens 2004 Screen Shot Fox Sports Athens 2004 Screen Shot ESPN's Olympic 2004 Screen Shot NBC's Olypmic 2004 Screen Shot

Today’s design competition is brought to you by Apple, because they always have great designs.

Usability

Is the site easy to use, at least easy to navigate and get the olympic news you want? I performed the following test for each site to guide me in a quick usability test. The test was to find out how many medal has Spain won?

Athens 2004 lists a helpful navigation up top linking to daily summaries of each day. I like the concept but I think it could have been styled a little better. Making the button a little bigger for each day so it is easier to click on would help. The navigation on the side it easy and simple to follow.

The medals table was easy to find, however finding Spain in the long list took longer than expected. It would be nice if their was a way to sort by country. I was also confused a bit by the title of the column ‘NOC’. I don’t know what that is, I think it is ‘Name of Country’, an abbr tag would be helpful.

Fox Sports Olympics I like the large photos used and features photos and story. The navigation is a bit confusing, what is the difference between front page and home page, they have them both. I have never been a fan of drop-down menus, moreover they duplicate the links right under the selected tab anyways. When I follow the link menu on the drop down it takes me to this page, which is even more confusing—I thought this was suppose to be the medals page. They do have a nice medals table in flash on the home page but it is near the bottom and I would think it would be an item you want to show visitors first.

The medals page was inside an iframe with no scrollbar, but when I break it out of the parent it is pretty plain and there was no easy way to find Spain’s medal count.

ESPN Olypmics does a great job on their font page with large pictures and features. If you are already familiar with ESPN’s navigation it follows the same design. My only suggestion would be to make the entire box on the navigation link clickable, not just the word.

Their medal tracker button at first took me to an ad, maybe that was on purpose, but I had to backtrack and click on the text ‘Medal Tracker’. From there they had a dropdown button for each country, making it very simple to find Spain.

NBC Olympics like Fox, they have a dropdown for the navigation—easier to use than Fox’s. The rotating image is a nice touch for the top stories. Their medal counter was easy to find, half way down the page. The page has several dropdowns at the top for searching medals, sports but none for country, so I go to click on the ‘Country’ column header which is clickable. I click the ‘Country’ header again thinking it will sort the country, nothing happens so I must return to the ctrl+f (command+f MAC) method to find Spain’s result.

Look and Feel

Does the site give you that tingle inside when you look at it? Does it use good purposeful design decisions?

Athens 2004 keeps with its official olympic colors chosen for the games. I like how they have continually matched their style from other marketing, online and offline materials. That really helps establish its brand. I am not as fond with the design of the home page, and I think more could have been done with the header or even the background.

Fox Sports Olympics uses some nice colors, but almost too close to ESPN’s, which was first in choosing that palette. I like some of the shadowing used on the boxes. There are some alignment issues with some the headlines needing more padding around them. I like the flash piece but I wish its style would match the site better. They really don’t have an Athens logo just a heading for the Olympics.

ESPN Olypmics uses some good colors for sports. I like the header graphics for sections created like the Medal Counter graphic. The typeface for the headlines are a good choice—easy to read and look good. Their Athens logo is just okay.

NBC Olympics is very blue, but I think it works. It separates it from the rest of the crowd. I like their Athens logo the best, next to the official logo—which I really like. NBC was the only one without a favicon. It did have the rotating headline graphic, which is a good idea since there are so many sports to follow in the olympics.

After all is said and done, I like ESPN’s design for color and feel but I like the Official Athens site for simplicity. The best logo also goes to the Athens 2004 followed by NBC’s. Fox’s design didn’t impress me really on anything, it was a bit confusing and looked too close to ESPN’s color palette. Not original enough.

Design Competition
Website Score Medal
ESPN Olympics 9.682 GOLD
Athens 2004 9.678 SILVER
NBC Olympics 9.676 BRONZE
Fox Sports Olympics 8.345

Complaints about the scores can be made to the judges. They will be heard if you are loud enough.

Next, there will be a follow-up about what we have learned from this competition.

Comments

Stuart Young said:

well first of all re Athens 2004, I disagree that: "The navigation on the side is easy and simple to follow." There is a very long "laundry-list" of unrelated topics that are un-interesting to most visitors - haven't they ever heard of information architecture and organising the site into sections? Personally I would have had a long list of each sport in the left-hand menu - which the BBC did.

Secondly, the two main design problems for me with the Athens 2004 site were:

  • the reliance on javascript select menu forms for navigation - these were surely confusing and difficult to spot for most users and
  • the lack of ANY feedback or website help feature. I ended up emailing the media team with my complaints about the usability of the site because there was no other feedback mechanism.
I have a whole lot of other complaints about the usability of the official site - I was so annoyed with it at the time - I don't believe that they did any usability testing. The Sydney 2000 site was much better.

cheers

Posted on Sep. 8, 2004 18:05 #

Blake Scarbrough said:

Thanks for the feedback Stuart.

The Athens site now is pointing to the paraolympic games website. So it is the nav is a little different. I do agree that they should use js as the main way to navigate, especially on the paraolypmic website.

Posted on Sep. 10, 2004 13:35 #