Tragedy of the Commons
Redesigned in-class educational tool to increase classroom engagement
Timeline
January - August 2026
Team
-
Progressive Insurance Commercial Auto
-
CMU MHCI Capstone
Role
-
Product Designer
-
Technical Lead
-
Product Manager
Responsibilities
-
Live Interaction Design
-
Real-Time AI Engineering
-
Research & Strategy
Redesigned UI Used by 1000+ Educators
MIT Game Lab · B2C Lead Product Designer · May 2023 - January 2024
MY ROLE:
I led the redesign of the teacher and student interfaces for Tragedy of the Commons, 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.
PROBLEM:
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.
SOLUTION:
I led the UI/UX redesign across web and mobile, optimizing for multi-user systems
interacting in real-time.
MY CONTRIBUTION:
The redesign was directly shipped into production and became the UI foundation for the entire PSims game series.
Before my design... ...and after
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.
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
Teachers create a session, configure fishing stations, and allow students to join the game.
2. Live Gameplay
Teachers monitor gameplay, pause the game, and manage fishing and store access.
3. Post-Game Reflection
Teachers can share graphs to facilitate class discussion about overfishing
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.
Before my design... ...and After
Outcomes
The redesign improved usability for a classroom simulation already used by 1000+ educators worldwide while establishing a scalable interface foundation for the rest of the games in the PSims series.
-
Redesign was directly shipped into production
-
UI established the visual & interaction standard for the rest of the PSims game series