Designed and prototyped in HTML/CSS/JavaScript simulation about the home-waste composting process as a part of the Interaction Design class project

Design Process​​​​​​​

Since I had never designed a simulation before, to understand how simulations are designed, I analyzed multiple simulations including Third World Farmer, Climate Challenge, Ayiti, and Stop Disasters using the theoretical concepts taught in class. I compared their features and mechanics to understand the underlying design patterns and think about ideas for my own simulation project.

For my simulation assignment, I chose home waste composting as the topic because I had personal experience with it and I knew enough about the process. It suited well for simulation design because it is a complex turn-based process with multiple variables, variables can be manipulated independently in multiple ways, and those manipulations can lead to multiple outcomes depending on the constraints.

I searched online to find if there were any other simulations about the same topic. I found three: Compost4Fun (no longer available), Media piece from Keep America Beautiful, and Aerobin. I compared them against my design ideas.

My first idea was to build a waste composting manager game where the user would need to continue composting the waste generated each week and take care of the compost piles by maintaining optimum moisture and air content. The constraints would be money (limited money to buy supplies) and space (limited bins to compost). These constraints would force the user to optimize resources in the process of composting.

When I presented this in class, I got the feedback that there were too many variables in the game and I needed to scope the project down to match the time constraint of the semester. Also, money did not seem like the most suitable motivator considering this was an environmentally conscious topic.

Based on this feedback, I simplified and scoped down the gameplay. The goal, now, was to balance the moisture content of the compost pile, and the constraints were limited bin capacity and limited waste thrown to landfill (and not composted). The updated flow is shown below:

I quickly sketched the prototype on paper, showed it the professor, and developed it in HTML, CSS, and JavaScript. Here is the first version of the live prototype.

I tested this prototype with 4 students in the class. I learned that gameplay felt too long, there was no purpose to visually separating waste photographs, and visual feedback for some actions was unclear. For the next iteration, I reduced the number of turns from 12 to 8, surfaced more information about the waste, and designed clear visual feedback for user actions.

Those decisions were tested and validated by another round of testing with 4 different students. Here is the updated version of the live prototype.