Project | Personal Project
Year | 2026
Role | Interactive Design & Animation
Introduction
This project features a web-based Premier League scoreboard system powered by live data.
Beyond visual aesthetics, it serves as a functional prototype integrating interaction logic and front-end architecture to address the challenges of real-time responsiveness and usability.
Feel free to play it here!
Problem & Goals
Live sports data presents a unique UX challenge: information updates frequently and unpredictably under strict performance constraints.
On the other hand, stability is prioritized by using static, rigid interfaces, often at the cost of user delight and engagement.
This project aimed to:
● Functional Motion: Utilize UX motion to bridge the gap between technical stability and a delightful, engaging user experience.
● Technical Validation: Balance UX motion with engineering constraints such as latency.
● Scalability: Design a system where motion can scale, adapt, and remain reliable as data changes continuously across a high volume of matches.
Solutions
Data-Driven State Transitions
By integrating API-Football with Rive Data Binding, UI animations are mapped directly to live data. Motion acts as a system that reacts automatically to match events rather than one-off animations.
Dynamic & Scalable Match Cards
Built with React / Next.js, match cards are generated programmatically based on live fixtures. This allows scalability with the number of matches while maintaining visual and logic consistency.
Hierarchical Interaction Design
Utilizing progressive disclosure, match cards reveal details only upon interaction. The motion is tuned to guide user attention and reduce cognitive fatigue.
Production-Oriented Performance
The system is stress-tested under real-world conditions—such as delayed data responses and multiple active instances. This ensures the motion remains legible under live constraints.
Responsive Layout
Leveraging Rive’s real-time scaling and a flexible React architecture, the UI ensures a seamless transition across devices. Components don't just resize; they intelligently adapt their layout density and information hierarchy based on available screen real estate.
Conclusion
This project demonstrates a shift from crafting isolated animations to architecting motion systems.
It highlights the essential role of a UX Motion Designer—
transforming complex, real-time data into a fluid and intuitive user journey through strategic motion experiences.