Passport of Play - Leaderboard & Score System | AI-led UX Design
Organisation
Museum of Solutions
Team
Visitor Experience
Role
UX Strategy & Citizen Development
Apps Built:
PoP Admin App (Data Entry Application)
PoP Live Leaderboard App (Leaderboard Display Web App)
AI Collaborators:
ChatGPT (OpenAI)
Deepseek-R1 (via OpenWebUI, locally hosted)
Overview
This project began with a clear and ambitious goal: to create a seamless, real-time leaderboard system for the Museum of Solutions’ Passport of Play initiative. The objective was to capture and visualize the scores of participating children as they engaged in various learning activities and challenges throughout the summer.
The system needed to be highly usable for non-technical museum staff, visually clean for public display, and structurally robust to ensure fair and accurate rankings. Rather than building everything manually, I chose to take a collaborative approach—partnering with two advanced AI models to co-design and co-develop the system.
Tech Stack & Tools
Python (Tkinter, Gspread, Pandas)
Built a desktop data entry app with Tkinter for UI, Gspread for Google Sheets integration, and Pandas for data processing.Flask (Python Web Framework)
Developed a live leaderboard web interface with dynamic HTML and auto-refreshing data.Google Sheets
Used as a real-time, editable backend for data storage, scoring, and change logging.PyInstaller
Packaged both the app and server into .exe files for easy deployment.ChatGPT & Deepseek-R1
Used for architecture planning, debugging, and optimizing code—Deepseek-R1 hosted locally via OpenWebUI.VS Code
Primary IDE for development, testing, and live AI-assisted refactoring.
The Process
Project Genesis
The project began with a goal that felt humble on the surface: create a real-time leaderboard display and a complementary data entry interface for a summer learning experience at the Museum of Solutions (MuSo).
As a designer, I wasn’t just solving for UI aesthetics or UX efficiency — I was building tools that had to be used daily by non-technical staff and real-time by visitors.
Passport of Play: Scoring System
The Passport of Play is a gamified experience designed for children visiting the Museum of Solutions during the Summer Festival. As children were to engage with different exhibits and completed activities, they would earn color-coded tokens based on the nature or difficulty of the challenge.
Each token color carried a specific point value:
Token | Point |
|---|---|
Red | 10 points |
Yellow | 50 points |
Green | 100 points |
Blue | 200 points |
At the end of their visit, a staff member would count the tokens collected by the child and enter the totals into the PoP Admin App. The app automatically computed the total score using the formula:
Score = (Red × 10) + (Yellow × 50) + (Green × 100) + (Blue × 200)
This score was to be logged in real-time to a connected Google Sheet. The leaderboard system then ranked all participants accordingly. If a child returned later in the week and earned more tokens, only the additional points earned during that visit were considered for that week’s leaderboard, while their overall score remained cumulative.
This approach created a playful yet fair competition, blending learning and reward in a way that encouraged repeat visits and deep engagement.
Phase 1: Choosing the Architecture
I started by consulting ChatGPT on possible architectures. It offered a range of paths: Firebase, AppScript, Python-Google Sheets, Airtable, and more. After reviewing all options through the lens of usability, privacy, and control, we selected a no-database solution using Google Sheets and Python.
This allowed non-technical staff to monitor or even manually adjust entries in the backend without requiring a CMS or external tool. It also aligned with the museum’s need for transparency and flexibility.
System Map
Phase 2: Building the Admin App
The PoP Admin App v2.0 was developed using Python’s Tkinter library. ChatGPT helped bootstrap the interface with login systems, search capability, and conditional flows depending on whether a Passport ID already existed.
LeaderboardAdminApp/
├── main.py
├── PoPServiceKey.json
├── logo.png
├── ico.ico
Inputs | Actions |
|---|---|
Passport ID | Search ID |
Player Name | Submit Entry |
Age, Contact | Delete Entry |
Tokens (red, yellow, green, blue) | Modify (checkbox) |
Over time, we added:
Username-based authentication referencing a separate protected sheet
Auto-generated Passport ID field (MUSO00000 format) with input restrictions
Dynamic field locking after lookup
Search, create, modify, and delete functionality
Live score preview based on four token types (Red, Yellow, Green, Blue)
Formula injection into the Score cell for dynamic Google Sheet calculations
Arithmetic-friendly token fields (supporting entries like 10+5)
Field validation and error handling
A scrolling UI with stylized branding, Work Sans fonts, and logo integration
Action logging in a Changelog tab, storing action type, timestamp, device name, username, and before/after value changes
A launcher .exe for non-technical usage with embedded icon and browser launch shortcut
Phase 3: Building the Live Leaderboard App
Once the data was reliably being stored and logged, I built the complementary Flask-based web app that would display a live, updating leaderboard.
LiveLeaderboardApp/
├── main.py
├── templates/
│ ├── index.html
├── static/
│ ├── logo.png
│ ├── icon.ico
Features included:
Automatic data fetch from a published Google Sheets CSV link
Sorting participants by score in descending order
Formatting for top three positions with color and font emphasis
Detection of tied scores and visual merging of names (e.g., Riya [TIED] Jiya)
Combined Passport IDs for tied players
Responsive table with alternate column layouts for longer lists
Dropdown selector to view leaderboard by week
Automatic refresh every 15 seconds
Timestamp showing last refresh
Graceful fallbacks if data is missing
A .exe launcher with icon and GUI window that makes the web app instantly accessible
Each of these features was co-built with the AI models, but critically, I drove the refinement process. ChatGPT would provide drafts and logic. I would test, identify flaws, and when needed, switch over to Deepseek-R1 to reframe the approach or clean the logic.
Debugging the Agent
Let’s be honest — the AIs made many mistakes:
They forgot to lock the Passport ID field.
They skipped score calculation or applied the wrong formula.
They dropped fields from the log entirely.
They broke the GUI layout while updating visual spacing.
But, through trial and error, I caught it. Every time.
And like true collaborators, ChatGPT and DeepSeek adapted instantly.
Results
By the end, I had delivered two fully functional applications:
PoP Admin App v2.0
Secure credential system
Google Sheets-based backend
Token-based live score computation
Intuitive, scrollable interface
.exe packaging for deployment
Full-fledged Changelog recording
PoP Live Leaderboard v2.0
Web-based live leaderboard
Tied score merging
Week-based filtering
Refresh and timestamp display
Embedded styling and responsive layout
Packaged as .exe with GUI launcher
💡Both apps now run at the Museum of Solutions during their Summer Trip or the Passport of Play, powering an entire visitor engagement system.
Reflection
This project was more than code. It was about designing systems with intelligence—human and artificial. It was about vibe-based design: understanding user behaviors, creating aesthetic feedback loops, and orchestrating invisible automation to feel intuitive and empowering.
With ChatGPT and Deepseek-R1 as my co-creators, I brought these apps to life faster, deeper, and more reliably than I could have done solo. Probably, It could've taken me months to learn to code perfectly and even then fail to build reliably. But the fact that these AI's at my disposal were able to write codes for the desired functions so quickly made us a great team.
The future looks bright and dark both for tech people and I believe I am on the former side.