{"id":900,"date":"2015-11-03T00:00:00","date_gmt":"2015-11-03T00:00:00","guid":{"rendered":"http:\/\/www.emergeinteractive.com\/how-to-create-the-killer-app-for-sports-venues-through-mobile-application-development\/"},"modified":"2023-11-06T12:32:27","modified_gmt":"2023-11-06T20:32:27","slug":"stadium-smart-phone-app","status":"publish","type":"post","link":"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/","title":{"rendered":"How to Create the Killer App for Sports Venues through Mobile Application Development"},"content":{"rendered":"<p class=\"subtitle tx-a\">\n<p>Smartphones and sports venues make for an interesting combination. They\u2019re already used to increase the convenience factor at sporting events, allowing attendees to order food and drinks to their seats via their phones and augmenting the experience by providing additional real-time game information and video feeds to their seats. Audience participation apps are becoming more popular as well.<\/p>\n<p>As a <a href=\"https:\/\/www.emergeagency.com\" target=\"_blank\" rel=\"noopener noreferrer\">leading digital experience\u00a0agency<\/a> we prompted\u00a0the question of what the smartphone can do to not just improve the experience for its owner, but for everyone in the stadium\u2013particularly if there are thousands of phones that are linked together.<\/p>\n<p>Here are some of the initial ideas we pursued:<\/p>\n<ul>\n<li>Controlling the flashlight on the phones for synchronized \u201ccamera flash\u201d effects<\/li>\n<li>Playing synchronized sounds through the phone\u2019s speakers to get crowd chants going or create synchronized sound effects from various areas of the venue<\/li>\n<li>Using the display to emit light that can be changed in brightness and to any color to create a large Tifo \u201cdisplay\u201d in the audience<\/li>\n<\/ul>\n<p>In the end we opted to pursue the concept of controlling the phones\u2019 screens. We were guided by the vision of a basketball arena with dimmed lights before the game and 20,000 roaring fans holding up their phones. This would turn the stands into a massive full-color screen. A similar concept was used at the <a href=\"http:\/\/www.dailymail.co.uk\/sciencetech\/article-2181447\/Olympic-magic-revealed-The-tiny-paddle-Danny-Boyle-used-turn-opening-ceremony-audience-giant-video-screen.html\" target=\"_blank\" rel=\"noopener noreferrer\">2012 London Olympics using fixed mounted LED displays<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/01\/stadium_1.jpg&quot;\" alt=\"Stadium seats with LED screens\" \/><\/p>\n<p>The goal is to combine 20,000+ iPhone and Android screens to create a single display that spans the entire seating area of the venue. For example if a venue has 50 rows\u2014each with 500 seats\u2014then with everyone in the audience holding up their phone we would have a \u201cdisplay\u201d resolution of 500px by 50px. Not quite HD resolution, but it could allow us to create some fun animations.<\/p>\n<p>The London Olympics execution had 70,500 light sources embedded in the stands that allowed for some fantastic animations during the show.<\/p>\n<style type=\"text\/css\">.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/player.vimeo.com\/video\/57146817\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Source: <a href=\"https:\/\/vimeo.com\/57146817\" target=\"_blank\" rel=\"noopener noreferrer\">Kate Dawkins<\/a><\/p>\n<p>Another example that inspired us was AQKA\u2019s implementation of Carol of the Bells using synchronized smartphones.<\/p>\n<style type=\"text\/css\">.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/wUpAvTYAOjY\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>So we set out to develop an iPhone app prototype that would test the feasibility of doing something similar using the crowd\u2019s smartphone screens. Right out of the gate we came upon some limitations that would test the concept and the very limits of people&#8217;s devices:<\/p>\n<ul>\n<li>We would be dealing with a wide variety of phones and operating system versions. Particularly at sporting events that draw a diverse audience from a variety of socioeconomic backgrounds we would have to expect the unexpected. Developing for the lowest common denominator would be paramount.<\/li>\n<li>In a stadium environment\u2013where thousands of people in a very condensed area are trying to get online\u2013data connectivity can drop significantly. We would need to expect low bandwidth and high lag times, perhaps even no connectivity at all.<\/li>\n<li>Different screen brightnesses and screen timeouts could cause some \u201cpixels\u201d to be brighter than others, and some to go dark altogether. We would need to install native apps that can control screen brightness and timeout parameters.<\/li>\n<li>What if there\u2019s only partial audience participation? Are the animations still recognizable if only 50% of crowd members participate?<\/li>\n<li>To create more intricate animations we would need to know exactly where in the venue each device is located. In a stadium environment we would need each audience member to enter their section, row, and seat number into the phone app.<\/li>\n<\/ul>\n<p>So we set out to build a prototype that would conquer these limitations and prove the concept feasible. We broke the challenge into two main components:<\/p>\n<ol>\n<li>The server software that would allow setting up the animations, store them, and relay them to the phones.<\/li>\n<li>The client interface that would run on the phones and control the screen.<\/li>\n<\/ol>\n<p>For the server side we selected node.js and socket.io. To start we created an authoring web interface that allowed configuring a multi-step full-color animation for up to 24 devices.<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/01\/stadium_2.jpg\" alt=\"Web interface to control smartphone screens\" \/><\/p>\n<p>In parallel we started developing the smartphone client. We started off with a simple JS script that was receiving animation queues from the server. Each phone corresponded to a specific location on the animation grid, much like an audience member would enter their seat location when first opening the application.<\/p>\n<p>At first this resulted in a very discoordinated animation due to latency in the animation start time between devices and difference in phone speeds when executing the color changes. We overcame those challenges by measuring the latency to each device before triggering the animation and driving the timing off the server time instead of the client\u2019s JS engine. In the end we were able to prove the concept:<\/p>\n<style type=\"text\/css\">.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/pywJ16mc1ho\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>We then built the control software to load animations and map them to the seat maps of larger stadiums. Animations are imported from animated GIFs, which can be swapped out on the fly.<\/p>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/KFEuV_iwHqs\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>The next step is to run this with a larger group at scale and expand it to include <a href=\"http:\/\/www.arubanetworks.com\/products\/mobile-engagement\/\" target=\"_blank\" rel=\"noopener noreferrer\">Aruba&#8217;s Beacon Technology<\/a>\u00a0for ultra-accurate <a href=\"\/insights\/detail\/emerge-joins-arubas-meridian-engage-partner-program\">indoor location and navigation<\/a>. We\u2019re excited to take this concept to production, and work with partners who are being challenged to bring new innovation to their venues and enhance the experience of audiences.<\/p>\n","protected":false},"excerpt":{"rendered":"<p> Transforming the Audience&#8217;s Mobile Phones into a Crowd-Sourced Interactive Display<\/p>\n","protected":false},"author":1,"featured_media":298,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,31,10],"tags":[],"message_area_of_focus":[],"buy_cycle":[],"target_audience":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create the Killer App for Sports Venues through Mobile Application Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create the Killer App for Sports Venues through Mobile Application Development\" \/>\n<meta property=\"og:description\" content=\"Transforming the Audience&#8217;s Mobile Phones into a Crowd-Sourced Interactive Display\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/\" \/>\n<meta property=\"og:site_name\" content=\"EMERGE | UX Agency\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-03T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-06T20:32:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/stadium_post_header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"963\" \/>\n\t<meta property=\"og:image:height\" content=\"387\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Emerge\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EmergeInteract\" \/>\n<meta name=\"twitter:site\" content=\"@EmergeInteract\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emerge\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/\",\"url\":\"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/\",\"name\":\"How to Create the Killer App for Sports Venues through Mobile Application Development\",\"isPartOf\":{\"@id\":\"https:\/\/www.emergeagency.com\/#website\"},\"datePublished\":\"2015-11-03T00:00:00+00:00\",\"dateModified\":\"2023-11-06T20:32:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.emergeagency.com\/#\/schema\/person\/f62fc7e4ff555922239bd0e19794c2c1\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.emergeagency.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create the Killer App for Sports Venues through Mobile Application Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.emergeagency.com\/#website\",\"url\":\"https:\/\/www.emergeagency.com\/\",\"name\":\"EMERGE | UX Agency\",\"description\":\"EMERGE is a UX design agency in Portland, OR. We help product and marketing leaders in healthcare, manufacturing, and tech drive revenue and improve outcomes through digital products that increase customer engagement and retention. Our specialties are in UX\/UI Design, product strategy, and full-stack development.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.emergeagency.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.emergeagency.com\/#\/schema\/person\/f62fc7e4ff555922239bd0e19794c2c1\",\"name\":\"Emerge\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.emergeagency.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Ei_logo-1-96x96.jpg\",\"contentUrl\":\"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Ei_logo-1-96x96.jpg\",\"caption\":\"Emerge\"},\"url\":\"https:\/\/www.emergeagency.com\/author\/emerge\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create the Killer App for Sports Venues through Mobile Application Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/","og_locale":"en_US","og_type":"article","og_title":"How to Create the Killer App for Sports Venues through Mobile Application Development","og_description":"Transforming the Audience&#8217;s Mobile Phones into a Crowd-Sourced Interactive Display","og_url":"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/","og_site_name":"EMERGE | UX Agency","article_published_time":"2015-11-03T00:00:00+00:00","article_modified_time":"2023-11-06T20:32:27+00:00","og_image":[{"width":963,"height":387,"url":"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/stadium_post_header.jpg","type":"image\/jpeg"}],"author":"Emerge","twitter_card":"summary_large_image","twitter_creator":"@EmergeInteract","twitter_site":"@EmergeInteract","twitter_misc":{"Written by":"Emerge","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/","url":"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/","name":"How to Create the Killer App for Sports Venues through Mobile Application Development","isPartOf":{"@id":"https:\/\/www.emergeagency.com\/#website"},"datePublished":"2015-11-03T00:00:00+00:00","dateModified":"2023-11-06T20:32:27+00:00","author":{"@id":"https:\/\/www.emergeagency.com\/#\/schema\/person\/f62fc7e4ff555922239bd0e19794c2c1"},"breadcrumb":{"@id":"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.emergeagency.com\/insights\/detail\/stadium-smart-phone-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.emergeagency.com\/"},{"@type":"ListItem","position":2,"name":"How to Create the Killer App for Sports Venues through Mobile Application Development"}]},{"@type":"WebSite","@id":"https:\/\/www.emergeagency.com\/#website","url":"https:\/\/www.emergeagency.com\/","name":"EMERGE | UX Agency","description":"EMERGE is a UX design agency in Portland, OR. We help product and marketing leaders in healthcare, manufacturing, and tech drive revenue and improve outcomes through digital products that increase customer engagement and retention. Our specialties are in UX\/UI Design, product strategy, and full-stack development.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.emergeagency.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.emergeagency.com\/#\/schema\/person\/f62fc7e4ff555922239bd0e19794c2c1","name":"Emerge","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.emergeagency.com\/#\/schema\/person\/image\/","url":"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Ei_logo-1-96x96.jpg","contentUrl":"https:\/\/www.emergeagency.com\/wp-content\/uploads\/2019\/01\/Ei_logo-1-96x96.jpg","caption":"Emerge"},"url":"https:\/\/www.emergeagency.com\/author\/emerge\/"}]}},"_links":{"self":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts\/900"}],"collection":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":3,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts\/900\/revisions"}],"predecessor-version":[{"id":11178,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/posts\/900\/revisions\/11178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/media\/298"}],"wp:attachment":[{"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/media?parent=900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/categories?post=900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/tags?post=900"},{"taxonomy":"message_area_of_focus","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/message_area_of_focus?post=900"},{"taxonomy":"buy_cycle","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/buy_cycle?post=900"},{"taxonomy":"target_audience","embeddable":true,"href":"https:\/\/www.emergeagency.com\/wp-json\/wp\/v2\/target_audience?post=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}