Main page
Live Match Pages Redesign
Live Match Pages Redesign
On Sports.ru, live match pages are one of the most visited sections — tens of thousands of matches across football, basketball, tennis, hockey, and more are followed here every year. Historically, each sport had its own live interface, designed and maintained separately.
This led to major problems:
Fragmented UX — different layouts, controls, and data display for each sport
Slow page load times due to outdated code and inconsistent layouts
Poor mobile experience — statistics and play-by-play events were hard to read
Intrusive ads covering key content
Limited depth of statistics for non-football sports
On Sports.ru, live match pages are one of the most visited sections — tens of thousands of matches across football, basketball, tennis, hockey, and more are followed here every year. Historically, each sport had its own live interface, designed and maintained separately.
This led to major problems:
Fragmented UX — different layouts, controls, and data display for each sport
Slow page load times due to outdated code and inconsistent layouts
Poor mobile experience — statistics and play-by-play events were hard to read
Intrusive ads covering key content
Limited depth of statistics for non-football sports
Old design of matches pages
Old design of matches pages
Project Goals
Project Goals
Create a unified, scalable UX that works for any sport
Improve readability and speed across all devices
Enrich match coverage with deeper statistics for each sport’s specifics
Build a reusable design system to simplify development and updates
Create a unified, scalable UX that works for any sport
Improve readability and speed across all devices
Enrich match coverage with deeper statistics for each sport’s specifics
Build a reusable design system to simplify development and updates
Research & Immersion
Research & Immersion
To design a universal solution, I had to deeply study each sport:
Football — flow of the game, event frequency, advanced metrics (xG, passes, possession)
Basketball — quarter-based structure, fast pace, player-specific stats (points, rebounds, assists)
Hockey — periods, penalties, shots on goal, goalie performance
Tennis — sets and games, serve stats, break points, rally length
Research sources:
Competitive analysis: Sofascore, Flashscore, OneFootball, ESPN
User feedback from support tickets and surveys
Corridor and usability testing with fans of different sports
Key insights:
Users value quick access to key stats more than animations or effects
Different sports require different hierarchies of information
Ads were breaking layouts and hiding crucial info
To design a universal solution, I had to deeply study each sport:
Football — flow of the game, event frequency, advanced metrics (xG, passes, possession)
Basketball — quarter-based structure, fast pace, player-specific stats (points, rebounds, assists)
Hockey — periods, penalties, shots on goal, goalie performance
Tennis — sets and games, serve stats, break points, rally length
Research sources:
Competitive analysis: Sofascore, Flashscore, OneFootball, ESPN
User feedback from support tickets and surveys
Corridor and usability testing with fans of different sports
Key insights:
Users value quick access to key stats more than animations or effects
Different sports require different hierarchies of information
Ads were breaking layouts and hiding crucial info
Key Changes
Key Changes
Auto-Layout & Adaptive Ads:
Ads no longer overlap with live content
Layout automatically adjusts for mobile and desktop
Modular Statistical Widgets. Components for displaying stats can be rearranged depending on sport:
Football: xG, possession, passes
Basketball: points, rebounds, assists
Hockey: shots, saves, penalties
Tennis: serves, break points, winners
Unified Interaction Patterns
Same logic for switching between “Events / Stats / Lineups” tabs
Consistent navigation across sports
Scalable Design System
Single source of truth for components, making rollout to new sports faster
Auto-Layout & Adaptive Ads:
Ads no longer overlap with live content
Layout automatically adjusts for mobile and desktop
Modular Statistical Widgets. Components for displaying stats can be rearranged depending on sport:
Football: xG, possession, passes
Basketball: points, rebounds, assists
Hockey: shots, saves, penalties
Tennis: serves, break points, winners
Unified Interaction Patterns
Same logic for switching between “Events / Stats / Lineups” tabs
Consistent navigation across sports
Scalable Design System
Single source of truth for components, making rollout to new sports faster
Full page redisigne / football / state - match finished
Full page redisigne / football / state - match finished
Few examples
Few examples
of how widgets adapt to different sports
of how widgets adapt to different sports
Football header / old design
Football header / old design
Football header / old design
Football header / new design
Football header / new design
Football header / new design
Basketball header / new design
Basketball header / new design
Basketball header / new design
Football events / old design
Football events / old design
Football events / old design
Football events / new design
Football events / new design
Football events / new design
Basketball events / new design
Basketball events / new design
Basketball events / new design
Results
Results
UX consistency — fans instantly understand navigation regardless of sport
Faster load times and better mobile performance
Positive feedback from users in surveys: “Much easier to read stats on my phone”
Thanks to a consistent design across different sports and consolidating pages into a single repository, we achieved faster loading speeds and a major boost in SEO — one of the client’s top priorities.
UX consistency — fans instantly understand navigation regardless of sport
Faster load times and better mobile performance
Positive feedback from users in surveys: “Much easier to read stats on my phone”
Thanks to a consistent design across different sports and consolidating pages into a single repository, we achieved faster loading speeds and a major boost in SEO — one of the client’s top priorities.
Conclusion
Conclusion
What started as a football redesign became a platform-wide transformation. A single, scalable design system now powers live coverage for football, basketball, tennis, hockey — and any new sport Sports.ru adds in the future.
This approach not only improves the user experience but also reduces maintenance costs and development time.
What started as a football redesign became a platform-wide transformation. A single, scalable design system now powers live coverage for football, basketball, tennis, hockey — and any new sport Sports.ru adds in the future.
This approach not only improves the user experience but also reduces maintenance costs and development time.
