Overview
This documentation describes the updated UI design and management of matchup cards presented in the lower half of the Game Page and Player Page in mobile apps. These cards offer an interactive, expandable experience and display dynamic details through various game or match states—Pre, Live, and Post. Users can explore key head-to-head matchups, with clear distinction between Main Cards and Prelim Cards.
Supported Platforms
iOS Mobile & Tablet App
Android Mobile & Tablet App
CMS Configuration
In the CMS, admins can manage:
Curation and Ordering
Matchup Cards are curated and sequenced in the CMS for both Main and Prelim sections.
Admins configure:
Main Cards: Featured matchups (e.g., headline games).
Prelim Cards: Preliminary matchups.
For Player Pages, matchup cards are listed chronologically in the ‘MATCHES” tab (like FIGHTS tab), most recent first, without the main/prelim separation.
Controls
Sequencing: Manage order of cards in each section (manual drag-and-drop or ordering).
Labels: Configure labels for Pre, Live, and Post states, including font, color, and content.
Section and Card Labels: Set text, font style, and colors.
CTA Buttons: Customize label text, font, icon, and button colors for each game state.
Thumbnails: Upload images combining player headshots with country flags and names.
Page Styling: Adjust background color and default display settings.
End-User Experience
Entry Points & Navigation
Users access matchup cards after landing on:
Game Page
Player Page
Cards are split into Main and Prelim sections on Game Page, and displayed together in chronological order on Player Page.
Matchup Card States
Pre State
Displays:
Match/Fight Title
Player headshots on each side with country flag backgrounds
Central player vs. player detail, broadcaster info
Divider between sections
Score or ranking for each player
Distinct CTA button (colored, labeled, with icon)
Expanded View:
Shows player stats under “TALE OF THE TAPE” section, with a “CLOSE” CTA and X icon.
Live State
Structure as Pre state plus:
“LIVE” state label above player vs. player info
Expanded View:
Adds “SMARTCAGE” or live game statistics by round or segment, alongside “TALE OF THE TAPE”.
Post State
Winner’s headshot highlighted (red border and crown), winner’s name in red
Result shown; losing player’s image grayed out.
Expanded View:
Combines “SMARTCAGE” (full stats breakdown) and “TALE OF THE TAPE”.
Interactivity
Cards are expandable and collapsible, revealing more detailed game and player stats when tapped.
Clicking on a player’s headshot (collapsed or expanded view) navigates to their dedicated Player Page.
CTA buttons reflect current match state and can trigger context-specific actions (e.g., follow, add to watchlist, engage).
Ordering and Visibility
On Player Pages, all related matchup cards (games, matches, etc.) appear in the “MATCHES” tab in chronological order (latest first).
Best Practices
Use high-quality visuals for player headshots and flag backgrounds for clarity and engagement.
Maintain accurate card sequencing in the CMS to match event order.
Adapt terminology and visuals to suit the specific sport and player roles involved.