Using HTML5 and Google Maps we built an accessible mobile web app that allowed users to map their location to the hottest social gatherings, events and parties that during the prestigious advertising festival in Cannes.
People attend festivals like the Cannes Lions to win awards, get inspired, hear what thought-leaders have to say about advertising, and to gain insights into the latest in communication. Of course, another very
important reason to be in the South of France in June is to mingle with the great minds of the industry. Part of that social experience of course, is being at the right places and to being seen with all the right people.
The heatmap helped show the hottest spots on the map with layers that aggregated the density of users' event interactions such as "pinning" and uploading photos.
Uploaded photos were geo-tagged and displayed on the interactive map in realtime so users could preview the scene beforehand.
Popular restaurants and bars were highlighted on the map as a value add to those who wanted information on trendy places to be seen.
Keeping with the experience on Google Maps, the red pin shows users where they are on the map so they can decide which popular area to go to next.
User pins indicate where people are. Whenever the app is open, a pin is dropped, so you can see where the realtime foot traffic is.
A great way to see what kind of crowd is gathering at one of the hot spots is by viewing user photos posted in that area. Tapping on the photo pins allows you to see these photos, and photos that are within 100 meters of that location.
The heat layers are an easy way to see where the most active areas are on the map. The darker the blue, the more activity going on.
Filters allow you to hone in what you want to see on the map. From a general map to realtime photos-users are able to tailor the views to what's most important to them.
The landing page showing the heatmap app and the "Creative Corner" where Advertising content including mobile ad banner galleries and other information were posted. Additionally, the promo bar displayed informed on the latest happenings.
The heatmap page allowed users to view the map, add photos, view cool places that are highlighted in Cannes, and register to win a new Nexus S covered in crystals. We used icons that were appropriately sized for fingers and were visually understandable.
The heatmap is where users hone in on the action. Through filtering and zoom functionality, users were able to see as much or as little as they wanted. Additionally, as prizes were awarded, these would appear on the map to show where the winners were when they discovered the "treasure."
We created a list of popular venues in Cannes as an added value tool for users looking for a good place to eat or hang out . We included location information such as the amount of people in that area along with photos posted within 100 feet.
When viewing the details of a location you could view photos that were posted nearby in a gallery format, which allowed users to see the crowds at each location.
Each photo could be viewed in full-screen mode and through zoom pinching for more detail. A short description helped users understand what they were looking at and how old the photo was.
Behind the design work done for the Cannes Heatmap App there was a significant amount of technical work done to make this custom app a success. When working on mobile web applications, a number of factors contribute to added complexity typically not found when developing desktop sites. We opted to build the site in HTML5 and PHP as a mobile web app to make it as accessible as possible and to reduce the barrier of entry associated with native applications that require installation. Of course, mobile web apps have their own limits as well and we tried to make the experience very app-like, keeping the interaction required to register and contribute as low as possible.
To avoid having to fill out forms, we created a system that allowed users to register and post photos by simply sending them via SMS.
Using Geo-location features in HTML5, users' locations were submitted and tracked using unique IDs stored as cookies, then associated with SMS addresses once registered.
Coordinating and identifying users as they marked their locations on the map was something we wanted to achieve without requiring complex registrations. Another hurdle is that unlike Android, iPhone iOS does not allow photo uploading directly from a web application. Unfortunately there are no easy ways to upload photos on an iPhone from a web app, and many of our visitors were bound to be on iPhones. Several leading web applications like Facebook and Tumblr employ "email" solutions that are not ideal, restricting users to single photo uploads, and forcing them to take several unnecessary steps using the Photo Gallery to send an email (photos cannot simply be attached to emails in iOS). We turned to using SMS messages for form submission, not only to overcome the iOS issues, but also to make registration simpler. Without a form though, we still needed to find a way to associate submissions to unique users. To solve this we stored unique IDs as cookies-
A nice feature on both Android and iOS is the ability to store a website as a bookmark that resides on the phone much like a native app does. This allows users to simply jump back into the app as if it were a native app without having to navigate to it. Placing simple instructions at the bottom of the page to remind users of this feature is a great way to encourage users to return to mobile web app, and making it easier for them to multi-task.
The application needed to run well under mobile bandwidth scenarios, and at the same time also incorporate several services and features we built to handle the geo-location data provided by the devices. Considering the event was just one week long it was also critical that the app function as desired without failure, so all of our work had to be well tested and adaptable to varying conditions. We also went to great lengths to supply the easiest form of photo submission and contest registration we could think of, simple SMS messages. We realized that filling out long forms on a phone while seeking out the crowds in Cannes wouldn't be very appealing to our on-the-go audience.
To generate the clean vector heatmaps we used Adobe AIR to process generated images and create the clean vector shapes.
To mimic "treasure hunting" users who placed pins closest to pre-defined locations were awarded with customized Google Nexus S phones.
on each device as they used the app. Each pin on the map had an associated ID, that was then associated with an SMS sender email address that includes a phone number. To associate them with the unique IDs we created a custom email address handler that would pass information about the users registering for the Nexus S contest or submitting photos but packing the needed information into the email address they would send their SMS Messages to. An Example address would be "firstname.lastname@example.org". Using a google documents account and the Gmail API we were able to funnel these SMS messages to one global account and parse the messages for the information we needed to register a user, place their photo, and contact them if they won the Nexus S that day. We're not sure, but we might just be the first to employ this approach to mobile photo submission and registration, and in the end seems to be the easiest way to handle limitations on iOS.
Using Google Analytics we were able to keep track our return visitor rate and other important metrics to monitor the behaviors on such a unique mobile experience. Unlike similar apps using geo-location services, this site targeted a very specific crowd in a specific physical city. Understanding how the site performed was critical to future campaigns using Google's Ad Mob advertising platform that allows for geographically targeted advertising.