Live TV iOS app for English Premier League
IMG Worldwide succeeds in delivering exclusive content to the Premier League audience via the HTML5-based web and iPad app
Premier League is the organising body of the Barclays UK Premier League with responsibility for the competition, its Rule Book and the centralised broadcasting and other commercial rights. The principal objective of the Premier League is to stage the most competitive and compelling football league, attracting world class players. Through an equitable distribution of broadcasting and commercial revenues, the Premier League enables clubs to develop so that participation in European competition can be a realistic aim and once attained the clubs play at a level that makes them competitive.
IMG Worldwide wanted to build a web application and iPad app for the Premier League, allowing subscribers and members of the Premier League and IMG to view match schedules, review match highlights and stream videos at the same time.
- Large number of users
The Barclays Premier League has become the world's leading football league, with a global fan base of 1.46 billion – a global phenomenon, inspiring passion and emotion in 212 territories around the world. The sheer number of likely users of the proposed app presented a challenge in itself.
- Consistent content delivery
Viewers of the Premier League are spread across different geographies with disparate network environments. The apps had to ensure uninterrupted content delivery to subscribers, with a consistent user experience.
- Web and iPad app navigation
A key requirement was the navigation structure: the website and iPad app had to be equally interactive and intuitive, while maintaining a consistent user experience across multiple platforms.
- Dynamic match schedules
The League's season runs from August to May, with 380 matches each season. That creates a huge list of matches that are subject to constant change. It was a challenge to create dynamic daily and weekly match schedules that extended into the future, able to accommodate all possible schedule changes.
- Video streaming
IMG wanted Premier League TV viewers to be able to stream any video on the web page without having to reload the entire page.
Video streaming solution
Live video streaming was done via Akamai. A third-party open source streaming video player, Flowplayer, was used as the client-side video playback solution for the web application. For Video-on-Demand, a key feature of Premier League TV providing match highlights and footage of past matches, was delivered using Third Presence, which ensured compatibility with iPhone and iPad, but with the iPad app using the native iPad video player.
The Premier League TV app was designed to be responsive on a low memory footprint, so as to function properly on low data speed devices, as well as 3G devices and disparate network environments across the globe.
The web app was based on HTML5 responsive software which worked with common browsers such as Internet Explorer, Mozilla Firefox, Safari and Google Chrome. Special tweaks were made to ensure it was compatible with the Safari OS on iPad2.
High-end Ajax was used for several site features, including the match schedule. Features such as user login, weekly and daily views of programme schedules, video streaming, full screen view and video-on-demand were integrated into the app, taking the Premier League TV viewing experience to the next level.
Real Time match schedules
JSON web services were used to fetch the match schedule and other match-related data dynamically, without post-back. The HTML5-based web pages were embedded in a native shell for the iPad app.
Content management process
We built a complete content management application for IMG's Premier League TV, summarised as follows:
- The client uploads the match schedule to an FTP server in .XML file format
- The PLTV-FTP uploader detects the newly-uploaded file and imports it into the database.
- Video streaming itself is done from Akamai
- The software is integrated with ThirdPresence video streaming API to enable streaming on the iPad and iPhone.
- The front-end is controlled by a login system, and the back-end by the client.
Information architecture & user experience design
The information architecture of the web and iPad apps was meticulously designed to maintain high usability. A Drag Scroller was used to create consistent, interactive navigation experience, needed for both web and iPad.
Increased reach to the Premier League audience
The Premier League wanted to attract players and fans from around the world. The Premier League TV app helped achieve this key objective, by providing exclusive content to subscribers worldwide and increasing the popularity of the Barclays Premier League.
Uninterrupted data flow
Both Phone Gap and HTML5 were used to create uninterrupted flow of data, making the apps a dynamic showcase for videos of Premier League matches and providing real-time, user-friendly match schedules.
Rich user experience
Visually distinct from the previous website and creating a completely new and much-improved user experience, the Premier League TV app allows users to log in and view customised content of their choice on the move.
In a word – GOAL!