Redesigned the entire events system across web and mobile — from event creation to attendance tracking, RSVP, and live game states.
Courtside is a sports management platform that helps coaches, academies, and sports organizations manage their teams, schedules, events, and communication — across web and mobile apps. It serves multiple user types: coaches/admins, athletes, and parents/guardians.
The events system is the core daily workflow for coaches — they create training sessions, matches, and tournaments, track attendance, manage RSVPs, and run live game-day operations from it.
The existing events experience was built incrementally over time and had accumulated significant UX debt — inconsistent patterns between web and mobile, unclear information hierarchy, and workflows that didn't scale as the product added features like recurrence, sub-events, and live game states.
Design a unified events experience across web and mobile that lets coaches create, manage, and run events with minimal friction — from planning a season's schedule to tracking attendance during a live session.
Conducted an audit of the existing events screens across web and mobile. Referenced competitors and other apps like Jira for notification behavior patterns.
Worked closely with the dev team to understand technical constraints — what was feasible within the current architecture, where the backend could support new UI patterns, and where workarounds were needed. Multiple connect calls to review UI issues on the feature build and align on implementation.
Explored multiple variations for how live/in-progress events should appear in the schedule view. Tested different approaches for the "live" tag — icon-only, text-only, color treatments.
| Option | Description | Tradeoff |
|---|---|---|
| Green dot + "Live" text | Subtle indicator with text label | Clear but uses a color that might clash with existing palette |
| Animated pulse | Animated dot to draw attention | Eye-catching but potentially distracting in a list |
| Text-only "LIVE" | Simple text badge | Least intrusive, chosen because "we're not broadcasting the match" |
Went with text-only "LIVE" label. Since Courtside isn't a broadcast platform, an animated indicator felt out of place. Adjusted the green to be more saturated and darkened for contrast accessibility.
Redesigned how coaches mark attendance for athletes during events. Proposed auto-save to reduce friction — removing the per-athlete save button in favor of auto-saving on selection.
Designed two layout options for showing attendance statistics (present, EA, UA, conflict, late) on the event detail view.
During implementation, identified that the green used for positive states was too bright and failing contrast tests. Saturated and darkened the green, updated the color code, and communicated the change to the developer directly.
Designed both web (desktop) and mobile versions, with intentional differences in layout and information density. The schedule view, event details, and attendance tracking were all adapted to each platform's strengths while maintaining consistency in interaction patterns.
Created Figma pages with auto-layout screens for developer reference — spacing, colors, and component structure. Shared dedicated Figma page links ("New Enhanced UI" page) with devs for reference. Filed and tracked Jira tickets for each sub-feature (CUI-76 epic, CUI-81, etc.).
Connected regularly with Gufran for UI implementation issues — reviewed stage and feature builds, flagged discrepancies, and iterated on implementation.
- Earlier involvement of dev team in design exploration phase
- More structured usability testing with actual coaches