↩ George Murphy

Battle at the Berrics

View Visualization →

Background

I spent much of my 5 years as a researcher presenting information using PowerPoint. I was frustrated by the shortcomings of the slideshow format. First, breaking my narrative into a series of discrete slides forced the audience to retain information from previous slides. Second, in typical "bullet points + graph" slides I noticed it takes much effort for the reader to 'discover' the element in the graph that the bullet point is calling out. I had begun dreaming up an alternative format to present an analysis: a more interactive webpage instead of a slideshow. As a skateboarding fan, I decided to build a visualization explaining a skateboarding competition to try out this approach.

Design Process

Acquiring the Data

When designing visualizations, I've found it most efficient to design using real data. I hired a data entry company to watch all the competition videos and record every trick each athlete did and whether or not they landed it. I then cleaned the data in a spreadsheet.

The Analysis Before the Design

Once I had the data, I began exploring it using SQL and R. Starting the process by writing SQL queries forced me to think of questions the user may want to get answers to (ex. Which tricks were the most difficult?). These questions then formed the outline for my visualization.

Identifying the User

I wanted the interactive to be successful for two very different users. For the curious user unfamiliar with skateboarding, I wanted to provide a fun overview. For the avid skateboard fan, I wanted to surface all the data in an interactive way allowing them to explore more thoroughly. To try and achieve this, I decided to have the lead-in text be aimed at the casual viewer, but have the data be immediately explorable, without having to navigate to a separate tab or view.

Key Design Decisions

Start with the Concrete

I led with a video of an actual match so readers could imagine the reality behind each data point. This was also an opportunity to explain the "timeline" visualization I designed to represent each match. As the video plays, the "timeline" visualization fills out below. By being in sync with the video, the reader sees what events in the match correspond with what events in the visualization.

Persistent System Overview

The analysis consists of three nouns: matches, tricks and skaters. As you scroll down the page, you transition from one noun to the next. I made this system explicit by showing a table of contents in the top right, with a "you are here" indicator that updates as you scroll down.

Object Constancy

One benefit of the single page interface over the slideshow is that the user can see how two different visualizations are linked without having to flip back and forth between slides. I visually linked each graphic through a transition that was triggered by scrolling.

Engage the Viewer in the Analysis

I included the user in my analysis by noting in the headline the transformation I was doing between each step, for example "Diving deeper, we can compare the timeline of each match." and "Let's group these timelines again, this time by trick instead of match".

Details on Demand

Hovering over any of the graphics gave users more details on each datapoint. I designed a scrubbing-style overlay for viewers to see each trick in the timeline visualization. I was very happy with the outcome and felt there was very little friction for getting more details on a datapoint.

A Reward at the End

I wanted to leave a fun surprise for the engaged reader who made it all the way to the end. The moment the champion wins the last battle, my trick icons fall from the top of the screen like confetti.

An Alternative Approach for Mobile

Initially, I designed the visualization only with desktop in mind. Later viewing this on mobile, the scrolling transitions didn't have the same effect and having the videos pop out to full screen broke the nice link between the videos and visualizations. I didn't want to sacrifice these features, so I instead designed a different landing page for mobile, asking them to return on desktop. I also provided a way for them to email themselves a link, which I thought would increase the chances of them returning.




Post-Mortem

Successes

The visualization was very well-received and brought a lot of traffic to my otherwise rarely-visited site. I think the biggest success was the continuous narrative structure and the animations on scroll which enticed the user to continue down the page.

Things to Improve

I noticed when friends visited the site, they scrolled through the beginning much faster than I expected. This meant they missed the intro video and explanation of the timeline visualization. If I were to redesign, I would try to either make a shorter intro or try to block or discourage scrolling until the intro is complete.
Also, I regret not having put event analytics on the page. I included Google Analytics and know the average time on page was almost 4.5mins, but knowing which exact pieces users engaged with would have allowed me to make improvements. In a later project, I included event analytics which allowed me to get a much better understanding of how users experienced the page.

Next Case Study →