Alice, who was our client of the project, asked us to create a game making tool for middle and high school students who have no experience of game design and programming. Also, our client wanted to use this tool in school curriculum for computer science teachers.

We chose 2D adventure game genre for this tool, because of these following reasons: 1) Adventure games are simple to teach basic game design process. 2) Adventure game mechanics align well with programming patterns. 3) There is no really good novice adventure game authoring platforms.

Our deliverable is standalone 2D cross-platform application that can be used in both home and classroom settings.

Before designing our solution, we conducted survey and interviews with middle and high school students in order to better understand our target audience. The goal was 1) to find what kind of game/app interface they are familiar with and 2) to see how they solve the problem in adventure game.

Survey & Observation

We conducted the survey at "Engineer the Future" event at the Carnegie Science Center. We met 49 kids from 10 to 19 years old. We gave them questionnaire to fill out and we observed them while they were playing adventure game example we provided.

Interview

We invited a four students and three teachers from Cornell School to our project room and we conducted a semi-structured interview with them. We talked about what kind of games and tools they use on their school computers, and what kind of challenges they faced in computer science education.

Analyze

We created personas and user journey map based on what we found in user research. We tried to create a persona that represents how middle and high school students behave and react to our tool. We assumed that our tool is similiar to current existing block-coding tools.

Key Findings

1) Current existing block-coding tools are too difficult for students who have no programming experience. Students have hard time to convert their thoughts into programming-like logic.
2) Students are not familiar with adventure game concept. They enjoy playing adventure games, but they are not aware of what makes the adventure game from game design perspective.

Design & Prototype

Studying Adventure Games

Before designing an adventure game making tool, we had to be an expert in adventure game. We played a lot of adventure games and tried out various kinds of game making tools. Then, we started to create our own adventure games which we want the students to make from our tools.

This is a simple adventure game we made using our own API. This game includes all the basic game design components of an adventure game. The game is called "Feed the cat". Player has to collect a piece of bread, a knife, and a jam in inventory. Then, the player has to combine those items in a right order. Finally the player has to navigate to the right room and feed the cat.

Paper Prototype

We used paper prototype to refine our design idea. First, we made each component of user interface into paper. Then, we pretended to be the middle school students and tried to make three different kinds of adventure games with the prototype.

Key Findings

1) We found that the language we use in the interface is too technical for teenagers (it was more like a tool programmers use).
2) There was no design guidance in the tool. The tool was giving too much freedom to students, which makes it too difficult for them to start designing a game. In other words, the tool wasn't teaching the design process

Adventure Game Design Language

Based on the findings from paper prototype, we came up with this list of words that can be used in adventure game design. We divided these words in three categories - event, state, and reaction. This classification can lead students to think about how to make a game based on the three steps. It gives more guidance to students. Also, the three steps align well with the programming patterns as well. Event can represent the condition. State can represent a variable. Reaction indicates the result of if-statement.

Wireframe

After making changes in our design, we built a wireframe in order to test our new design. In new design, 1)We discarded sandbox-style interface, and introduced step-by-step interface which gives more guidance to students. 2) We discarded block-coding (object-driven coding). Instead, we introduced global-driven interactions.

We iteratively designed and developed our engine. I participated as a UI/UX designer by providing visual assets and programming UI using HTML/CSS/JavaScript.

Playtesting Day at ETC

We had 3 rounds of 10 to 15 playtesters, all of whom were teenagers. Each participant was assigned to a computer with Alice’s Adventure installed. They were asked to create their first game with instruction. The students were able to grasp the concept of adventure games well enough and they instinctively knew how the scene editor and the interaction boxes worked (However, it has to be noted that a few of them had seen and used tools and programs like this before). Most of negative feedbacks came from expecting polished interactive interface such as reordering the layers of the scenes more intuitively.

Community Center at Johnston Public School

We conducted a play testing session at the community center located at Johnston Public School with 7 participants. We paired up the students on one system and ask them to create their first adventure game with instruction and without instruction. Students wanted to have more freedom when creating a game without instruction. They wanted to put their favorite pop stars or movie figures. They also wanted to have options to import their own assets.

After the user testing, we set up a priority list for bug fixing and new features to introduce. We focused on enhancing usability and readability first. Then we also added new features such as 'import my image' and 'import my sound' in which students can bring their own images and sound to make the game more interesting.