Emilie Zhang's Portfolio
PSims
MIT Game Lab, Scheller Teacher Education Program (STEP) & Education Arcade; Prof. Eric Klopfer & Rik Eberhardt
Team
MIT Game Lab, Scheller Education Arcade; Prof. Eric Klopfer & Rik Eberhardt
​
Emilie Zhang, Wellesley College
Tanya Estrina, MIT
My Role
UI Designer, UX Designer, Game Designer
Timeline
May 2023 - January 2024
Tools
Figma
Firebase & Javascript
Tragedy of the Commons (ToC) is a Psim (participatory simulation) game about cooperation, competition and management of shared resources. Based on a well known economic problem, the game challenges players to be “successful fishers” by buying boats and going “fishing” in a finite number of fishing spots, and (as it turns out) a limited amount of fish. Players must figure out how to manage the shared resource and define what it means to be successful.
​
My Role:
-
Redesigned the original UI by separating and modularizing the teacher’s dashboard in Figma (my UI became the standard UI for the rest of the PSim game series).
-
Replaced the students’ dashboard icons with original designs chosen after extensive A/B testing.
-
Developed gameplay logic and UI flow for Virus Game & ToC Psims, simplifying concepts and determining the placement of functions
Tragedy of the Commons (ToC)
Project Specifics
The PSims series uses active, inquiry-based learning to push the boundaries of education by explaining complex concepts in relatively straightforward gameplay experiences. We work with educators to make sure our games tie into their math and science curricula.
​
Tragedy of the Commons is based on a well known economic concept that believes that when people have unlimited access to a finite and valuable resource, they will most likely overexploit it, ending in a tragedy where the resource becomes destroyed for all.
Photo above: credit from MIT STEP Lab, Tragedy of the Commons. Photo to left: credit from Tragedy of the Commons Slides, located on same website. Rules referenced from Tragedy of the Commons Documentation
To simulate this economic concept, our game has some rules:
-
The facilitator creates stations for the players to fish at and sets up the initial parameters, like the amount of fish. The number of fish set for each station determines the starting amount
-
The players walk around scanning the QR codes of various stations in order to “fish” from them. In between "seasons" or rounds, players are allowed to buy better equipment to improve fishing yield.
-
Players will be taxed at the start of each "season," or round.
-
While the number of fish at each station doubles at the start of each season, the players equipment are also improving, meaning that...
-
...inevitably, the fish at the stations will decrease and eventually be completely depleted from "overfishing," thus resulting in the tragedy of the commons.
My Contributions:
In the summer of 2023, I became a recipient of the Paul B. Beal and Mona Philips Beal Internship Fund at Wellesley College. With this opportunity, I was able to intern at the MIT Scheller Education Arcade under Richard Eberhardt, where I worked with an amazing team of MIT students, professional software engineers, and game designers.
​
When I joined the team, Tragedy of the Commons had already been used by thousands of educators for years and featured a complex set of established game mechanics and rules. However, almost all complaints were about the same issue: an unappealing and unintuitive user interface. For example, the interface for the teacher's dashboard in the three different game states (before, during, and after gameplay) were all on one page. Furthermore, the student dashboard was unintuitive, making the game confusing not only for teachers but also for students, which significantly limited its usability for students in younger age groups.
​
That's where my skills in the UI subdomain came in handy. To untangle all the functions of the teacher dashboard and optimize the student dashboard, I:
-
overhauled and split the teacher dashboard into 3 different screens accessed at different points in the game corresponding to the different game states (before the game starts, during the game, and after the game ended)
-
redesigned the student dashboard with consideration of the game's core themes and rules
-
created original, custom-made icons picked through A/B testing
​
For example, I was able to bring the initial starting interface for the teacher dashboard...
...from this...
...to this,
and the student dashboard...
...from this...
...to this. Let's break it down
1. Deconstructing Teacher Dashboard
Originally, the game’s teacher dashboard had only one interface for the entire experience, meaning all functionalities—setup, live monitoring, and post-game actions—were crowded in one screen. This resulted in a confusing and cluttered UI that made it difficult for facilitators to focus on relevant tasks—and impossible for them to share their screen with the class—since students would be able to "cheat" with game details.​
Stripped Functionalities
To address this, I made the decision to deconstruct the UI into three separate screens, each tailored to a distinct phase of gameplay: before, during, and after the game. I began by stripping the original interface down to its core functions and identifying when each feature was actually needed. For example, the ability to add stations was only needed on the pre-game settings screen, while the player list needed to remain accessible throughout.
Preliminary Design (Functionality-based)
In the end, I designed: (1) a join screen for projecting the game code before the game starts, (2) a private in-game view for the teacher to prevent students from seeing live game dynamics during the game, and (3) a post-game screen featuring a leaderboard the teacher could project for class-wide discussion and reflection.
2. Building on Critique
Another hard part about the teacher's dashboard was figuring out how to intuitively display the change between "fishing" and "in store," two exclusive states that the players could be in. These two states were specifically controlled by the teacher, and was previously stored in two different places.
With the help of my teammate, we created several new designs and conducted user studies to see which one was the most intuitive.
When we presented our initial UI flow to our team lead, however, he asked why we hadn’t considered using toggles to manage game states. Due to the complexity of the game logic, we explained that the interface would require at least three separate buttons: one for fishing, one for the store (trading), and one for progressing to the next season. However, his feedback challenged us to rethink our assumptions. We realized that because “fishing” and “store” were mutually exclusive, they could be unified into a single toggle, streamlining the interface and reducing cognitive load. This insight ultimately led to the final, more intuitive design below.
Teacher Dashboard: Final Design
Hosting, Resetting & Restarting
After entering a unique game code, teachers can choose ToC from the list of games and begin. This video simulates what it would look like after adding 3 stations. To reset the stations in this game, click the blue reset button. To restart the game entirely, click on the red home button.
Main Functions
To go back, and make changes to the stations or players, press back. Teachers can manually set whether trading is active or inactive, as well as if the players are fishing or in the store. To go to the next season/round, players must have fished at least once, and been in the shop at least once. Statistics will dynamically update.
Managing Players
Teachers can manage the list of players in the purple players button. To delete a player, hover over their name under the joined list. To accept or reject a player request, hover over the name to do so.
Pausing & Leader Board
To pause the game for all players, press on the green pause button. When paused, in-game elements will no longer be controllable for teachers and students alike, forcing students to focus on the teacher. Statistics like the leaderboard will still be accessible so that the teacher can pause and share everyone's standing during the game.