Try it out here!
BACKGROUND
Prompt
The NBA is the where the best play and compete with each other to find out who is the best. Invested fans and sports analysts alike educate themselves to engage with their friends and communities to often discuss who is the best, or who is "clutch."
Goal
In an area of subjective opinions and emotional discussion, I want to add to the glossary of information by providing some objective facts to help determine how clutch a player is:
How might we make discussions of NBA player's "clutchness" more informative?
Project Process
EMPATHIZE
Design Research
To understand more of the space, it was important to learn about the existing space of content that is already available surrounding the topic. There are numerous online communities and resources that share information about clutch players.
Bleacher Report - NBA Playoff History Clutch Meter, Adam Fromal
- A calculative based approach to filter player rankings through objective statistics
- There is higher importance placed on playoff based metrics. Playoff circumstances are more impactful between the players, teams, and community evaluation.
- via 82games, Roland Beech "what exactly do we want to define as a game winning shot? If we make it too restrictive, as in a real last second shot at the buzzer, then you are dealing with tiny, tiny sample sizes."
r/NBA - "Kobe vs Lebron in Clutch Situations" July 5 2017
- Multiple filter categories were created to compare different situations: statistical playoff averages, finals games during the last 2, and 5 minutes of game time.
- Once again, the emphasis is on the playoffs. The final stretch of the postseason is where major evaluations of player performance are done.
r/NBA - "Clutch: What it is and where trying to measure it goes wrong" Jan 28 2015
- Clutch is an intangible quality in which the fans try to evaluate through a player's stats and impact.
- One of the troubles in quantifying an intangible value is the presentation of the context of the information. Data can be manipulated and interpreted to shape a narrative
Affinity Map
What has been revealed through the research is the complexity of factors that go into evaluating a player's clutch. Beyond just sinking a shot that wins a game, there are huge cultural impacts and audience perceptions that fuel personal debates. I knew how opinionated this topic can get, but this reaffirmed my assumptions and the importance to provide some form of objective resource.
DEFINE
Understanding the User
Through our design research, we can identify 3 user groups that would interact with this project goal of providing an additional resource to the glossary of basketball information. Additionally, we can outline how users can achieve their goal using this project based on how invested they are in the NBA.
Casuals
- audiences who enjoy watching basketball games without being too invested into the culture. These individuals may have a favourite player or team, but don't pay too much attention outside of televised games.
Enthusiasts
- audiences who like to look beyond the game, think about the other aspects of the game, and relevant news from sports outlets. The NBA is something to always look forward to and can be a part of their community and culture.
Superfans
- audiences who are heavily invested in players and team news and information. They should understand the major aspects of current and past basketball history and the cultural impacts of the sport individually, locally, and globally.
Persona
User Journey Map
Chris' scenario was sparked by the events of the basketball game. The buzzer beater and the player who scored the winning field goal became the starting point. With an all-in-one platform for buzzer beater shots, it is important to have multiple filters to refine the search. While websites like basketball-reference.com provide all relevant information, it isn't an interactive or fun experience going through the content. While the end goal to understand more of basketball, the process should be enjoyable to make the learning meaningful.
DanB's parsed dataset had multiple variables which describe the shot's context. To curate the buzzer beater narrative, filters curated the thousands of entries into the hundreds. The parameters for my definition of a game winning shot attempt visualization are:
IDEATE
Dataset Collection
As part of our process, we also needed to find an appropriate open-source dataset for us to visualize the information. Alongside crafting the user narrative and experience, I also looked for usable datasets to compliment and complete the process.
One resource that was suggested for us to search Kaggle. There I found the NBA shot logs dataset created by user DanB. It was a collection of all shots taken from the 2014-2015 NBA regular season. While incomplete and not focused on playoff games, it would be sufficient enough to share across the project goal.
DanB's parsed dataset had multiple variables which describe the shot's context. To curate the buzzer beater narrative, filters curated the thousands of entries into the hundreds. The parameters for my definition of a game winning shot attempt visualization are:
- 5 or less seconds left
- 4th quarter only no overtime
Using the score_margin variable, I would use it to confirm that only game winning attempts counted. The margin of score acts as a filter to ensure that a data point would be won or lost through a final shot.
Sitemap
With a fairly linear information architecture and focused user flow, all end goals are presented like a single page web app. While it's simplified, users should have a clear understanding of the functionality that is available with a minimalist web app prototype.
Javascript Library
I used this opportunity to express a creative front-end solution. One of the thing that gravitated me to interaction design as a whole was the digital expression. Anime.js is a animation library that can create complex and interactive digital experiences. When I was looking for cool libraries to explore prior to the project, this became the top of my list.
How to Build a Download Button Microinteraction - Luis Manuel
PROTOTYPE
Wireframes
The wireframes included a tooltip function alongside the player content on the right. Clicking on a shot marker would highlight the corresponding context information. From a front-end development standpoint, I would know the basic process to implement tooltips but the scope of making everything responsive will take too much time.
To visualize the information of how it should be presented, a low fidelity presentation of the shotchart was created. The initial idea had all of the information beside the data points. With a large area for real estate it wouldn't be a problem but even on desktops it was too cluttered.
Moving onto the actual implementation, having a two column grid would be better for readability. Other aspects were removed in order to make the space less crowded on the actual visualization and would be shifted over.
In order to make the context of the shot clear with the visual design, all of the court markings and shot markers were scaled down to be 1-to-1 to the real thing. All shot distances were cross reference with existing NBA game databases to ensure accuracy.
My Takeaways
Changes: In-depth player columnWhile the column is sufficient as is, there were other parameters I would have liked to have added like who was defending the shot attempt. More features on the player column like video and stat archive cross-references would add more context to the shots. A fully integrated database like system would be really cool.
Data is easier interpret through visual communication designBar graphs and pie charts are examples of proven tools for data visualizations, but taking it a step further to combine user experience and human centered design principles adds that "made for you quality". Those interactions and functions specifically designed for a audience elevate the impact of a product.
