Smog Solver

A web game to simulate environmental control on smog

TYPE

Course Project

DURATION

April - May 2017

TEAM

Individual Project

KEYWORDS

Game Design
Rapid iteration
Environmental Simulation

Overview

This is an individual semester project and I expanded it to be my Master's project. The goal is to design a web game simulating environmental control on the smog problem in Beijing. User should get a better understanding of the complexity of causes and solutions of the smog problem through replays. I iterated my first version of design based on the results of usability test using interactive mock-up built by Axure. Then I built the simulation using Phaser.js and JavaScript.

Play with live demo.

(The voice-over may sound a little hasty because of the 3-minute constraint of the assignment requirement. Sorry about that.)

Methods

Literature review, wireframing, usability test

Tools

Balsamiq, Sketch, Axure, HTML/CSS, Phaser.js, JavaScript

Background

Air pollution has been a major issue in China. According to a new study, it is responsible for the deaths of about 1.6 million people in China every year. Smog has been a hot topic in the public, but most people don’t understand the complexity of its cause and solution. Actually, smog would require macro solution. Policies and mechanisms need to be all-encompassing to succeed.  So after user understands the issue by replaying the simulation, they can better support government’s work to address the problem.

Similar artifacts

There are not many existing simulations related to air pollution.

Smog City 2

- A simulation with instant results

- Control weather, emissions and populations

Pollution simulator

- A simulation with instant results

- Control weather, emissions and populations

Design

System design

I abstracted the causes of smog to be coal burning and vehicle emissions. User would mainly control the burning of coal and vehicle emissions by building or destroying different types of power plants as well as restricting or encouraging different types of vehicles. User would begin with certain amount of money, they need to allocate the money to build power plants or encourage clean-energy vehicles. Basically, the cleaner, the more expensive. Public satisfaction is related to air quality, but will be affected if the government restrict number of old vehicles. User would also need to consider balancing the economic growth. It would affect the amount of money user begins with in the next round.

Flowchart

Wireframing

Hi-fi prototype

After I finished visual design, I created an interactive prototype with Axure, which can be found here.

Iteration

Usability test

I conducted 6 sessions of usability test. Overall, the feedback was very positive although some usability problems were identified. Then I iterated my design based on these feedback.

[Problem] Screen automatically jumps to the next before user have time to read all the text.

[Solution] Use a “next” button instead of changing screen automatically. Let the user take the control.

[Problem] The biggest part of the screen (map) has the least functions.

[Solution] Add a panel to the main screen showing the summary of the number of the factories and vehicles as well as the trend of the global variables changes.

[Problem] It requires too much mental effort to figure out the effects of one action on the three global variables respectively.

[Solution] Use color help user understand whether the action leads to a positive or negative effect on the three variables in order to meet the final goal.

[Problem] User forgets the meanings of icons of the global variables.

[Solution] When the cursor is hovering over icon, show the name of the global variable.

[Problem] User needs to click back and forth to compare the effects of different actions.

[Solution] Give a preview of the effects of the action when the cursor is hovering over the button.

[Problem] The graphs of the three variables changes are requires much mental efforts to understand.

[Solution] Show the ideal states in the graph to help user understand if the variables are changing toward the right direction.

Implementation

After I finalized the design, I built the game with a HTML5 game framework, Phaser and JavaScript.

Play with the live demo.