Tragedy of the Commons
Redesigned in-class educational tool to increase classroom engagement
Timeline
May 2023 - January 2024
Impact
Created a new UI foundation for the entire game series
Role
-
Product Designer
-
Team Lead
Responsibilities
-
UI design
-
UX research
-
Implementation handoff
Context
Tragedy of the Commons is a game developed by MIT’s Game (STEP) Lab. The game is used by 1,000+ educators worldwide to teach economic concepts like shared resource management.
The game supports dozens of middle to high school students interacting simultaneously on mobile devices, while teachers facilitate gameplay through a web-based dashboard. While educators had been using the simulation for years, the interface had become outdated and difficult for teachers to run.
I led the redesign of the teacher and student interfaces across web and mobile, optimizing for multi-user systems interacting in real-time. My designs were directly shipped into production and became the UI foundation for the entire PSims game series.
Figma design of home page
Impact
-
Created a new UI foundation for the entire PSims game series.
-
Redesigned a single-screen dashboard to 3 context-specific interfaces
-
Designed new icon system validated through A/B testing
-
Reduced teacher cognitive load during gameplay management
-
Improved accessibility for younger students and first-time players
Desktop Redesign
Teachers Ran Everything on One Screen
Although the game was widely used by educators in middle and high schools, the interface made classroom facilitation unnecessarily difficult.
The teacher dashboard had only one screen. This meant everything from 1) setup tools, 2) live gameplay controls, and 3) post-game analytics were all on one screen, forcing teachers to scan irrelevant controls while managing an active classroom.
The single interface also created a practical problem. Teachers often pause between rounds to discuss results and project the scoreboard, but the layout exposed hidden gameplay information students could exploit. As a result, the interface—not the game mechanics—became the main barrier to running the simulation smoothly.
Previous interface before redesign
Designing for the Realities of a Classroom
Rather than beginning with individual components, I began by restructuring the interface into the 3 actual phases teachers go through.
Setup, live gameplay, and post-game reflection were now handled in 3 separate game states, corresponding to 1) before, 2) during, and 3) after the game. Each screen surfaces only the controls relevant to that moment in the simulation. This change reduced cognitive load during gameplay and allowed teachers to confidently share the interface with students during discussions.
The redesigned interface adapts to the current stage of the simulation.
1. Pre-Game Setup
Screenshot of prototype used for helper chatbot study iteration 1
This is the first interface that educators see, and is the stage where educators configure the game settings. They can create a session, determine how many fishing stations there are, and allow students to join the game.
2. Live Gameplay
This is the screen that the teachers will see during the game. Here, teachers can monitor gameplay, pause the game, and manage fishing and store access.
3. Post-game Reflection
Unlike the previous UI that had no leaderboard features, we created a post-game UI that allowed teachers to safely share game data to the class in order to facilitate class discussions.
In this redesign, setup, live gameplay, and post-game reflection were now handled in 3 separate game states, corresponding to 1) before, 2) during, and 3) after the game. Each screen surfaces only the controls relevant to that moment in the simulation. This change reduced cognitive load during gameplay and allowed teachers to confidently share the interface with students during discussions.
The redesigned interface adapts to the current stage of the simulation
Mobile Redesign
Making the Student Interface Self-Explanatory
Students interact with the game on mobile devices while physically moving between QR-coded fishing stations.
The original interface used the same icon for every station, regardless of population. Many players—especially younger students—missed the differences between stations, forcing teachers to pause gameplay to clarify.
I redesigned the icon design system and validated it through A/B testing, selecting the versions students most consistently associated with volume. I further led accessibility efforts to ensure the iconography was interpretable across diverse visual abilities. The result was a clearer mobile interface that required far less explanation during gameplay.