NBA App Data Visualisation Redesign

Team

Individual Project
• Research
• Design and Prototype

Duration

4 weeks

Tools

Adobe XD, Figma


Project Overview

NBA has the highest standard of competition and best players in the world. People expect to see the game result and analysis on the NBA app.

Opportunity

Surprisingly people use ESPN and other platforms for basketball records and stats. The project is to find out an intuitive way to engage basketball fan.

GAME SUMMARY

Goal:
• Engage users to the game trend.
• Encourage users to follow the star performers.

Suggestion:
• Change banner background to a bright backdrop
• Implement trend graph along with box score so users can understand the game movement easily.
• Compare stats leaders in each team and maintain a visual hierarchy using colours.

BOX SCORE

Goal:
• Improve the User Interface in a more intuitive visual solution.

Suggestion:
• Swiping tabs instead of scrolling bars.
• On the stats table, the background used saturation of the team colours so they don’t take away attention from the main CTA button.

“Scrolling bar is annoying.”

A NBA App User

PLAYER PROFILE

Goal:
• Users can understand the player better and save space from the original grid layout.

Suggestion:
• A new section of awards to show player’s career milestones.
• Changed to parallel layout and put season performance under the profile.

TEAM PROFILE

Goal:
• Maintain reusable components for development.
• Align conceptual and mental model.

Suggestion:
• Modular design on the layout. Keep the like button on the right hand side for usability and localisation.
• Visualise player influence using PER data with fire icon. Players avatars to let users understand the players better. Inspiration from game NBA 2K and football team formation.

TEAM STATISTIC

Goal:
• Clarify data jargons.
• Introduce star players of the team.
• Establish a clean and easy way for advanced data search.

Suggestion:
• Implement team stats leader.
• Combine year and season in the search filter.
• Explanation pop-ups.

TEAM COMPARE

Goal:
• An easy way to understand a team performance in both defensive and offensive way.

Suggestion:
•Impose rating charts. Users can see more by clicking compare to check out detailed quantitative data.