The last couple weeks have been heavy into production mode so much less pontificating of late, but here’s an update by way of mock-ups of the visualization application interface.

The Home Page.

This is where the user would first come to the website. They have options to visualize data, socialize (where they might view or upload photos, or make comments on a recent game, etc), or organize their user information or other more administrative-minded tasks.

—user clicks on “VISUALIZE”—

The Visualization Main Page.

This is the home base for all of the statistics tracking and visualization services in the app. The user is presented with a choice of visualizing games, practices, or a more macro-view of season-long data.

—user clicks on “GAMES”—

Game Date-Picker

The user now gets to pick which game they would like to see dynamically visualized. The calendar shows all of the games in colors to indicate whether it was a win, a loss, or has yet to be played.

—user hovers over one of the winning games—

Game Date-Picker: Hover State

To get more details on each game, the user can hover over the game icon. The pop-up tells the user who was playing in that game, the final score, and the top players of the game.

—satisfied it’s the game she wants to see, the user clicks on the game from April 30—

The Game Data Visualization: Goals and Assists

This is the main visualization page for a specific game. The user can view the locations of all the goals and assists throughout the game, and use the time scrubber/scrollbar to view any moment during the game itself. As the user scrubs through the game, goals and assists will appear as they are scored, and the leader board on the right will dynamically change based on the stats at that specific time during the game.

In this iteration, games are denoted by a yellow lacrosse ball with a triangular flag indicating the scoring team. If a line connects the ball and the flag, then the goal was assisted, with the assist originating from the point and direction of the flag. Flags attached directly to the ball indicate unassisted goals.

—the user clicks on Groundballs to see the game leaders—

The Game Data Visualization: Collapsible Statistics Panels

The user can collapse or expand certain statistics, sort data by team or statistic, in order to view as much or as little information as is necessary or desired.

—user wants to watch the game statistics change in real time in order take notes—

Auto-Play Feature

The user can press on the play button to have the game play automatically in real time so that the user can take notes or get a better feel for the rhythm of the game.

—user has all the mid-game info she needs and wants to see the final results—

Skip to the Final Results

When the user is finished with the intermediary data playback, they can simply press the “skip to the end” button to jump the scrubber to the end of the game and view the final game results across all stats.

Coming Soon

I’m currently building out this prototype and will continue to mock up other visualization views to make the system more complete!

Category : Fall 2011 / Process