London Live, the new TV station for London, were looking for a technology agency that could take a load of fresh ideas and requirements, and overcome many unknowns and risks to deliver a next-generation online TV experience from scratch
In six months flat.
They chose Graph.
Brief
Traditional linear TV is getting increasing competition for viewers’ attention from a variety of online sources. This means that a new TV station has to deliver an online experience that is complementary to and in many ways better than what has been possible with traditional TV.
There are many challenges to creating an online platform that can deliver this to the multitude of connected devices, while providing effective pre/post roll ad management and efficient content publishing work-flow.
Challenge
When London Live won the bid for the franchise for London’s local TV station, they knew they needed to create a digital platform that was cost-effective and able to adapt quickly to the ever changing technical and commercial landscape.
It also had to:
• Deliver a live TV stream with rights-restricted TV catch up
• Deliver short-form news and clips – each with different workflows
• Deliver a cross-platform video experience – to desktop, mobile and tablet
• Integrate on-page and in-player advertising and sponsorship
• Integrate the existing newsroom production systems
• Integrate the TV scheduling system
• Integrate moderated user generated content and social media
• Be scalable and able to handle high traffic peaks
• Provide travel and weather – direct to live broadcast
• Provide interactive studio maps – direct to live broadcast
• Support an unknown amount of traffic at launch
Strategy
Due to the size, complexity and time constraints of the project, London Live felt that a collaboration of specialist agencies with extensive experience in their field would be the best choice.
Graph were chosen to lead the delivery of the platform, and were responsible for scoping, technical delivery and overall project management. Kemistry delivered the online and in-studio brand identity and 100Shapes, having worked extensively on the BBC IPlayer, the UX.
Brightcove’s new HTML5 Video.js player, then still in alpha, was chosen for delivering video due to its ease of implementation across multiple devices, with Ericsson providing the live encoding technology and Claranet the hosting infrastructure.
Approach
With a limited amount of time before launch, Graph’s agile development methodology was used to deliver the project in a series of one-week iterations.
Scope Definition and Planning
A scope definition and planning exercise was undertaken that enabled all stakeholders and partners to gain a shared understanding of the user, business and technical requirements. This resulted in a master set of user stories that were mapped against the business priorities, the effort required, and technical/studio dependencies.
A Series of One-Week Iterations
The user stories were scheduled into one-week iterations, with a version of the website being release each week for showcase and review by London Live.
User Experience & Design
The set of user stories was used by 100Shapes to create a series of design prototypes that mapped out each user journey, allowing all stakeholders to click around a prototype and see how the site would work when completed.
Technology Approach
A combination of modern technologies, a high performance database platform, and an open source licensing model provided an excellent foundation for a site of this size and complexity.
Early Iterations
Early iterations set out the player technologies and started to build the programme pages to handle VOD content. The underlying programme/episode/scheduling data was modelled and implemented.
This approach allowed us to ‘drop-in’ the integration with the scheduling system, which was still going through procurement (and was not in place until six weeks before launch). This allowed the working prototype to be shipped out to potential users for review and testing.
Later Iterations
Later iterations developed other areas of the site along with advert integration and support for the live stream. This could only be tested once the hardware encoders were in place and sending out a test transmissions.
During this time Graph worked directly alongside the Brightcove product development team to implement player technologies for handling the live stream – with Brightcove revising their player development roadmap specifically to support the hardware encoders carrying the live stream.
Performance Testing
With the potential for an unknown amount of traffic at launch, Graph took the architectural decision to publish all site content into MongoDB to ensure that the retrieval and display of data would be extremely fast. This architecture was ratified by running performance tests—with the site clocking up 1,000,000 page views per hour on a single server.
Result
Londonlive.co.uk provides a unique mix of live TV news, travel, weather, documentaries and catch up TV.
The online platform is enabling London Live to engage with audiences in London and across the UK on a range of devices, enables effective content monetisation through pre, mid and post roll advertising, and allows the editorial team to publish a wide range of content quickly and easily.
The same platform is being used in the TV studio to deliver breaking news, and live weather and travel information. This has removed the need for duplicate systems and workflows, increasing efficiency and reducing costs.