CNN Delegate Tracker

A few days of work, delivered 5 months ago, a lot of waiting , and the delegate tracker I did for CNN has finally seen the light of day

Democrate Delegates
Republican Delegates

The module allows you to view a graphical representation of the delegate “race” between candidates for either party. I’m pretty big on usability and information display, and I think it was a little tricky from an informational standpoint, since the way delegates are gained, lost, and solidified over time. In order to make it clear to the user, only the delegates that were considered solid were used as plot points. The “unsure” delegates are listed in the mouse overs. So overall I think the information is decently portrayed.

In retrospect, one criticism I have is the iconography used. All of the candidates are represented by their parties mascot (donkey or elephant). This doesn’t make sense unless you are comparing 2 entities of different parties. A better icon for the graph would have been an image of the candidate, since they are the entity that is physically in the race. Another criticism is the actual style guide of interface elements (up, over, disabled states). Needless to say, the designer working on the project had an issue with it too. A lot of the elements look disabled when they are selected, enabled when disabled, etc. All that said, I think the module turned out great, but I think the taste is sometimes when all the details match up.

One thing we did do to jazz up the module with a bit of flair was to add the ability to scale the graph and animating the icons from point to point. Like with design, it’s sometimes the little things that make and application more pleasurable and fun to use.

Check it out, let me know what you think, and remember to pay attention to the details on your projects, it all adds up.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">