Interactive touch screens presenting travel, weather and financial data to live broadcast – developed in under three weeks.
London Live is a British television channel. Broadcasting news, current affairs, and entertainment, 24 hours per day on Freeview, satellite, cable, and online.
Six weeks before launch, London Live started running pilot broadcasts for the live morning, lunchtime, and evening news programmes. At that point, the limitations of the on-screen graphics system (Chyron) became apparent. To improve the content of the news programmes, London Live’s news team asked us to create interactive screens that would allow studio presenters to present real-time news, travel, weather, and financial data to live broadcast.
Our vision was to reuse the integrations we had completed for the web platform (weather, travel and traffic data, financial data, and curated social media) and bring this over to giant (84-inch) touchscreens that studio presenters could interact with during live broadcast.
Strategy and Solution
Given the exceptionally tight timescales, we conducted daily on-site iterations with the London Live team. Each morning, we worked with presenters and producers to collect feedback from the studio team following the 6 am to 9 am pilot broadcast. Our global team then incorporated the feedback and developed the next iteration overnight, ready for testing at 6 am the following day.
We developed the solution a standalone React application that would store all data locally, to remove technology risks during live broadcast, and could be deployed to any computer connected to the 84-inch touchscreens.
The initial design sprints looked at typography, and colours, as these can change when broadcast. Also, we started to look at the information that studio presenters needed to convey, how presenters would interact with the screens, where they would stand, and how they would navigate between different ‘slides’.
An essential requirement was to allow presenters to queue up different combinations of slides into individually named ‘running orders’. These were to be created in advance of a live broadcast. These ‘running orders’ would allow the studio team to present any preset combination of slides at a moment’s notice, allowing producers to cut back to the studio from live outdoor broadcasts and move straight on to travel and weather.
To allow presenters to interact with the screens more effectively, we developed the technology solution to support a reduced set of custom touch gestures. The reduced set of interactions would remove the risk of error when presenting during a live broadcast. In addition, we also implemented support for a Bluetooth clicker that could be held by the presenter and used as a remote control.
Interactive Studio Maps
A subsequent requirement was to add interactive maps to the studio screens. The studio maps would allow the London Live team to enhance their outdoor broadcasts – such as the Notting Hill Carnival – with news, video, and other content specific to a location.
We leveraged MapBox Studio to develop a custom mapping solution with broadcast compatible colours and a reduced level of information visible in the maps. We rendered the maps at several different zoom levels, exporting map tiles as individual 8x8 squares that could be deployed to standard CDN and web servers.
We incorporated Leaflet.js to develop the interactive map interface, with all map tiles cached offline and ensured content management workflows captured spatial data. We extended the solution to support overlays within the maps – including polygon and vector overlays, such as the Notting Hill Carnival route map.
Our interactive screens are used extensively during live broadcast every morning for the 6 am to 9 am breakfast show, the lunchtime news bulletin, and 5 pm to 7 pm evening news programmes. The studio maps enrich a weekly “what’s on” news programme as well as provide support for outdoor broadcasts.
Take the next step
As well as London Live, we’ve helped many companies with product design and development. Learn how we can help.
The technology solutions that delivered success for London Live.
Launch your idea
Accelerate your innovation. Let's bring your idea to market.Talk to an expert