beIN Sports

beIN Sports

beIN Sports

beIN Sports

Redesigned the sports website for Euro 2024 for the MENA region, focusing on content discovery, video consumption, and engagement. A modular and agile, user-first approach led to 3x video views/session, +518% engagement, and a +105% boost in site retention maximizing tournament-time impact

Project Duration:

1 Year

beIN Sports

Redesigned the sports website for Euro 2024 for the MENA region, focusing on content discovery, video consumption, and engagement. A modular and agile, user-first approach led to 3x video views/session, +518% engagement, and a +105% boost in site retention maximizing tournament-time impact

Project Duration:

1 Year

beIN Sports

Redesigned the sports website for Euro 2024 for the MENA region, focusing on content discovery, video consumption, and engagement. A modular and agile, user-first approach led to 3x video views/session, +518% engagement, and a +105% boost in site retention maximizing tournament-time impact

Project Duration:

1 Year

UI/UX

Design System

UI/UX

Design System

UI/UX

Design System

My Role

UI/UX Designer

  • Client Engagement

  • Stakeholders Communication

  • UX Research & Strategy

  • Visual Systems & UI Design

Team

7 UI/UX Designers

10 Developers

4 Managers

2 Analysts

Process

Agile, Modular & Flexible Process evolving as per stakeholder expectations

Status

beIN MEDIA GROUP is a global media leader, delivering world-class sports and entertainment across 40 countries in 9 languages. Its flagship network, beIN SPORTS, holds the largest portfolio of sports rights worldwide, spanning live events and premium content across five continents.

beIN MEDIA GROUP is a global media leader, delivering world-class sports and entertainment across 40 countries in 9 languages. Its flagship network, beIN SPORTS, holds the largest portfolio of sports rights worldwide, spanning live events and premium content across five continents.

beIN MEDIA GROUP is a global media leader, delivering world-class sports and entertainment across 40 countries in 9 languages. Its flagship network, beIN SPORTS, holds the largest portfolio of sports rights worldwide, spanning live events and premium content across five continents.

beIN SPORT  is a global sports network with a strong footprint in Middle East & North Africa(MENA), France, United States, Australia, New Zealand & Asia. Reaching over 55 million subscribers. It delivers extensive football coverage alongside 17 other sports including basketball, tennis and motorsports.

What was our aim?

To implement platform changes through a gradual, user friendly rollout while evolving navigation and design to:


  • Daily Active Users

  • Click-Through Rate, 

  • Content Discovery

  • Session Duration

  • No. of Videos Watched

Bounce Rate 

The Outcome

Increase in Engagement on Match Page (178M - 1.1B)

Increased Retention on Overall Site(28.4%- 58.22%)

Number of videos watched per Session(0.4 - 1.24)

Challenges & Learning

  • This project, being my first full-scale experience, provided me with valuable hands-on exposure to working with a large, cross-functional team of developers, analysts and managers to ensure seamless delivery. At times, I even found myself overseeing the designers within the team.

  • It helped me develop confidence, agility and the ability to think quickly on my feet, enabling me to manage high-stakes conversations and maintain trust through regular, meaningful interactions.

  • The constant pressure of evolving briefs and shifting requirements presented challenges, but it also taught me the importance of alignment workshops and stay agile under pressure, especially with the tight deadlines leading up to Euro 2024.

  • Technical feasibility is key in design. We created 15+ widgets, referencing Opta Widgets to balance feasibility, innovation, and user-friendliness.

Internal Research

Competitor Analysis

SWOT Analysis

User Personas developed from interviews

User Personas developed from interviews

Research Insights

  • Research revealed navigation issues, including unexpected redirects and confusing league structures, impacting task completion and retention.

  • Users faced friction due to inflexible pathways, excessive clicks, and lack of consistent headers across pages.

  • Homepage lacked visual hierarchy and over-emphasized football, alienating users interested in other sports.

  • Suggested revised information architecture, inclusive content placement, and streamlined tabs to improve clarity and engagement.

  • Recommended adding date filters, content tags and balanced visuals to enhance SEO, accessibility and user retention.

  • Suggested revised information architecture, inclusive content placement, and streamlined tabs to improve clarity and engagement.

  • Recommended adding date filters, content tags and balanced visuals to enhance SEO, accessibility and user retention.

  • Suggested revised information architecture, inclusive content placement, and streamlined tabs to improve clarity and engagement.

  • Recommended adding date filters, content tags and balanced visuals to enhance SEO, accessibility and user retention.

What was changed?

Scores Page

The Problems:

Filters were limited to current week’s results/fixtures, with no empty state message, which was reducing session duration

Score cards were lacking at-a-glance information and intuitiveness, impacting CTR and session duration

Space was being used inefficiently, with inconsistent negative space contributing to higher bounce rates

Visuals were inconsistent, with poor hierarchy and region-specific data variations, affecting clarity and engagement

Before

The Solutions:

Enhanced Filters: Introduced competition filters and a date picker for easier access to past and upcoming matches

Optimised Layout: Utilised the secondary column to show key info like league standings in top/favourite leagues

Expanded Score Cards: Increased visible cards (web: 8→16, mobile: 2.5→7.5); redesigned to display 12 dynamic data points across all match stages (pre, post & live match)

After

Match Page

The Problems:

Low Engagement: Needed to boost interaction and video watch rates across pre-match, live, and post-match phases

Static Content Flow: Widget order & contents remained the same across all match stages, limiting contextual relevance

Inefficient Header: Large header space lacked essential match details, reducing information clarity

Non-Responsive UI: Opta Stats wrapper wasn’t scalable on mobile, affecting responsiveness and visual balance

Before

The Solutions:

Dynamic Header: Space-efficient, responsive header that adapts to show relevant info across all match stages

Modular Widgets & Bento Design: Auto-adjusting layout based on game phase; improved session duration and tripled video watch time (0.4x → 1.2x)

Live Blog: Minute-by-minute updates across all phases of the match, integrated with beIN’s X account for real-time engagement.

After

Design System

Atoms

Molecules

Elements

Design system is built on the Atomic Design Methodology and other features include:

Incorporated Bento design across the website for modularity and visual consistency

Retained existing brand fonts for compatibility with English and Arabic scripts, preserving brand identity and reducing development time

Expanded the colour palette with nuanced tints, tones, and shades in line with the WCAG guidelines for greater flexibility

Enhanced iconography for improved recognition and accessibility

Live Activities for iOS

Live Activities for iOS

Live Activities for iOS

A new feature was introduced for iPhone 16 and above to boost on-the-go engagement and spark user curiosity.

Final Designs

Scores Page

Match Page

Pre-Match

Live Match

Post Match

Behind the Scenes

deepikaraju09@gmail.com

©2025 | Designed & Developed by me

LinkedIn

deepikaraju09@gmail.com

©2025 | Designed & Developed by me

LinkedIn

deepikaraju09@gmail.com

©2025 | Designed & Developed by me

LinkedIn