We share the best practices for developing single page applications with React
London Live is a new television channel, broadcast on Freeview, satellite, cable and online. The digital platform brings together live and on-demand television, listings, news, travel, weather, interactive studio screens and maps into an engaging cross-platform experience.
In October 2013, with less than six months to launch, and studios still under construction, we were appointed to architect and develop the digital platforms that would drive the television station and ensure a mission-critical launch.
London Live launched on 31st March 2014, glitch-free and on schedule. Within this short timeframe, we delivered the entire digital platform; including live and catch-up TV, all production workflows, all hosting infrastructure, over 20 integration points, and interactive studio screens – all entirely from scratch.
What the channel proposed
In 2010, the UK Government launched their local TV initiative. Major cities, like New York, were already running multiple local television stations, while the UK had none. With support from the BBC, the government proposed to introduce a similar concept in the UK.
With the potential to reach 4 million homes, the award of the local TV licence for London provided an ideal opportunity for the Evening Standard’s owners to create a new TV service, London Live.
The new channel proposed an 18-hour day schedule, with rolling live coverage of news, business, sport, travel and weather at peak commuter times. This would include second-screen interactivity with Facebook, Twitter, curated social media, all integrated into the service.
With a first year programming budget of £15m, they proposed broadcasting original lifestyle content about food, homes, fashion, shopping and design.
For maximum reach and engagement, London Live proposed to launch 33 complementary ‘hyper-local’ IPTV services, that would delve into borough-specific information, current affairs and include user-generated content.
Appointed in October 2013, we would need to deliver all of this in 6 months.
We knew that the platform would have to deliver a flawless, cross-platform video experience. We would need to bring together the live stream with video-on-demand content for news and clips, as well as link catch-up back to the TV schedule of the linear channel.
To achieve this, we wanted to provide a fully-branded player that would allow flawless switching between live and VOD streams and avoid the ‘player-on-a-page’ that viewers are so often presented with.
In addition, we wanted to layer the video with additional sources of content, including local news, weather, travel, events and curated social media. This would mean developing an overall site taxonomy that would work across all sources of content. As well as programme and news categories, we proposed to include the geospatial places database, as used by FourSquare, to meet the requirement for a hyper-local channel that would map content into neighbourhoods, districts and boroughs.
With the taxonomy right from the outset, we proposed that personalisation could then be used to drive content recommendations and discovery, providing user with an experience where “my London is different to yours”.
But first we wanted to understand how users would consume content.
User research experience
We introduced London Live to 100 Shapes, a user research agency who had previously worked on the BBC iPlayer, to research and validate the proposed strategy.
The agency interviewed people from London Live’s target demographic to understand their daily lives, technology usage and interaction with media. The results confirmed expectations that Londoners would engage most with short, ‘snackable’ content.
Cross-platform video delivery
The largest technology decision that needed to be made was selecting a video delivery partner to physically carry the live stream and distribute VOD content online.
This would need to handle a significant amount of traffic, support mobile and tablet devices, and was an essential decision that would underpin the future direction of the TV station. This would represent a significant investment over many years, so getting this right was essential.
We guided the London Live team through the decision making process, performing in-depth business and technical comparisons between Brightcove, Ooyala, Kaltura and others.
At the time, Brightcove had just acquired Zencoder and, with it, the leading open-source HTML5 video player Video.js. While Video.js works well for standalone video content, it was lacking several features that London Live would need. However, with the acquisition, we knew that Brightcove were planning to shift entirely away from flash-based technologies and build their future roadmap and technology stack on the HTML5 video player.
With personal support from David Mendels, Brightcove CEO, we were able to work directly with the Brightcove product development team to align our launch roadmap with their new product roadmap. This would mean building London Live alongside Brightcove’s alpha and beta releases of the new player, and working in partnership with their team.
As a result, London Live would be the first site to launch globally with the new Brightcove player.
No existing infrastructure.
The final challenge for launch was that no infrastructure existed. Everything was being created in parallel. At the point we were brought in to develop the online platform, the TV studios were still a building site and the production teams were yet to be hired.
The TV scheduling system was still going through procurement and would not be in place until 8 weeks before launch. Yet, this data would be essential to drive the online platform.
We would need to mock all integration points and model all data in advance, and retrospectively fit these elements into the platform as core systems started to come online.
What we made
With less than six months to launch, we delivered the project as a series of one-week iterations. This ensured we could get working software into the hands of users much faster, get immediate feedback from the London Live team and have the flexibility to adjust priorities where required.
A seamless video experience
Early iterations focused on the video player technologies and started to build the programme pages to deliver on-demand video content. We modelled and implemented the underlying programme and scheduling data, which allowed us to integrate the scheduling system that was still going through procurement.
20 integration points
With a significant amount of content coming from multiple sources, we elected to use ASP.NET with MongoDB for the core of the web platform. This combination of modern web technologies and a high performance database platform provided an excellent foundation for a site of this size and complexity.
With an unknown amount of traffic at launch, we ran performance tests to establish our architecture could support over 1,000,000 page views per hour, from a single server.
In later iterations, we developed other areas of the site including integration with news, travel, weather, as well as advert integration and sponsorship.
We then started to retrofit integration points as different feeds came online. The live stream could only be tested once the hardware encoders were in place and London Live started to send out test transmissions.
Broadcast and production workflows
For the production team, we developed an administration system to support the editorial, content, TV programming and studio teams, each with specific production workflows. This allows different workflows for programmes and trailers, which are created in advance, and for clips and interviews, which are taken from the live stream and created retrospectively.
We developed a monitoring system to ensure that VOD assets referenced in the schedule were in the right place, at the right time, ready for catch-up following broadcast. Following each update in the schedule, the system processes the next two weeks of programming and notifies London Live of any inconsistencies.
Social media aggregation
To allow the London Live team to curate and incorporate social media quickly, we first looked at a number of tools on the market, but they didn’t have the right combination of features, ease of use, or allow mass curation of on the scale we required. As such we developed a new tool for the editorial team, which we have since released as a standalone product called climb.social.
London Live launched on 31 March 2014, at 6.30pm, glitch-free and on schedule.
With a project timeframe of less than six months, we successfully launched a fully working TV station with all integration points in place and a unique, cross-platform video experience.
Case study: interactive studio screens direct to live broadcastRead more
Let's launch your idea
Contact us today and find out how to develop your idea into a valuable digital service.Make an enquiry
The benefits and limitations of native vs. cross-platform mobile application development
We explain how the latest technologies deliver perfect images on any device and at any resolution