Passport of Play — Leaderboard & Score System
Designed and shipped a score management system for 200+ concurrent students, cutting staff workload by 40% through AI-assisted design-to-code workflows.
Museum of Solutions A children's museum needed a score management system that could handle 200+ concurrent students reliably, operated by non-technical staff with zero training overhead.
Observed staff in the field, designed the full system architecture, then compressed a 6-week build using AI-assisted design-to-code workflows.
Zero critical failures at launch, 40% reduction in staff time on score entry, and live leaderboard updates within 3 seconds.
Field Research
Shadowed floor staff across three school visit days, documenting failure points in the existing manual workflow. This gave me the behavioural data to design workflows staff could follow without any training.
System Architecture
Mapped the full technical system (server logic, zone clients, leaderboard display, and staff CMS) before touching interaction design. Getting the architecture right early meant no costly rework later.
AI-Led Prototyping
Used AI-assisted coding workflows to build functional prototypes from Figma specs, iterate with real data on the museum floor, then harden for production. This compressed a 3-month build into 6 weeks.
Staff Rollout
Co-designed a short onboarding session and a one-page visual reference card. Post-launch, staff score-entry time dropped significantly and visitor disputes fell to near-zero.
CHALLENGE
Manual tracking at scale
The Passport of Play is a gamified engagement system at the JSW Museum of Solutions in Mumbai. Visitors, primarily school children, earn colour-coded tokens as they move through interactive zones. Each token carries a specific point value:
| Token | Points |
|---|---|
| 🔴 Red | 10 |
| 🟡 Yellow | 50 |
| 🟢 Green | 100 |
| 🔵 Blue | 200 |
At the end of each visit, staff count collected tokens and enter the totals into the admin app, which computes the score automatically:
Score = (Red × 10) + (Yellow × 50) + (Green × 100) + (Blue × 200)
If a child returned later in the week, only the additional points from that visit counted toward the weekly leaderboard. Their overall cumulative score continued to grow, making it a fair, repeat-visit-friendly competition.
But the scoring was entirely manual: staff juggled paper sheets and spreadsheets to track hundreds of students simultaneously. Score disputes were frequent. Staff spent 40% of their time on data entry instead of visitor engagement. Children disengaged when leaderboard updates were delayed. This wasn’t just a UX problem. It was eroding the core museum experience.
TECH STACK
| Tool | Role |
|---|---|
| Python — Tkinter, Gspread, Pandas | Desktop admin app with Google Sheets integration |
| Flask | Live leaderboard web server |
| Google Sheets | Real-time editable backend (no separate database) |
| PyInstaller | Packaged both apps as .exe for non-technical staff |
| ChatGPT + Deepseek-R1 | Architecture planning, debugging, code optimisation |
| VS Code | Primary IDE with live AI-assisted refactoring |
The no-database approach using Google Sheets as the backend was a deliberate choice. Non-technical staff could monitor and adjust entries directly, without needing a CMS or external tool.
STRATEGY
Design-to-code, AI-assisted
From the field research, I mapped the full system architecture before designing a single screen: server logic, zone client interfaces, the leaderboard display, and the staff CMS. Getting the structure right early meant no costly rework.
For execution, I used AI-assisted design-to-code workflows throughout: designed in Figma, scaffolded functional front-ends with AI, iterated on real data with the floor team, then hardened for production. The approach compressed a 3-month build into 6 weeks without cutting quality.
Phase 1: Admin App (PoP Admin v2.0)
Built in Python (Tkinter), packaged as a .exe for non-technical staff. Key decisions: username-based authentication, auto-generated Passport IDs in MUSO00000 format, and dynamic field locking after ID lookup. Arithmetic-friendly token fields (supporting entries like 10+5) reduced data entry friction significantly. A changelog tab logged every action with timestamp, device name, and before/after values, giving the team a full audit trail without any extra steps.
Phase 2: Live Leaderboard (Flask)
A Flask web app that auto-fetches live scores from Google Sheets and refreshes every 15 seconds. Ranked top-three positions with visual emphasis, tied-score detection with merged name display (e.g. Riya [TIED] Jiya), and week-based filtering. Packaged as a .exe with a GUI launcher so staff could deploy it without touching a terminal.
FINAL BUILD
Debugging the Agent
The AIs made many mistakes along the way: forgetting to lock the Passport ID field, applying wrong formulas, dropping fields from the log, or breaking the GUI layout while updating spacing. Every time, I caught it. Like true collaborators, ChatGPT and DeepSeek adapted instantly when redirected.
RESULTS
Zero failures. Measurable gains.
The system launched without a single critical failure during high-footfall school visits. Staff adapted quickly, with onboarding taking under 2 hours per person. Score-entry time dropped by 40% and visitor disputes fell to near-zero.
Both apps now run at the Museum of Solutions during their Summer Trip and Passport of Play programmes, powering the entire visitor engagement system.
This project demonstrated what design-to-engineering fluency can unlock: a designer who can prototype and ship working systems, not just hand off specs, takes a fundamentally different kind of ownership of the outcome.