Figma Make Rapid Prototyping
The Challenge:
Operational Chaos in High-Stakes Logistics
Youth sports referee scheduling is a masterclass in operational complexity. Assignors are forced to balance a volatile web of referee availability, varying certification levels, field geography, and league-specific compliance—all across hundreds of games simultaneously.
The Status Quo: Currently, this industry relies on "fragmented legacy workflows": manual spreadsheets, disconnected messaging apps, and rigid league systems that lack the flexibility to handle real-time conflicts. This creates a scalability ceiling for organizations; the more they grow, the more the manual overhead threatens to break the system.
The Strategic Objective
RefSync was born from a desire to move beyond "interface design" and into System Architecture. I set out to explore two core pillars of modern enterprise SaaS:
The Product Question: How do we model a complex, multi-role logistics engine as a scalable, multi-tenant SaaS infrastructure?
The Process Question: How can AI-orchestrated development move a single designer from "visual exploration" to "production implementation" without the traditional friction of a handoff phase?
FigJam Documentation
The Solution: Integrated Product Architecture
RefSync is more than a prototype; it is a platform exploration focused on modeling the structural requirements of enterprise-grade scheduling.
Key Architectural Pillars:
• Multi-Tenancy & Data Isolation: Designing for organization-level tenancy to ensure data security and performance at scale.
• Role-Based Permission Logic: Modeling complex interaction patterns for three distinct personas: Assignors, Referees, and League Admins.
• State-Driven Workflows: Moving away from static screens to a workflow-driven system that manages real-time assignment states and conflict reconciliation.
• Production-Aligned UI: Building a tokenized component library in Tailwind CSS that is 1:1 with the implementation in the Next.js repository.
The Workflow: AI as a Strategic Force Multiplier
Instead of the traditional "Design then Build" waterfall, I utilized an AI-augmented development loop. This allowed me to act as the Product Architect, Lead Designer, and Frontend Engineer simultaneously—maintaining perfect alignment between the user experience and the underlying code.
The Technical Stack
• Core Architecture: Next.js (App Router) for a high-performance, scalable frontend.
• Backend & Auth: Supabase (PostgreSQL) for robust authentication and Row-Level Security (RLS).
• Deployment: Vercel for continuous integration and automated delivery.
The Intelligence Layer
• Strategy & Planning: I used ChatGPT and Claude to stress-test architectural decisions, prompt-engineer complex product logic, and map out the data schema before writing a single line of code.
• Rapid Implementation: Using Cursor and Figma Make, I accelerated the distance between a wireframe and a production-ready React component, allowing for real-time usability testing in a live environment.
Outcome & Strategic Value
RefSync serves as a "living laboratory" for how I approach Product Engineering at the Principal level.
Current Milestones:
• Validated Platform Foundation: Successfully deployed a multi-tenant architecture with secure role-based routing.
• Compressed Handoff: Eliminated the "translation gap" between design and engineering by building directly within the production-aligned system.
• Operational Clarity: Developed a logic-first scheduling engine that resolves the manual bottlenecks found in legacy systems.
The project continues to evolve, proving that for a Principal Product Designer, the ultimate deliverable isn't a Figma file—it’s a scalable, working system that solves a business problem.