Dynamic MEV

Initial Hero Image

Project overview

A strategic revitalization of the LiveScore homepage, moving from a static list to a motion-rich experience. This project introduced a semantic motion system to celebrate critical moments and integrated high-value commercial assets without disrupting UX.

The context

The Multi-Event View (homepage) is the product's most valuable asset, yet it was "emotionally flat" and purely functional. It failed to capture the passion of live sport, and accessibility standards had fallen behind, limiting inclusivity.

Key Metics

50%

Reduction in development time achieved by delivering production-ready Lottie JSON assets, removing the need for engineering recreation.

45%

Increase in 'shocks!' CTR, through the introduction of high-visibility branding. Driving traffic to the betting ecosystem without disrupting the core user experience.

100%

Rebuild of the scorecard component met modern accessibility standards, correcting historical contrast and hierarchy debts.

The solution

No items found.

PROCESS AND STRATEGY

State-Based IA

Rebuilt the scorecard component to be context-aware, prioritizing different data based on match state (Pre-Match vs Live vs Post-Match).

Accessibility first

Used the visual overhaul to correct historical debts, ensuring screen-reader compatibility and clear visual hierarchy

Technical initiative

Took personal responsibility for the technical implementation of motion (JSON) to guarantee performance and fidelity.

Problems identified

No items found.

Research insights

Insight

Purposeful Animation Successfully Amplifies Emotion. Our tests confirmed that users responded very positively to the new animations, especially for critical moments like goals. We learned that when used strategically, motion effectively draws the eye and amplifies the user's emotional connection to the live game, turning a simple score update into a rewarding moment of excitement.

Insight

User Mindset Changes with the Match State. We discovered a clear distinction in user behaviour based on the match state. During a live game, users prioritize immediate, at-a-glance information. In the more relaxed pre-match and post-match states, they are much more open to exploring detailed statistics and other secondary content. This insight was critical for our information hierarchy decisions

Insight

New UI Patterns Have a Learning Curve. We learned that while our new animations were engaging, they weren't all instantly recognizable. This was a crucial reminder that introducing novel UI patterns requires a degree of user education. It informed our decision to apply animations consistently across the product, allowing them to become a learned and understood part of the LiveScore visual language.

Experimentation

No items found.
Final Hero Image

Lessons learnt

Bridging the gap

Providing assets in a native format (JSON) eliminates interpretation errors and speeds up engineering implementation.

Utility & commerce

Commercial goals do not have to degrade UX; premium, well-designed ads can actually improve the perceived quality of the app.

Invisible work

The most critical updates (accessibility) are often unseen, but they are fundamental to product quality and reach.

next project