ICE Project
Product Redesign

My Role

I provided design direction for the redesign of the STATS LLC’s ICE Basketball platform, a scouting and data analysis tool used by NBA and NCAA teams.

Product Overview

Interactive Collaborative Evaluation (ICE) is a scouting and data analysis tool currently in use by NBA teams. I have served as the creative lead for this project for the past few years. Recently, a deal with the NBA has allowed this application to be adopted by all 30 teams.

The BK ICE project was built from scratch and at the beginning there was little data that had been integrated into the application. With the lack of data and information, stakeholders requested the application to have a very heavy and skeumorphic design to appeal to early adopters. As I took over as lead designer on the project, I pushed for a redesign to improve the visual aesthetic and performance.

Original Design:
Redesign Concept:

Analysis

As a redesign became more of a possibility, I began experimenting with CSS only changes. As I became more and more familiar with the application's code structure, it became evident that there would need to also be some structural changes to improve usability and performance. Some of the initial requirements were as follows:

High-Level Acceptance Criteria
  • Site performance does not get worse (speed)
  • Navbar highlights which tab the user is on in a more obvious fashion
  • Ability to seamlessly add new features and functionality

Performance Improvement

I began the process of restructuring elements by creating sketches of a general layout of elements. There were a lot of shared elements, but a lot of unique elements to consider. The BK ICE application has a lot of filters and search options. The original design of dropdowns and search controls were built using a jQuery library, but as the application grew the jQuery became very troublesome. Stakeholders requested that the application keep the same process of accessing information, but I was able to convince them of creating HTML/CSS dropdowns and search controls. The new dropdowns and search controls do not have the prior image dependency and are displayed immediately upon page load.

Design Improvement

The prior design of the application included a lot of image dependencies, for example: the basketball court background, images for the button designs, title bar images, etc. Instead of having as many image dependencies in the new design I utilized a flat design approach. Using CSS gradients and styles, I was able to emulate some of the same treatments that were in the old design. With the new CSS styles, the aesthetic of the page can be immediately loaded and does not require as large of files.

Bits & Pieces

Global Navigation
The previous application header containing navigational elements was unnecessarily large, resulting in the content of the page being pushed down below further than it needs to be. The application also uses a way of saving selected players in a similar way a shopping cart works on ecommerce sites, which also pushed content down. In the redesign of the header, I proposed moving this information into an easily accessible dropdown in the header. I also removed elements that were not being utilized very frequently and included them in the newly created dropdown. To cater to tablet users, I kept the touch area of the navigational elements to the industry standard 44 pixels in height/width.

New Navigation Concept:

New Feature - Video
One of the biggest new features that was brought to the BK ICE project was the inclusion of video analysis. The user is allowed to filter results of specific athletes, specific statistics and analytics, and select a date range to see the corresponding videos recorded by STATS LLC's cameras and the official NBA videos.

Video Feature Mock:
Screenshot after implementation:

Mocks and Concepts

Using a wide array of tools, including Adobe CS, Sketch, Invision, Axure, these are a few of the various mocks and conceptual visuals for this project.

  • Basketball Dashboard
  • Football Locker
  • Football Evaluation
  • Football Report Builder
  • Report Builder
Report Builder

A quick example of a clickable prototype can be found here:

View clickthrough prototype!

Deliverables

Using a wide array of tools, including Adobe CS, Sketch, Invision, Axure, these are a few of the various deliverables for this project.

  • Final Implementation (Video):

  • Minnesota Timberwolves Dashboard:

  • Dallas Mavericks Dashboard:

Summary

For this redesign, I drove the design direction and acted as the lead designer, handling all CSS, HTML, and JavaScript changes. I was in constant communication with developers while they also did performance updates so we could collaborate without stepping on each others toes. While working in an agile development environment with sprints lasting 3 weeks, the entire redesign process lasted nearly 3 sprints.