Dynamic MEV
Project overview
A rebuild of the Multi-Event View, LiveScore’s homepage, from a static list of fixtures into a motion-led experience. It introduced a semantic motion system where each event type carries its own animation, weighted by how much it matters, and goals animate in the scoring team’s colours so it is obvious who scored before you read anything.
The context
The Multi-Event View is the most valuable screen in the product and it treated every moment identically. A 90th-minute winner appeared exactly like a first-minute throw-in. For an app built entirely on live sport, the homepage carried none of the drama, the scorecard had accumulated contrast and hierarchy debt, and live scores, the product’s whole reason to exist, looked no different from any competitor’s.
My role
I owned the design end to end: research, concept, high-fidelity prototyping, and QA of the built designs in the production codebase. I also took on the technical delivery of the motion myself, producing the production-ready JSON rather than specifying it for someone else to rebuild. The PM facilitated development and coordinated timelines. I was the only designer on the project, working under a lead product designer.
team and timeline
One designer, one PM and a development squad of five, with design and product each overseen by their respective leads. Three months from concept to delivery.
Constraints
Nobody in the wider team had animation experience, and there was neither the developer capacity nor the budget to build motion to the standard the idea required. The realistic outcomes were a watered-down version or nothing at all. I upskilled in my own time instead, learning After Effects and the JSON export workflow so the animations could be delivered as finished assets rather than as a specification somebody would have to interpret.
Key Metics
23%
Increase in seven-day retention year on year, measured three months after the animations launched.
30%
Reduction in development time on motion work, by delivering production-ready Lottie/JSON assets directly instead of having engineering recreate animations from a specification.
45%
Increase in click-through on Shocks odds boosts, from an A/B test across a month-long rollout, measured against the earlier Shocks integration built during SEVolution.
The solution
Problems identified
Research insights
Mindsets shift with the match
Users want information at a glance while a game is live, but will happily go deep into statistics before and after it.
Motion amplifies emotion, but only when it is rationed
Animation draws the eye and raises perceived excitement when reserved for genuinely critical events. Applied broadly it stops meaning anything.
Novel patterns have to be consistent to be trusted
Unfamiliar states such as an unconfirmed goal only become readable once they behave the same way every time.
Experimentation
Decisions & trade-offs
The hardest call was how much motion the screen could carry. Animation on the homepage exists to pull someone into a match, but the Multi-Event View shows many games at once, so every animation competes with every other one. Too few and the screen stays flat. Too many and it becomes noise that is harder to read than the static list it replaced.
I settled on single-play moments of delight, restricted to genuinely critical events: goals, red cards and VAR decisions, each with its own distinct animation. Playing once rather than looping meant the screen returned to a readable state immediately. Restricting the vocabulary to three events meant each one still meant something when it appeared.
Goals animate in the scoring team’s colours, which was the decision that turned motion from decoration into information. You know who scored before you have read a word.
Lessons learnt
Native formats remove interpretation
Handing engineers JSON rather than a description of an animation eliminates the gap between what was designed and what ships, and it took 30% out of the development time.
Commercial content does not have to degrade the experience
A well-designed commercial unit can raise the perceived quality of an app rather than lowering it, provided it earns its place visually and stays separable from the content around it.
The framework never left the homepage
Moments of delight stopped at the Multi-Event View. If a user tapped through to a match, the motion language did not follow them, so the reward that pulled them in disappeared at the point they were most engaged. Building the system was the easy part. I should have argued for the journey it belonged to before building the first animation.
