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
Website is live
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
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.
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
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