To help relaunch the newly remodeled Madison Square Garden and show off their deep relationship with New York City, Delta Airlines came to MKG and Helios. Their vision was to create a captivating and compelling digital signage experience that would provide them a platform to tell personal, relevant stories about their past, present, and future as it pertains to the region. As part of the launch, Helios Interactive and MKG created a custom back-end Content Management System that allows for real-time updates on weather, transportation, and social media feeds. The system also allows Delta and MKG to keep the stories fresh and exciting, with updates and unique playlists being created daily. The display has become a centerpiece of one of the most iconic sporting venues in the world.

Credits

Client: Delta
Partner: MKG
Launched: August 2013
Event Duration: Ongoing
Project Video Music: “Glitter” by Ghostland Observatory

UI Design: Helios Interactive
Front End Development: Helios Interactive, MMMLabs
Technology Integration: Helios Interactive

Photos

Process

Permanent installations can often be the most rewarding deployments to create. The entire system needs to be designed to run reliably and sustainably. Early on the system was described as being “widgets” on a screen that would hold helpful data. Eventually we moved to a system that scheduled Events that contain a set of curated templates, along with data sources to serve data to the front-end app. Working in 4K presented some difficulties early on especially with memory management on the GPU, but by relying mostly on images + clean anti-aliased text we were able to work through the issues. We intentionally avoided using pre-rendered videos as the production cost is quite high and we felt the content would feel stale. A media server exists on site to download all the latest assets and serve them to both wall computers. The wall is connected to two custom PCs, in the event one goes down- the other will immediately kick-in to keep the wall going. Early on it was clear that the text layouts would become complex and change often, OpenFrameworks by default has no visual editor – until we created our own. Our designers were able to layout content on the screen and export all the layout data to a 1080p version of the 4k screen. This increased the design layout process by allowing realtime feedback. Another test application created was used for showcasing the Animated SVG icons. Our designers were able to preview exactly how the animations would work in the app and adjust their strokes accordingly.

Technology

Front End Software: openFrameworks, C++
Server Side Software: CMS scheduler, Ruby, PHP, HTML
Screen: 3×3 55″ LCD video wall (3840 x 2160 pixels)

Project Development: 10-12 weeks