Learning Pittsburghese

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.

 
 
white1.jpg

Starting out

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!).

 

Research

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.

 
white4.jpg

UX design

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!

white5.jpg

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.

white6.jpg

With the brainstorming, research, designing, and dialoguing all mapped out, I was ready to start coding in html!

Coding

I began coding by making a folder and creating all of the pages needed for the game.

Screen Shot 2017-09-24 at 1.29.03 PM.png
Screen Shot 2017-09-24 at 1.30.04 PM.png

Next I edited .css reset and style sheets so the game would look uniform on every page and on any browser.

Screen Shot 2017-09-24 at 1.48.32 PM.png

Starting with the index.html, I filled in content and began editing links so the user could go down multiple paths in the game.

Screen Shot 2017-09-24 at 2.24.26 PM.png

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”.

Final steps

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!

Screen Shot 2017-09-24 at 2.28.22 PM.png

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!
https://drive.google.com/drive/folders/0BxPwT28KcVmbaFhfUEtfQ0J0aUk?usp=sharing

Screen Shot 2017-09-24 at 2.33.23 PM.png