This is the only time during the year when I care about College Basketball. I’m drawn in by the possibility of upsets, of David getting a shot at Goliath. But more than that, I’m drawn in by the bracket.

Growing up I spent lots of time around wrestling and football tournaments, both as a spectator and as an athlete. At wrestling tournaments the champion takes home a medal and the big poster-board size bracket. I never won a wrestling tournament, but if I had (insert Uncle Rico joke here) I doubt that the medal would have meant as much to me as the bracket. The medal is abstract because it only represents the final result, where the bracket is specific because it represents a complete history of the tournament experience by including the names and final scores of every opponent.

I’m also really into bracket design. I like how the precision and order of a bracket layout collides with the utter chaos that ensues as a tournament unfolds. As a kid I would hand-draw video game tournament brackets for my friends, and a couple years ago I got the chance to design a bracket for a sports social network.

We worked really hard to make our bracket design:

Fast to fill out – our entire bracket fits on a single 1024×768 screen so there’s no paging or scrolling. Also, a site visitor doesn’t need to log in before making selections – this makes it easier to convert new visitors into site members.

Visually interesting – we gave our bracket a hardwood background and, like the key and sidelines of a basketball court, we used different wood colors to distinguish between areas of the page (branding, navigation, scores, prizes, tournament round titles, bracket).

Easy to interpret - there was quite a bit of debate on this point. When designing a bracket, you need to provide visual states that answer the following:

• Before a game’s result is known – which team was picked?
• Before a game’s result is known – which team was not picked?
• After a game’s result is known – was the pick correct or incorrect?
• For the next round – is one of the teams in the matchup already eliminated from the tournament (ie. incorrect pick from the previous round)?

My position was that the MOST important thing with a bracket is to answer the question, “How may correct vs. incorrect picks did I have this round?” So, the first design of the bracket used color cues and icons to give a site member an immediate, qualitative sense of how well he/she did in a given round:

• Gold with an Arrow Icon: before a game’s result is known, team that was picked.
• Beige with No Icon: before a game’s result is known, team that was not picked.
• Green with a Checkmark Icon: after a game’s result is known, the pick was correct.
• Red with an X Icon: after a game’s result is known, the pick was incorrect.
• Beige or Gold with a Strikethrough: the team in the matchup was eliminated in a previous round.

Our client didn’t like the use of color to emphasize correct vs. incorrect picks, so we went with this approach:

• Gold with an Arrow Icon: before a game’s result is known, team that was picked.
• Beige with No Icon: before a game’s result is known, team that was not picked.
• Gold with a Checkmark Icon: after a game’s result is known, the pick was correct.
• Gold with a Strikethrough: after a game’s result is known, the pick was incorrect.
• Beige or Gold with a Strikethrough: the team in the matchup was eliminated in a previous round.

What we ended up with was fine, but I was a little disappointed; my biggest complaint about the brackets I’ve used at ESPN and CBS Sportsline over the years is that they don’t make it easy/fast enough to get the info I care about the most – for a given round, did I get my picks mostly right or mostly wrong? I thought our solution with solid, bold colors and icons provided the clarity that the Worldwide Leader and others were missing.