Desktop UI · 16 Hour Design Challenge
X1 Racing: Fan Loyalty Ecosystem
.webp)
Timeline
16 Hour Budget
Target
Desktop (1440px)
Role
UI/UX Assignment
Goal
Non-Crypto Loyalty
The Challenge
Designing for loyalty without the crypto-stigma.
X1 Coin is a digital loyalty ecosystem launching across five products. The primary challenge was to communicate a complex value cycle to new users in under 10 seconds while explicitly avoiding financial or trading metaphors.
The Trust Barrier
"Users often misinterpret digital coins as volatile assets, leading to immediate trust friction during onboarding."
Value Disconnect
"Fragmented products like fitness and racing make the cross-app value loop feel disconnected and purposeless."
Strategic Logic 01
The "Hub & Spoke" Strategy
I centralized the X1 Wallet to act as the heart of the system. Using physical Visual Flow Lines connects "Earn" cards to the Wallet, proving that five distinct inputs lead to one unified, spendable balance.
.webp)
Strategic Logic 02
Gamification over Speculation
I replaced generic financial icons with Action Metaphors like the "Turbo Bolt." By mimicking an RPG inventory instead of a trading app, I emphasized status and utility over financial risk.
Foundations
Translating Strategy into Visual Systems
Establishing a rigorous visual language ensures the ecosystem feels unified across five distinct products.
Visual Style & Mood
Curating a high-performance aesthetic that balances gaming energy with premium lifestyle elements.
Low-Fidelity Architecture
Mapping the Hub & Spoke user flow to iterate on the value cycle before committing to visuals.
Typography System
Selecting typefaces that prioritize readability at small sizes while maintaining a bold, tech-forward character.
Color Strategy
Utilizing the #0F172A base and functional accents to provide instant feedback on reward origins.
Reflection
By prioritizing visual storytelling over textual explanation, I met the core requirement of rapid user comprehension in under 10 seconds.
The color-coded logic (Red for Racing, Emerald for Cart) ensured that point-origin sources were anchored without adding cognitive load, effectively dissolving the "crypto-stigma" through clear, functional UI anchors.
