To celebrate the Seahawks reaching the Super Bowl and build excitement going into the big game, Ratio launched a geolocation game & campaign for fans in Seattle. Read about how the experience galvanized the city and and what we learned along the way.

hero

The Seattle Seahawks had just won the NFC championship, beating the San Francisco 49ers in a tensely fought encounter befitting of their fierce rivalry. While the fans were just getting to bed after celebrating the victory, the Ratio Labs team was busy hatching a plan to harness the energy of the 12th Man and continue the momentum towards the Super Bowl. They would end up creating a contest that – spurred by local media – galvanized the city, bringing thousands of families & friends together and culminating in a life-changing experience for one lucky fan.

The idea: build an app that would allow users to check-in and take a selfie at 12 Seattle landmarks to gain entry in a prize draw to win a VIP, all expenses paid trip for two to the Super bowl in New York.

By Monday afternoon the team had agreed on a plan to launch the contest on Saturday morning, leaving just hours to design, build and test an app that would potentially need to scale to thousands of simultaneous users.

White boarding began on Monday night, understanding the user journey through the app and potential integrations and dependencies required. By the end of night we knew the number of screens we required, the type of data we wanted to store, and the back-end infrastructure and services we needed to accomplish it.

board

We’ve been experimenting with iBeacons recently in the Labs here at Ratio and location-aware apps were the top of mind. We knew we wanted to build something with location technology and ended up designing a core experience that included registration using Facebook, a check-in feature that was validated by the location of the user, and then the ability to take a photo and upload it to a service. In addition, each user could visit their own status page to see how they were getting on with their hunt.

HTML5 or bust

We knew we needed to reach the largest audience possible across the widest set of devices. We also needed to make some compromises and tough calls on which devices to support due to limited development and testing time. There was no time to build individual native apps for each platform, let alone submit and have them accepted to the App Stores. Additionally, through our investigations with iBeacons and Bluetooth LE we knew that current support for iBeacons across different handsets, particularly Android, was spotty. Instead, we were to rely on the browser to achieve the core experience – specifically GPS and camera features available in HTML5.

Parse (and AWS) for the back end

At Ratio, we’ve been using Parse for a number of projects and we really like its excellent integration with the Facebook API and ease of creating simple, scalable services. We didn’t know how popular the app was going to be, but we were confident that Parse could handle whatever we threw at it. Parse has a really neat Data Browser feature that makes table creation and modifications easy we quickly knocked out User and Entry tables to handle simple registration and entry use cases.

parse

It’s worth noting that we also used AWS to host and serve up the HTML and other assets. We’d love to be able to do that in Parse in the future, but right now it’s really geared towards serving data (tables and such) for native (mobile) apps & websites.

Location validation algorithm

To ensure users weren’t cheating, we wanted to validate check-ins based on their GPS location. For each location we created a JSON object that included latitude and longitude and an accuracy level which described a radius around the location that we considered acceptable for an “in-range” check in. Next, we grabbed the location of the user provided by the browser (using HTML5 Geolocation), again with an accuracy that provided a level of certainty for the user’s actual location.

geolocation algo

 

Our algorithm calculated when the two circles intersected – we considered this a valid check-in. In the example above, A is a valid check in – where the circumference of the user and Century Link Field intersects. User B is entirely within the radius of the Century Link Field’s accuracy and would be considered a valid check-in. User C, is not a valid check-in, however.

Testing

As a digital multi-screen agency, we do a lot of complicated testing matrices at Ratio. This experience pulled on a lot of that experience as we tested across a wide range of iOS and Android devices to ensure that users were able to use the app on a wide range of devices. We learned some interesting things along the way:

  • The accuracy of location services across devices is highly disparate. This proved a challenge in being able to leverage our typical equivalence classes that we typically use to group devices with similar attributes.
  • Sometimes you just have to take it out in the field! We did a lot of emulation in peak development, but once we got out in the field, we ended up making several signal radius settings for various landmarks, depending on their physical attributes. For example, setting the radius high for the Fremont Troll allowed users to be able to pick up a signal fairly far away and then navigate by map to where it is hidden under the Aurora Bridge. Conversely for the Needle, setting the radius low forced the participants to get close to the location and really take part in the spirit of the exercise. However, that proved a bit unreasonable, as folks needed to be able to find parking in order to get to the radius area, so we tweaked it in real time. 
  • HTML5 camera support on Android varies by handset. We used Ratio’s Android testing matrix to quickly figure out which devices were supported.
  • IE on Windows Phone 8 doesn’t support HTML5 Camera at all, we provided a graceful fall back for Windows Phone users (turns out there is a concentration of them in Seattle!)
  • There is no Facebook Web Auth support on IE on Windows Phone 8 – this was a real bummer. We had to build our own

The final product

In just over three days, we built a fully scalable, mobile web app using some neat HTML5 features and cool game mechanics. We even had some local press come by the office and shoot a video to help promote the contest and shot an interview covering the team’s work!

Video

As with most of our projects, design worked hand in hand with devs throwing back and forth assets and working in an agile fashion. We loved the way the app turned out.

screen1 (1)

After some long nights (and lots of coffee) the team assembled on Saturday morning to flip the switch and turn on the contest for the general public. We pushed our final changes up to the production server and huddled round the Google Analytics and the Parse Data Browser to watch if anyone would play. As it turned out, there were lots of people ready to play…

12manhuntmosaic

The contest ran three days, attracting over 20,000 entries. Users uploaded over 5GB over cameraphone photos to our service and in total spent about 16,000 man hours hunting around Seattle for the landmarks. Our winner was Cindy and her friend  from Seattle who came by the Ratio office on Friday before the big game to collect her VIP Package prize and meet the 12ManHunt team!

user9

user10

All in all, everyone had a bunch of fun – including the team! Thanks for everyone who participated and got in the spirit of the 12 man hunt!

12 Man Hunt in the News

King 5: Want to go to the Super Bowl? This scavenger hunt may be for you

Geekwire:  Free VIP Super Bowl trip for one lucky winner of this Seattle selfie scavenger hunt

Geekwire: Here’s how Seattle tech companies are celebrating the Seahawks

 

To get in touch with Ratio about our geolocation solutions, mobile app and mobile web capabilities, drop us a line.


   If you enjoyed this post, you can follow Team Ratio on Twitter for similar content.