Case Study: Designing ShotGeek with a User-Centric Approach

Overview
ShotGeek is a Django-based web application designed to provide NBA enthusiasts with in-depth player and team statistics, tailored to meet the needs of basketball fans who thrive on detailed analysis. At the heart of ShotGeek's development was a user-centric design approach, informed by feedback from early iterations. The final design emphasizes intuitive navigation, visual appeal, and seamless access to the app's core feature: player comparison.

The initial iteration, NoseBleedSection, had limited engagement due to its basic landing page, which only highlighted app features in text form. User feedback revealed that this design failed to emphasize the app’s primary functionality—player comparisons—and users expressed a desire for quicker and more visually appealing access to this feature.

1. Redesigned Landing Page with Direct Comparisons

The revamped landing page in ShotGeek now prominently features two side-by-side player cards. These cards immediately showcase key stats and information, making it clear that direct player comparison is the app's main function. This visual representation ensures that users can see the value of ShotGeek at first glance.

Before (NoseBleedSection): A text-heavy landing page with no immediate access to key features.
After (ShotGeek): A dynamic, visual-first design featuring player comparison cards front and center.

2. Intuitive Search Functionality

To streamline the comparison process, a search bar is positioned above each player card, enabling users to quickly replace players for side-by-side comparisons. This eliminates unnecessary steps and ensures users can easily explore comparisons in real-time.

3. Detailed Player Comparison Page

Above the player cards on the landing page, a button directs users to a more detailed player comparison page. Here, users can:

Compare comprehensive career statistics.
Select specific stat categories to generate graphs that display career trends side-by-side.

The interface on this page is cleaner and more visually engaging compared to the first iteration, using color and layout to guide user attention.

New display with ShotGeek:

4. Improved Individual Player Search and Page

Search Bar Accessibility: In ShotGeek, the search bar is now accessible on any page, ensuring users can look up individual players without needing to navigate to a separate search page.
Player Pages: Redesigned player pages include visually striking player cards, which present a player's career awards, seasonal and playoff stats, and graph-based stat trends in an organized, user-friendly format.

Visual and Functional Improvements

ShotGeek prioritizes a clean and modern design, making effective use of colors to draw attention to key data points. The interface has been refined to reduce clutter, ensuring users can quickly find the information they need without distractions.

Comparison Page: Detailed player cards with clear sections for career and game-specific statistics.
Graph Generation: Interactive graphs allow users to visualize and compare player trends over their careers, a feature absent in the initial version.