The beIN Sports Scores & Match Page revamp was driven by Euro 2024, a prime opportunity to enhance content discovery, engagement, and video consumption. By redesigning the scores page with smart filters & optimizing the match page for modular, dynamic content, we aimed to boost key UX metrics and maximize user retention during the tournament.
Client Project
Lead Designer
Feb - May 2024
2 UX, 1 UI & 2 Devs
Improve Match Engagement during Pre-match, Live-match & Post-match scenarios.
01
The existing Scores page, lacked effective filtering & discoverability, making it difficult for users to find the match results quickly. With Euro 2024 as a major event, the need for a more dynamic, intuitive, and personalized experience became critical.
Filters: Limit discoverability to this week's results/fixtures only. No status is displayed for empty states (e.g., no scores available for a day or sport).
Space Usage: Ineffective use of space above the fold; more value should be added to enhance user experience.
Scores Layout: Poor visual hierarchy; favorites section should be slightly more prominent without overshadowing other cards.
Score Cards: More score cards should be shown above the fold to increase Click Through Rate (CTR) & Session Time.
Implement smart filters (date & competition specific) and a new scores widget that adapts dynamically across pre-match, live, and post-match stages.
Enhanced Filters: Added competition filters and a date picker to allow users to view matches from weeks before or months ahead.
Increased Score Cards: Increased the number of score cards above the fold from 8 to 16 on web and from 2.5 to 7.5 on mobile.
Efficient Web Layout: Used the secondary column to display useful information like league standings in top/favorited leagues.
Improved Score Cards: Redesigned score cards to handle 12 data points, enhancing their overall sleekness.
02
The Match page had low session times and poor video watch rates during Euro 2020. Users checked scores but didn't engage further. The challenge was to boost interaction with rich, context-aware content across pre-match, live, and post-match phases.
Large & inefficient use of space; the header should provide an overview of the match.
Play-by-play order is end-to-beginning, which is illogical for completed games but suitable for live games.
The UI wrapper on Opta Stats Perform is not scalable for mobile devices therefore making it not responsiveness.
Design a responsive and modular layout to improve session duration and increase average video watch time from 0.4x to 1.2x.
Dynamic Header: The new header efficiently uses space and maintains visual hierarchy while being responsive. It adapts to display relevant information during different game stages.
Modular Widgets: Widgets adapt naturally to the page structure if content/data is unavailable. Custom layouts are displayed based on the game phase (e.g., predicted line-up in pregame, video highlights in postgame).
Match Insights: This new feature enhances engagement by providing minute-by-minute updates during pre and live game scenarios. It also integrates with blog posts from beIN's X account.
The Final Designs
Enhancing User Engagement with Improved Score Display & Discovery
1. Filters only showed this week's results/fixtures.
2. Poor visual hierarchy made it difficult to distinguish favorites.
2. Poor visual hierarchy made it difficult to distinguish favorites.
1. Added competition filters and a date picker to expand discoverability.
2. Enhanced prominence of the favorites section.
3. Increased the number of score cards above the fold to boost CTR.
2. Enhanced prominence of the favorites section.
3. Increased the number of score cards above the fold to boost CTR.
Optimizing Match Page for Better User Retention
1. Low session times and poor video watch rates during Euro 2020.
2. Users checked scores but didn't engage further due to inefficient use of space and lack of engaging content.
2. Users checked scores but didn't engage further due to inefficient use of space and lack of engaging content.
1. Implemented a dynamic header to efficiently use space.
2. Designed modular widgets for different game phases.
3. Introduced Match Insights for updates and blog integration, enhancing user engagement and stickiness.
2. Designed modular widgets for different game phases.
3. Introduced Match Insights for updates and blog integration, enhancing user engagement and stickiness.
- Maintaining Client Relationships:
- Importance: Extending big accounts like beIN requires convincing clients of our capabilities and chemistry.
- Learning: Scheduled 1-1s with the Point of Contact to help craft their vision weekly, building rapport and trust.
- Action: Ensure regular, meaningful interactions to strengthen client relationships and secure future phases.
- Dealing with Countless Change Requests:
- Challenge: A 4-sprint design timeline extended to 8.5 sprints due to numerous change requests, altering the main brief.
- Learning: Misalignment between the client's Point of Contact and stakeholders caused delays.
- Action: Schedule a Stakeholder workshop at the project's kick-off to align all parties and avoid internal conflicts.
- Ensuring Tech Feasibility:
- Challenge: Introduced 15 new widgets on the match page, requiring a steep learning curve with Opta Widget Maker by Stats Perform.
- Learning: Provided devs with code snippets, ensuring tech feasibility while designing.
- Action: Continuously assess and ensure technical feasibility during the design process.
