Overview
The Roster Page offers users a flexible, filterable interface to browse, search, and learn more about players within the app. Players are grouped and displayed according to various filters such as franchise, position, weight class, and more—configurable for any sport. The design supports powerful preview, navigation, and search experiences through both preset carousels and dynamic filtering.
CMS Configuration
Access the Roster Page Settings
Navigate to App CMS > Template > Template Builder.
Search and select the Roster Page from the available pages.
Configure Page Modules and Appearance
Module 1: VL tray with filters
Add dropdowns for relevant filters:
Any number or type of filters (e.g., position, league, division) may be configured. Example : Franchise, Weight class, country etc.
Enable multi-select for flexible filtering.
Configure dropdown labels, options, fonts, and background color.
Module 2: VL tray
Choose layout (vertical stack, horizontal tray, or grid).
Set tray/module title, font styling, and background color.
Determine order and number of featured players.
Configure "Show More" CTA if additional players should be revealed beyond initially loaded items.
Featured content can be programmatically generated or manually curated
End User Experience
Entry Points
Footer navigation: Tap the "Players" icon.
Side/menu navigation: Select "Player Roster."
Homepage module: Choose the "Roster" option where available.
Default Roster Page View
Users are presented with:
A search-style field at the top (redirects to the Search Page when tapped).
One or more dropdown filters (e.g., franchise, weight class, position, league) supporting multi-selection.
A configurable list (vertical, horizontal, or grid) of featured player cards below the filters.
Each card shows:
Player headshot with country flag, key metadata (e.g., weight class, team, W/L/D record).
Player cards are dynamically updated based on filter selections.
A tray/module heading and "Show More" CTA (if enabled) lets users access a wider list.
Filtering and Resetting
Selecting dropdowns lets users filter by multiple attributes at once.
Each filter includes its own “RESET” option, allowing users to clear that specific filter while retaining the others.
Once filtered, only players matching all active criteria appear in the list.
Clearing all filters reloads the complete, unfiltered roster view.
Player Detail Navigation
Tapping/clicking any player card takes the user to the detailed Player Page, where further information, stats, and actions (e.g., follow, share) are available.
Best Practices
Use high-quality player images with country flags for visual clarity and recognition.
Adjust filter and layout options in the CMS to best reflect the needs of each sport or league.
Regularly review and update the featured/curated players in the tray for maximum engagement.