OMGeoGuessr Map: X Marks the Spot

By Greg Porter on 01/21/2022

TOPICS:

“Team is Everything” is the first line of OrderMyGear’s value statement. In this blog post, I’m going to discuss one of the ways we’ve tried to implement this value.

When you’re first hired at OMG, you’re given a green flag that says “ORDERMYGEAR” and you’re tasked with taking at least one “flag photo” during the year. You take your flag with you to a non-work event, such as a vacation or a community volunteering event, and take a photo of you holding the flag. That photo is shared in a company Slack channel and at the next town hall. It’s a way for us to connect to one another even if we can’t see each other in person.

The flag photo is a fun idea, and we wanted to figure out a way to push it to be an even better team building/bonding activity. Since the majority of flag photos are taken while people are traveling to remote locations, we saw an opportunity to gamify these posts by factoring in OMG’ers locations. We did this in two ways: a custom GeoGuessr Map and a SlackBot called OMGeoGuessr.

Custom GeoGuessr Map

GeoGuessr is a web-based geographic discovery game designed by Anton Wallén. In it, the player is dropped onto a pseudo-random location on Earth in Google’s street view. The objective of the game is to determine your starting location. To do this, the player must look at the surrounding area to identify the local language, foliage, road construction, and architecture. Our initial idea was to make a custom map where the player’s starting point was that of a flag photo. It would give the player (or players – if they were playing on a team) an interactive way to see their coworker’s journey.

As it turns out, even making the map was a fun bonding experience! Many of the photos were labeled in a way that makes determining the photo’s exact location difficult. For example, one photo was taken in front of a mural that says “Traverse City.”

(It was labeled “Cherry Capital.”)

If you Google “Traverse City Cherry Capital,” you’ll learn that Traverse City, Michigan is “nationally known as the ‘Cherry Capital of the World,’” according to The Unofficial National Homepage. That’s great information, but to make a GeoGuessr map, you have to be as specific as possible – being even a couple of yards off is enough to lose points. To find the specific location, we started by opening up maps.google.com and navigating to Traverse City. Pretty quickly, we realize that we’ll have to change tactics; it’s too big a place to efficiently search for that specific location. We googled for “Traverse City mural,” which brought us to a page entitled Works of Art: Downtown Traverse City’s Murals. Voilà! The second entry on the list describes the location of the mural in question as “Alley beside Kilwins.” Going back to Google’s StreetView now searching for “Kilwins Traverse City” and we can find our location!

This was a step in the right direction. We were able to take the flag photos and make them more interactive (at least conceptually). The weak point of the GeoGuessr map was that there was no way to put the flag photo in the map; you kinda had to just imagine that this is where the flag photo occurred. Our next activity aimed to fix that: a custom SlackBot.

If you are unfamiliar with Slack, a SlackBot is a program that automates tasks. A popular one is “/giphy” which allows you to insert animated GIFs into a chat. Without it, you’d have to search online for a GIF, download it, and then upload it into the conversation. The bot automates the GIF search and upload.

In our case, our starting idea was that we wanted the person with the flag photo to post their flag photo in Slack and call the bot to initiate a game. Once the game started, anyone in OrderMyGear could respond with where they think the photo was taken.

Because this was a proof-of-concept, we wanted to be able to jump right into coding. The tutorial recommended Glitch.com, and it was a great platform. It allowed us to focus on the code rather than wrestling with infrastructure. 

We started off with a basic app with the name /omgeo. Before too long, we were able to call our bot in the chat. Sure, it didn’t do much more than say “Hello!” but it was a starting point that we could build on. We then spent the next couple of days iterating on it, adding a bunch of other features. A “help” function which lists information about how to use the game, snarky comments if you weren’t correct (“close but no cigar, @GregPorter,” for example), even the ability to manually end the game. As we were playing the game, we kept coming up with ideas – “Oh, wouldn’t it be cool if it did X?” or “It seems like it would be a better experience if we did Y.” We got into a rhythm as a team, so we had a sense of freedom to throw out ideas.

One of the most exciting parts of this process was when we shifted from playing the game to testing the code to playing the game because it was fun. Even in our test pictures, we bonded because of the pictures we chose, so we knew that once actual flag photos were used, then others would feel the same way. 

We were able to share both our custom GeoGuessr map and /omgeo bot with the rest of the company, and it was received warmly. The core of the “flag photo” is that “Team is Everything.” We were able to build on that to further establish it as a team bonding activity. In the future, I look forward to thinking of ways we can build upon the other traditions we have at OMG.