USER EXPERIENCE DESIGNER

SLS Data Visualization

OVERVIEW

Since its beginning in 2010, Street League has set the new standard for arena based, street skateboarding competitions. With its increase in coverage and popularity, thousands of fans actively track statistics about their favorite athletes. Unlike other sports, Street League lacks online interactive content.

 

Successful data visualization allows users to digest large amounts of information in a concise, intuitive manner through visual graphics, charts, and diagrams. Adding interactivity to data increases user engagement and ultimately improves their understanding of trends and patterns within a large amount of data.

 

To view full project brief click the button below.

Project Brief

Web  •  Interactive Data  • Motion Graphics  •  UI/UX

IDENTIFICATION

01.

Data Overview

Motivation

This data visualization is the culmination of statistics gathered from the 2010 to 2015 Street League Skateboarding contest tours. Key data categories included athletes' contest earnings, rankings, medals, and scores from each contest stop of the past five years.

At a high level, the purpose of visualizing five years of Street League Skateboarding is to highlight the expansion of arena-based, street Skateboarding contests. Specifically, how this new contest standard created a scale which identifies trends in athletes careers.

Target Audience

Data Sources

The target audience and user of the web based data visualization would be sports and action sports enthusiasts between the ages of 15 and 20. Many of which are viewers of networks such as ESPN, Fox SPorts 1, and others who broadcast similar contests such as X-Games, Dew Tour, Tampa Pro, and more.

The following data was gathered from the following sources:

  • www.StreetLeague.com
  • Wikipedia
  • ESPN.com

UNDERSTANDING DATA

02.

Online sources supplied tables for each tour stop and listed the participating athletes in descending order based on rank and score. With the intention highlight trends more clearly, and visualize the concept, the data was used for reference. As a result, only select data points and athletes were accounted for in the visualization. With a large data set it is important to begin to group data into the categories to make trends easier to identify and begin to create a hierarchy of information that supports a narrative found within the data. The following are the categories of data attributes that will be used:

Data Attributes

  • Total Score
  • Run Section Score
  • Best Trick Score
  • Medals
  • 9-Club tricks
  • League Ranking

DETERMINING SCOPE

03.

IDENTIFYING TRENDS

After looking at each Street League athletes' statistics over the past four years a couple trends quickly became apparent. Specifically, taking a look at Nyjah Huston's statistics on the Street League Website revealed his dominance within the league. He leads the league in number of total and consecutive medals won, earnings, ranking, and tricks scored over a 9.0. In the past 2015 season he won 8 of 12 stops of the tour and earned over $1.3 Million Dollars. This would be the final narrative and focus of the final visualization.

EXPLORING SOLUTIONS

04.

Sketches

After determining that the visualization's narrative will be focused on Nyjah Huston's gold medal streak, it is now possible to begin sketching possible solutions. I began experimenting with placing color coded data bubbles representing medals along both the X and Y axis with one axis being time and the other total score.

First Wireframes

Early high fidelity wireframes allowed me to continue experimenting with using time as a major axis and a way to navigate between what data is being displayed. Size of bubbles represented the amount of medals or total score earned. This method proved to be difficult as there were too many factors to include in one graph. The solution would be to incorporate a level of interactivity that would act as progressive disclosure to limit the information on the screen. The new concept below reflects this design change to a stacked bar graph.

FINAL DESIGN DIRECTION

04.

Animated Prototype