The Design Of the Vancouver 2010 Olympics Website

olympicgames

As you probably know, the Vancouver 2010 Olympics are just over a week away. If you take a walk around the city, you can see the beautiful venues and locations. You'll also see the 2010 Olympics logo on just about anything. Another huge part of their branding is their website, Vancouver2010.com.

I came across the Vancouver 2010 Olympics website, and after staring at the nice colour scheme for a minute, I also came up with a few ways that it could be improved even more.

A good website is very important for just about any organization or event. In this post I'll talk about the good and the bad of the 2010 Olympics website.

The Home Page

Of course, the first thing to look at is the home page. It's the first page of the site that I saw, so it gives me a first impression of the site, and what to expect from it.

Vancouver 2010 Olympics Website

Upon loading the site in my browser, the first thing I notice is the use of colour. It is a very nice, colourful design, with mostly blues and greens, with a few nice highlights in some sections with orange and red.

The second thing that I see is the navigation. The events are all listed near the top of the page, in alphabetical order, with nice little icons. One thing that looks a bit out of place is the "Home" link, which is right next to the list of events. I think that could have gone in the navigation menu just below it.

Below the list of events is what I would call the main navigation. Some may disagree, because it isn't exactly clear what the "main navigation" is.

Top navigation

You'll notice that the site is very cluttered, with the only real whitespace being used in the 20 pixel space between columns. I really believe that they could have added more spacing between elements of the page, to avoid the whole cluttered look.

The logo doesn't seem to have too much importance in the design, being barely even 80 pixels wide. But it doesn't really need to be as important, because other features of the page also help to identify what this website is about.

A nice feature of the design is the background illustration of a person holding a torch, on the right-hand side of the page. It just looks a bit strangely cut off under the main container. I think that they could have pushed it to the right a bit more to avoid that awkwardness. It would also look less uncomfortable to have the image cut off by the right side of the browser window, because it simply looks more natural.

Alignment

Alignment of boxes

The home page is generally arranged in a type of three-column layout, giving some sense of alignment. However, I think it would have been a good idea for them to make an actual grid, to make it look more organized.

The Footer

When you reach the bottom of the site, you'll come across a huge sea of nothing but white. And I do not count that as whitespace, because it is just so far down, and doesn't provide any actually useful separation from other sections of the page.

Continuing down, you'll see another illustration of a guy holding a torch, right below the Bell logo.

Even further under that, you'll find some "Useful Links". This section is not very useful, with cluttered lists of links that I simply cannot scan through. At least there are headings, though. I'd say it's more of a way to help search engines to crawl through their site.

Use of Flash

Still not loaded

I'm actually surprised at how Flash is used in this design. On the home page, you can see featured content box, powered by Flash. I don't see why they chose to use Flash for that, as they could have done the exact same thing with JavaScript, with fewer accessibility problems.

The Olympic Torch Relay Interactive Map seems to be powered by Flash, however after waiting for a long time, it would not load. I just got to stare at a greyed-out map with a spinning circle over it.

Readability

The pages with the actual content have very poor readability. I just went to one news article and had a very tough time reading through it.

The most obvious problem with readability is that the font size is extremely tiny, which is simply unforgivable, in my opinion.

There could also be more contrast with the colour of the text and the background, simply by using a slightly darker shade of grey. More line spacing could be added as well, to help improve readability.

The hierarchy of the text is quite poor as well, with subheadings the exact same size as the main body text, except bold. I can't tell if one section is more important than the other, or if it's just a point that's being emphasized.

Just a Few More Suggestions

  • The text in the header "With Glowing Hearts" is not clickable to go to the home page. I know it's not a logo, but it looks like one, and many users will mistake it as a logo and try clicking on it and expect to go to the home page.
  • If you go to the "Tickets" page, only two columns are filled, with the third completely empty. I'm not saying that they should clutter up the design even more, but that they could increase the width and spacing of the two main columns to fill up the remaining space.
  • 272 validation errors. It's not a huge deal, and I'm probably being a bit picky, but it could be helpful to try to reduce that number a bit. If not, at least don't use XHTML 1.0 Strict for your site. There are only 55 errors when validating as HTML 5.

Conclusion

The Vancouver 2010 Olympics website has an overall nice design, with just a few places with room for improvement. What do you like about this site, and would you suggest any more improvements?

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

14 Comments

  1. February 1, 2010

    I really enjoyed this critique of the Olympics site. I think you are right on with your assessment and after going to the site myself I felt the exact same way.

    Keep up the good work with these posts. They are really useful and interesting.

    • February 2, 2010

      Isn't this review of site, which whole world will see, one hell of an innovative idea? Loved it!

    • February 2, 2010

      I'm glad that both of you liked it. Thanks for your comments!

  2. February 2, 2010

    The first thing that I noticed was the fact that everything was so cluttered. Love the color scheme, and I think you are right in each aspect of your review. Somehow it feels like it was designed in a hurry.

  3. February 5, 2010

    Enjoyed the analysis of the website from a rather technical standpoint. A business magazine used to publish the best web sites once a year.
    They evaluated several categories and of course it was subjective. I found it very helpful. We need a rating system like Starch used to do for magazines. The point about font size and the ability to read it is very well taken. Enjoyed the piece.

  4. February 5, 2010

    I actually looked at this website a few weeks ago - same thing. The first thing that came to mind was that it looks a bit too busy in cluttered. I think the icons in the menu could have been simplified - perhaps light on dark blue only background and not the icon in a blog. I agree 100% on the logo. The home link could be a lot smaller and the logo bigger that should link to the home page anyway. Thanks for the post!

  5. Steve Nye-eve
    February 5, 2010

    Sounds like you have too much time on your hands. Did you notice the ghosted "Tech-Support" link in the lower right hand corner...?

  6. Linda
    February 21, 2010

    Thanks for your insightful analysis. I totally agree that the site is cluttered with a lot of information, and a good use of grid system and spacing will significantly improve the usability. Have you checked out the official store site? It's quite lovely and much more organized. (Well, they have to because it's place to make $. ;) I wanna say that I love the color scheme and illustrations. I am a sucker for both elements.

  7. shinytwinkie
    February 26, 2010

    Whatever dude!I The Vancouver2010 site an example of a truly innovative & amazing website—well designed and cohesive, easy to navigate, effective branding and just sheer genius in terms of structure & organizing so much information which is updated live, real time.

    You think you could have done better? Really?

    • February 26, 2010

      Don't get me wrong, it's a very nice website. But no matter what, there is always room for improvement. If you immediately assume that everything is perfect right away, you will never get anywhere.

      And I never said I could do better. These were just some things that could be improved. Are some of them picky? Sure. But it's the details like these that people notice, and can have a huge effect on the overall experience of the site. I'm guessing from your comment that you never tried reading a news article on their website.

      Now move on and quit simply looking for things to complain about.

  8. Wayne
    May 19, 2010

    Great article. It's such a huge site that it obviously suffered from too many cooks in the kitchen. Massive challenge to manage that much content. The nav is pretty well done considering. Some excellent backend tech savvy, but from a design stand point an epic fail.
    Overall I hoped for a little something in the way of innovation. It branded Vanoc well, but at the complete disregard for the Olympics and the international community they were hosting. Pretty colours aside, it looks like the classified ads in the newspaper.
    The most frequent comment I heard was that people landed on the home page and didn't venture in because they were overwhelmed by the clutter.

  9. Joana
    July 13, 2010

    Hey,

    just wanted to add that the illustration u talked about is always changing...its not just some figure with a torch.

    besides that, i agree with the most u said. For me what stands out (in a negative way) is the size of the font and the clutter. Love the color scheme and the illustrations and... i actually like where the "Home" button is, i just think that the icon is not the right one..and it should be centered with the logo.

    my 2 cents*

  10. November 29, 2010

    There is always room for improvement. That doesn't mean that you do not like did. You just wish to change some things.

Trackbacks/Pingbacks