--- title: Digital product UI direction intro: How the visual principles are applied to the screens of the XSERIES digital product. Covers layout, core components, states, and examples for each main page. updated: 1 Nov 2026 status: Hipotesis --- > [!NOTE] > This page follows the phases and features in [Features & priorities](/strategy/fitur-dan-prioritas/) and the structure in [Information architecture](/strategy/arsitektur-informasi/). It is a direction, not a final design. ## Foundations | Aspect | Decision | |---|---| | Platform | Mobile-first web (PWA). XSERIES's main channel is IG (stories, bio link), so most visits are assumed to come from phones. Check against analytics data after launch | | Mode | Dark as the default ([Principle 1](/visual-direction/prinsip-visual/)) | | Grid | 4 columns (mobile), 8 (tablet), 12 (desktop). Gutter 16 / 24 / 32px | | Radius | 4px for controls, 12px for cards. Sharp corners (0px) for X-style elements | | Spacing | Multiples of 4px | | Elevation | Not shadows but light: a thin red or teal glow behind the active element | ## Navigation The menu order and labels follow [Main navigation](/strategy/arsitektur-informasi/#main-navigation) in Information architecture, with a Baller League-style structure ([ballerleague.uk](https://ballerleague.uk/en/)). On desktop: ```text [XSERIES] XS-3 How to Play Teams Players Archive [Buy tickets] ``` On mobile, look at two things: the ticket button in the header and the four-item bottom bar. The button changes while the event is running. ```viz-wire ## Before the event sub: Header + bottom bar - XSERIES · Buy tickets | nav | Red button `xs-red-strong`, always visible - Page content | block - XS-3 · How to Play · Teams · Menu | bottom | 4-item bottom bar ## During the event sub: Ticket button replaced - XSERIES · Watch live | nav | Buy tickets is replaced by Watch live - Page content | block - XS-3 · How to Play · Teams · Menu | bottom | Bottom bar stays the same ``` - The **Buy tickets** button is always visible in the header (red, `xs-red-strong`). While the event is running, this button is replaced by **Watch live**. - On mobile, the bottom bar has 4 items in menu order: XS-3, How to Play, Teams, and Menu. Menu opens Players, Archive, and the footer links. Tickets stay on the header button. ## Core components | Component | Content | Notes | |---|---|---| | **Player card** | Rank, photo, name, team, stats, sponsor slot | 5:7 ratio, can be flipped. See [Motifs & iconography](/visual-direction/motif-dan-ikonografi/) | | **Game card** | Icon, card name, effect, when it can be used (Q1–Q2 or Q4) | Mint for X Cards, gold for President Cards | | **Match tile** | Two teams, score, status (upcoming / live / FT), cards used | Live status uses a pulsing red dot and a white "LIVE" label on an `xs-red-strong` pill (5.22:1). Do not use `xs-red` text on `xs-graphite` (3.91:1, fails for small text) | | **Bracket** | SF1, SF2, third-place match, final | One component is enough, because there are only 4 matches per edition | | **Team header** | Team color, logo, captain, title history | `--team-color` as a variable | | **Ticket tier** | Tier name, price, section color, GOERS CTA | Colors follow the official seat plan | | **Countdown** | Days, hours, minutes to kickoff | Tabular numbers, display font | | **Sponsor slot** | "presented by" + logo | Present on the player card, game card, MVP | ## Key pages ### Home before the event Read from top to bottom: the section order matches the [Home contents](/strategy/arsitektur-informasi/#home-contents-in-order) in Information architecture, from "when and where" to "what is this", then who plays and how to buy tickets. ```viz-wire ## Home, top part sub: First screen down to the card explainer - XSERIES · Buy tickets | nav - Hero: night arena + XS-3 wordmark | hero | Countdown in days · hours · minutes to kickoff - Buy tickets | cta | Goes to GOERS - What is XSERIES? | cards3 | 5v5 · 24 seconds · Cards, plus a teaser video - Card explainer | block | X Cards carousel, cards can be flipped - XS-3 · How to Play · Teams · Menu | bottom ## Home, bottom part sub: After scrolling - Featured players | strip | Rank A, horizontal cards, swipeable - Teams | cards4 | 4 team cards - Schedule and prices | block | 2-day schedule, tiers, short price list - Latest news | block | Official announcements - Waitlist · Partners | block | Sign up for the next presale, then partner logos - XS-3 · How to Play · Teams · Menu | bottom ``` ### Match Center (match day) The left side is the screen frame, the right side is an example while a match is running. Note that the score stays at the top and every card appears in the timeline. ```viz-wire ## Match Center sub: Frame - Score · time · quarter | score | Sticky, always pinned to the top - Summary · Timeline · Stats | tabs - Card timeline | timeline | Small cards with effect and minute - Watch on YouTube | cta | GOS live, free vs member ``` ```viz-companion home: Lynx Hunters away: Grim Reaper score: 14 – 15 quarter: Q4 clock: 03:41 live: LIVE cta: Watch on YouTube note: **Sample data.** Teams and score are illustrations only. This card timeline is unique to XSERIES ([Benchmark](/research/benchmark-produk-digital/)), because competitors do not show the cards used per minute. Mint = X Card, gold = President Card, white = goal. Red is not used for goals because red already means a negative effect or an opponent's attack ([Card function colors](/visual-direction/palet-warna/#card-function-colors)). - Q4 03' | Triple Goal | Grim Reaper | All goals count 3x until the match ends | pres - Q4 01' | Goal | Lynx Hunters | Score becomes 14–12 | goal - Q2 07' | Golden Boy | Lynx Hunters | 1 player's goal is worth 3, or 6 from the second line | x - Q1 05' | Freeze Goal | Grim Reaper | The goal cannot concede for 2 minutes | x ``` - The score and time are always pinned to the top (sticky). - **Card timeline**: every card used appears as a small card in the timeline, with its effect and minute. This data is unique to XSERIES ([Benchmark](/research/benchmark-produk-digital/)). - The "Watch on YouTube" button goes to the GOS live stream, with an explanation of free vs member. ### Card explainer (signature feature) The three screens below are one flow: tap the card, the card flips, then the effect is demonstrated. ```viz-wire ## 1. Closed sub: One screen per card - Cards | nav - X Cards · President Cards | tabs - Closed card | block | Tap to flip - XS-3 · How to Play · Teams · Menu | bottom ## 2. Flipped sub: Name, icon, effect - Cards | nav - Freeze Goal | block | Icon, card name, effect - When it can be used | tabs | 4-quarter diagram. Q1–Q2 lit up for X Cards - See the effect | cta ## 3. Effect sub: 3–5 second animation - Cards | nav - Mini court | hero | Short animation showing the card's effect - Next card | cta ``` - One screen per card: a closed card, tapped to flip, then a short animation (3–5 seconds) on a mini court that shows its effect. - A "When it can be used" label with a 4-quarter diagram. - This answers the main gap in [Competitor landscape](/research/competitor-landscape/): the Kings League and Baller League rules pages are still static. ## States Five states must be designed for every screen. Note that none of them uses a generic spinner, and errors are not animated. All animation durations live in one table in [Photo & motion](/visual-direction/foto-dan-motion/#motion-character). ```viz-wire ## Loading sub: Not a generic spinner - XSERIES | nav - X fills from mint to red | hero | Loops until done ## Empty sub: No data yet - Players | nav - Closed card | cards3 | "Coming soon" ## Live sub: Red dot + label - ● LIVE · Q2 06:12 | score | Red dot pulses every 1.2 seconds, white "LIVE" label on an `xs-red-strong` pill - Card timeline | timeline ## Active card sub: Flash, then a steady highlight - Score · time | score - Active card | block | 900ms flash in the card's color, then a thin glow that stays while the card is still active ## Error sub: No animation - Schedule | nav - Error message | block | Clear text in Indonesian - Try again | cta ``` ## Accessibility These four notes apply to all screens. Use them as a check during review. ```viz-notes ## Required on all screens tone: mint - Contrast follows the table in [Color palette](/visual-direction/palet-warna/#contrast-check-wcag-22) - Animations respect `prefers-reduced-motion`. Card effects are replaced by a simple fade - Live status and active cards are not marked by color alone, but also by a text label - Touch targets are at least 44 × 44px ``` ## Comparison references - Structure and match centre: [Baller League](https://ballerleague.uk/en/), [Match Centre](https://ballerleague.uk/en/game/214), [Stats](https://ballerleague.uk/en/statistics) - Illustrated rules page: [Kings League rules](https://pages.kingsleague.pro/rules) - The full list is in [Moodboard & references](/visual-direction/moodboard-dan-referensi/) ## Research basis - IG is the main XSERIES channel, with stories and a bio link: [Digital touchpoints](/research/touchpoint-digital/#touchpoint-map). That most visits come from phones is still an assumption ([D3](/research/pertanyaan-terbuka/#q-d3)). - Four matches per edition: [Format & rules](/research/format-dan-aturan/#tournament-format), from [GOERS](https://www.goersapp.com/events/xseries-3--xseries3) - XS-1 champion Lynx Hunters and XS-2 champion Grim Reaper: [Franchise teams](/research/tim/#at-a-glance), from [Lapangbola](https://live.lapangbola.com/tournaments/fixtures/klasemen-x-series-2025) and [Merdeka](https://www.merdeka.com/peristiwa/grim-reaper-taklukkan-nova-titans-lewat-adu-penalti-sabet-gelar-juara-x-series-2-2026-523184-mvk.html) - Card effects in the Match Center example: [Format & rules](/research/format-dan-aturan/#x-cards-quarters-1-and-2), from [Bola.com](https://www.bola.com/indonesia/read/6258652/xseries-2-sajikan-sportainment-5v5-dengan-aturan-unik-dimeriahkan-bintang-nasional-hingga-dunia) - Ticket section colors follow the official seat plan: [XSERIES-3 tickets](/research/tiket-xseries-3/#seat-plan), from [GOERS](https://www.goersapp.com/events/xseries-3--xseries3) - Live on GOS YouTube with full matches for members only: [Social media numbers](/research/angka-media-sosial/#xs-2-highlight-views-on-youtube)