Jack of Sports
Designing a scalable, data-driven scheduling experience for multi-program sports platforms
Jack of Sports offers a wide range of programs including swimming, soccer, biking, and lifesaving across multiple locations. Their course data is powered by a structured API, but the frontend experience lacked clarity, consistency, and scalability.
I led the design and custom development of a dynamic system that transforms complex API data into structured, user-friendly course tables, improving usability and enabling scalable content management.
Problem
The existing experience struggled with:
Inconsistent presentation of course data across programs
Difficult-to-scan schedules and pricing information
High reliance on manual updates
Lack of structure when handling nested API data
The system was data-rich, but experience-poor.
Approach
I reframed the problem from:
👉 Displaying data → Structuring decision-making
Key principles:
Organize complex data into predictable patterns
Improve scanability and comparison
Reduce cognitive load
Build a system that scales across programs and locations
Solution
Structured Data Mapping (API → UI)
The API returned deeply nested data:
Program
Lesson type
Schedule
Time blocks
Pricing
I designed a structured mapping system that translates this into a consistent UI hierarchy.
Custom API Integration & Dynamic Table Rendering
To support multiple swim program locations with varying lesson types, schedules, and pricing structures, I developed a custom JavaScript solution that fetches structured data from a REST API endpoint and programmatically renders responsive course tables.
The script parses nested program data (program → lesson type → day → time blocks) and dynamically builds grid-based layouts using the existing Webflow class structure. It conditionally formats date ranges, pricing, and multi-block time schedules, and generates contextual registration links using program IDs returned by the API.
The implementation handles multiple program groupings per location, preserves consistent visual hierarchy, and eliminates the need for manual content updates. By separating data from presentation, the system ensures that any backend changes automatically reflect on the front end without additional design intervention.
Scalable Table-Based System
Introduced a clean, structured table layout:
standardized columns (location, time, duration, cost)
consistent formatting across all programs
improved readability and comparison
This allowed users to quickly understand and compare options without friction.
Challenges
Handling complex nested data
The API structure introduced multiple layers of hierarchy that didn’t translate directly into UI.
→ Solved by defining a clear UI structure before designing components
Balancing flexibility with consistency
Different programs had varying structures and requirements.
→ Solved by building adaptable templates within a consistent system.
Maintaining performance and clarity
Large datasets risked overwhelming users.
→ Solved through structured layouts and prioritizing key information.
Mega Menu, Reimagined
Replaced a clunky multi-level dropdown with a clear, scannable mega menu that surfaces programs, locations, and pathways in one view. Designed and built end-to-end to reduce friction, improve findability, and make navigation feel fast and intuitive.
Motion & Interaction Design
Subtle animations and interaction patterns were designed to support clarity and feedback throughout the experience, rather than act as decorative elements.
Loading states, transitions, and hover interactions were carefully timed to reinforce system responsiveness and guide user attention. This helped make a data-heavy interface feel more intuitive, responsive, and easier to navigate.
Motion was used to:
Provide feedback on user actions
Improve perceived performance during data loading
Guide focus between sections and interactions
Maintain a smooth and cohesive experience across dynamic content
1000+
Schedule entries dynamically generated across programs and locations
50%
Reduction in manual content updates through API-driven rendering
2x
Faster course discovery and comparison
1
Scalable system replacing inconsistent layouts across experiences
This project reinforced that designing for data-heavy systems is not about showing more information, but about structuring it in a way that supports quick, confident decisions.
The biggest shift was moving from a content-driven approach to a system-driven one, where the interface adapts to data while maintaining clarity and consistency.
It also highlighted the importance of bridging design and development, ensuring that data structures and UI patterns work together seamlessly to create a scalable experience.