WHO'S ON FIRST?
ROLE
Frontend Developer
UI Designer
TOOLKIT
React. Figma, Flask
TEAM
2 Members
(Jared Maeyama - Model & Backend)
TIMELINE
2 Months (2024)
OVERVIEW
"Who's on First" is a web-based baseball defense simulator, created during the 2024 SportsMedia Technology (SMT) Data Challenge. It is built with the goal to help coaches and players optimize their defensive lineup.
CHALLENGE
Designing For Exploration & Iterations
How can we design a rapid iteration tool that helps baseball coaches and players explore & optimize their defensive lineup more effectively?
SOLUTION
Web App Designed for Dynamic Visualization Workflow
To support exploration and rapid iterations, I designed a single screen web interface that allows users to:
Visualize Lineup on the Interactive Field Map
Easily Modify Lineup with Persistent Search Panel
Get Immediate Feedback from the Evaluation Report
PROTOTYPE
Three-Column Interface
Users can quickly edit the lineup, run simulations, and view results—all on a single page for quick iterations and easier navigation.
PROTOTYPE
Interactive Baseball Field
Dynamic field visualization provides spacial context to list of player positions. This design choice allows users to visually confirm the defensive setup and quickly spot positional gaps or mismatches during the exploration process.
PROTOTYPE
Dynamic Search
The integrated search bar allows users to search using a combination of name, id, and positions. Most importantly, Search result immediately show crucial player status to aid strategic decision making.
PROTOTYPE
Comprehensive Evaluation Report
The report transform model evaluation and simulation into clear and actionable insights. The design highlights top and bottom players based on the model's calculated performance metrics along with detailed metrics for individual players.
