Digital product UI direction

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.

Note
This page follows the phases and features in Features & priorities and the structure in Information architecture. It is a direction, not a final design. Wireframes and mockups are made in the design stage (15–30 Nov, see Roadmap).

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)
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

The structure follows Baller League (ballerleague.uk), with a menu adapted for a 2-day event. On desktop:

[X SERIES-3]   Schedule   Teams   Players   Cards   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.

X SERIES-3 · Buy ticketsRed button xs-red-strong, always visible

Page content

Home · Schedule · Cards · Tickets4-item bottom bar

Before the eventHeader + bottom bar

X SERIES-3 · Watch liveBuy tickets is replaced by Watch live

Page content

Home · Schedule · Cards · TicketsBottom bar stays the same

During the eventTicket button replaced

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: Home, Schedule, Cards, Tickets.

Core components

Component	Content	Notes
Player card	Rank, photo, name, team, stats, sponsor slot	5:7 ratio, can be flipped. See Motifs & iconography
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 follows the fan's questions, from "when and where" to "what is this" and then "buy tickets".

X SERIES-3 · Buy tickets

Hero: night arena + XS-3 wordmarkCountdown in days · hours · minutes to kickoff

Buy ticketsGoes to GOERS

Star player stripHorizontal cards, swipeable

What is XSERIES?5v5 · 24 seconds · Cards

Home · Schedule · Cards · Tickets

Home, top partFirst screen down to "What is XSERIES?"

Card explainerInteractive, cards can be flipped

Teams4 team cards

TicketsTiers + seat map

Buy tickets

ArchiveXS-1 champion Lynx Hunters · XS-2 champion Grim Reaper

Home · Schedule · Cards · Tickets

Home, bottom partAfter scrolling

Live match companion (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.

Score · time · quarterSticky, always pinned to the top

Summary · Timeline · Stats

Card timelineSmall cards with effect and minute

Watch on YouTubeGOS live, free vs member

Live match companionFrame

● LIVE

Lynx Hunters14 – 15Grim Reaper

Q4 · 03:41

Q4 03'
Triple GoalGrim ReaperAll goals count 3x until the match ends
Q4 01'
GoalLynx HuntersScore becomes 14–12
Q2 07'
Golden BoyLynx Hunters1 player's goal is worth 3, or 6 from the second line
Q1 05'
Freeze GoalGrim ReaperThe goal cannot concede for 2 minutes

Watch on YouTube

Sample data. Teams and score are illustrations only. This card timeline is unique to XSERIES (Benchmark), 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).

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).
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.

Cards

X Cards · President Cards

Closed cardTap to flip

Home · Schedule · Cards · Tickets

1. ClosedOne screen per card

Cards

Freeze GoalIcon, card name, effect

When it can be used4-quarter diagram. Q1–Q2 lit up for X Cards

See the effect

2. FlippedName, icon, effect

Cards

Mini courtShort animation showing the card's effect

Next card

3. Effect3–5 second animation

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: 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.

X SERIES-3

X fills from mint to redLoops until done

LoadingNot a generic spinner

Players

Closed card"Coming soon"

EmptyNo data yet

● LIVE · Q2 06:12Red dot pulses every 1.2 seconds, white "LIVE" label on an xs-red-strong pill

Card timeline

LiveRed dot + label

Score · time

Active card900ms flash in the card's color, then a thin glow that stays while the card is still active

Active cardFlash, then a steady highlight

Schedule

Error messageClear text in Indonesian

Try again

ErrorNo animation

Accessibility

These four notes apply to all screens. Use them as a check during review.

Required on all screens4

Contrast follows the table in Color palette

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, Match Centre, Stats
Illustrated rules page: Kings League rules
The full list is in Moodboard & references

Research basis

IG is the main XSERIES channel, with stories and a bio link: Digital touchpoints. That most visits come from phones is still an assumption (IG follower demographics).
Four matches per edition: Format & rules, from GOERS
XS-1 champion Lynx Hunters and XS-2 champion Grim Reaper: Franchise teams, from Lapangbola and Merdeka
Card effects in the live match companion example: Format & rules, from Bola.com
Ticket section colors follow the official seat plan: XSERIES-3 tickets, from GOERS
Live on GOS YouTube with full matches for members only: Social media numbers

Foundations

Navigation

Core components

Key pages

Home before the event

Live match companion (match day)

Card explainer (signature feature)

States

Accessibility

Comparison references

Research basis

How this page connects

Builds on 16

Used by 10