Role : Product Designer (UX Auditor) · Timeline : 1 week · Platform : Mobile (Web)
High-Density Real-Time Data Architecture: Optimizing Live Mobile Card Patterns for Speed and Decision Accuracy
Case Study Focus: Mobile Viewport Optimization, Pre-Conscious Visual Signals, and High-Volume Data Scanning (Applicable to Financial Trading, Logistics, and Live Enterprise Monitoring Systems).
THE PROBLEM
During high-volume live match windows, users make time-critical decisions at extreme scroll speeds. The existing mobile bet card architecture failed to establish rapid visual hierarchy:
THE GOAL
Re-engineer the core live match component to maximize vertical viewport density and scan speed while establishing pre-conscious visual signals that differentiate live matches from upcoming games instantly.
MARKET BENCHMARK AND AUDIT
To identify systemic UX patterns and gaps across the industry, I conducted a comparative heuristic evaluation across major market operators:
EXPLORED AND REJECTED
❌ Exploration: Aligning Odds Buttons Next to Team Names
What was explored: Odds buttons right-aligned beside each team name row.
Why it was considered: Follows the familiar left-label / right-value convention used in data tables and list interfaces. Feels intuitive as a first instinct.
Why it was rejected:
Full team names truncate at 390px with 3 x 44px buttons on the same row. Identify breaks.
Live score + team name + odds on one line creates three competing elements with hierarchy.
Vertical eye tracking (Match → Score → Selection) proved faster in rapid testing than horizontal zigzag scanning.
COMPONENT SYSTEM ARCHITECTURE
I developed a modular component structure built for extreme scalability, ensuring consistent states across both Upcoming and Live contexts without breaking design tokens.
BEFORE vs. AFTER COMPARISON
THE REDESIGN: 3 LAYER VISUAL DIFFERENTIATION
To help users identify live matches instantly at scroll speed, I engineered a three-tier pre-conscious signal system
Signal 2: Pre-Conscious Background Tone
Shifted the card container background to a subtle dark tint (#0f1a12). This registers in the user's peripheral vision before they even read the match text.
Signal 3: Score Contrast & Micro-Rules
Bright green score treatment (#4ade80) indicates live score updates. Muted gray "vs" is strictly reserved for upcoming games one consistent rule across the whole platform.
HYPOTHESIZED BUSINESS IMPACT AND SUCCESS METRICS
Since this project was an audit task and was not deployed to live traffic, success is framed around measurable validation hypotheses:
Primary Metric:
Expected reduction in odds-selection latency during peak live-match windows.
Usability Metric:
Reduction in mis-tap rates due to raised button affordances and explicit selected states.
Business Metric:
Higher CTR on "More Bets >" by streamlining the primary card layout and reducing cognitive overload.
A/B Testing Color Depth: Test if the green background tint (#0f1a12) causes visual fatigue in extended 2-hour live betting sessions compared to neutral slate.
Accessibility Audits: Validate WCAG AAA contrast ratios on live green text against dark card backgrounds under direct sunlight on mobile devices