This is a personal project that I put together in 24 hours! The project is called Learning Pittsburghese, and is an interactive game designed for a hypothetical online learning course.
I created this page to visually show my design process, and give visitors a better idea of how I would go about research, formulating ideas, and creating content.
The objective of Learning Pittsburghese is to get users familiar with words and phrases of our local dialect (I thought this would be fun because I am surrounded by material and inspiration!).
After creating the game’s objective, I did some research to figure out important parts of Pittsburghese that outsiders should know about. In place of working with professors, my research consisted of reaching out to friends who have lived in town for most of their lives! Above is the list we came up with.
Next I designed a map of how users would navigate the game. To keep it interesting, I designed different paths to take. This allows users to play multiple times with and discover different results!
Using many words and phrases from my researched list, I wrote corresponding scripts for each frame. Words are used with context and often appear more than once, which helps users become familiar with the dialect. Each script takes the user on a story arc following 3 Pittsburghers.
With the brainstorming, research, designing, and dialoguing all mapped out, I was ready to start coding in html!
I began coding by making a folder and creating all of the pages needed for the game.
Next I edited .css reset and style sheets so the game would look uniform on every page and on any browser.
Starting with the index.html, I filled in content and began editing links so the user could go down multiple paths in the game.
Since I didn’t shoot the footage yet, I put in placeholder videos from YouTube. The embedded videos are coded to exclude “titles” and “recommended videos”.
On Sunday afternoon Abbie and Alex helped shoot all of the scenes. After a little editing, I uploaded the videos to YouTube. Next, I added closed captioning to help users follow along with the Pittsburghese!
And there it is! My interactive game was created from start to finish in under 24 hours. I have attached a link to play the game. Download the WEBSITE folder from Google Drive, and start by opening up index.html in any web browser. I hope you enjoy the game!