Logo

WEB

TAGGER

Tagger

Tagger was a semester project done for a Internet Interaction class I took while completing a Digital Media degree at UCF. It was conceived as a mobile game that took you to different landmarks around campus and allowed you to 'virtually' tag them. It played out like a scavenger hunt. The web app prompted you to find a location on campus and when you reached that location you were allowed to 'tag' the location in the app. Once a location was tagged, the next location would be revealed. Players could also embed comments in their tags for other players to read. This would create a semi-social aspect to the game allowing players to interact with each other through the tags and comments.

THE CONCEPT

The initial concept was to create a robust augmented reality app where players could see the locations in real time through their phones with the 'tags' of other players superimposed in an augmented video. But since there were only two of us and our technical skills and time were limited, the idea was scaled back to a web app with geolocation parameters and images of locations rather than full blown augmented reality. The ultimate goal of the game was to help students learn their way around the campus while allowing them to socialize through the tagging and commenting. We also folded in some digital prizes throughout the experience.

Tagger Previsualization TAGGER CONCEPT IMAGE

THE BUILD

The CMS consisted of a custom user management system, a progress tracker, a system to tag and comment on locations, and a set of geolocation parameters. The entire system was built in vanilla PHP and JavaScript. The user management allowed the user to enter their name, a valid student email account, upload a profile pic, and choose a two letter tag.

The progress tracker recorded metadata on the tags locations and timestamps. This was used to aggregate a leader-board that could be accessed by all registered users.

The tagging and commenting system allowed players to tag each location with their chosen two letter tag as well as attach a comment to that tag to be seen by other players.

A range of GPS coordinates were assigned to each location. The tagging system would only allow tagging of locations within these perimeters. When a 'tag' was attempted it checked the devices location to the range of coordinates and returned a success or fail alert.

THE EXPERIENCE

Tagger Start Screen

To start the game you had to register as a user with your name and school email account to assure only student were playing. During the Beta phase we limited this registration further to a small number of students within our class and checked against their student ID numbers.

Once registered the user would pick a two letter 'tag' to be displayed at the locations. They would also be prompted to enter an, optional, profile pic.

After completing their profile they would be prompted to start the game. They could start from any location on campus. Once they started the game they would be shown a destination to tag. We chose locations and a path that would allow the players to familiarize themselves with common buildings and provide the most coverage of the campus.

Once they reached the location they could 'Tag It!' If they were in the correct location they were given a big green checkmark an were congratulated on tagging that location at the time they tagged it. If they were not in the proper location they would be given a red X mark and told they were not in the right location.

If the 'tag' was a success they would be taken to the tag and comment screen. The tag and comment section was a picture of the location with the tags of any players that had already been there superimposed over top of it.

Tagger Success Screen Tagger Comment Keyboard

The players tag would appear and they would be prompted to leave a comment that would be embedded within the tag. After leaving a comment they would be able to click on the other tags and read the comments embedded within them.

Tagger Comment View Screen Tagger Progress Screen

In between each location the player would view a personal progress page displaying the locations they have tagged and the next location on their path.

UCF Campus Map UCF CAMPUS MAP

As the players went from location to location they would become familiar with the campus and the routes to and from the different locations.