Flagship product case study

CoachCanvas

Club & Player Management App

CoachCanvas replaces scattered WhatsApp groups, spreadsheets, and ad-hoc tools with a structured system that still feels simple for non-technical coaches and players. It focuses on clear information hierarchy, multi-role onboarding, club creation and management, and state-aware navigation that always takes users to the right place based on their role and status.

Problem

Grassroots football clubs often run on scattered WhatsApp threads, spreadsheets, informal approvals, and coach memory. That creates friction for onboarding, player management, and match preparation.

Opportunity

Create a structured club workspace that still feels simple enough for non-technical coaches and players to use every week.

Outcome

CoachCanvas demonstrates the full product loop: problem framing, UX flows, mobile UI, backend structure, role-based logic, and release preparation.

Reflection

The biggest learning was that mobile product quality depends as much on state design as visual design. The app needed to understand where each user was in the club journey before any screen could feel simple.

Stack

React NativeTypeScriptFirebase AuthenticationFirestoreFirebase StorageReact NavigationGradleAndroid StudioMetro bundlerFigma

Product thinking

Separated coach and player onboarding so each role only sees the decisions that matter to them.

Mapped the app around user state: unauthenticated, profile incomplete, club owner, pending join request, approved player.

Made club identity visible across the experience so a join code feels connected to a real team, not a generic form.

Design decisions

Designed onboarding as a guided sequence instead of a long form.

Used branded club previews to build trust before a player submits a join request.

Kept home screens role-specific so managers and players land on different priorities.

Engineering decisions

Built state-aware navigation with React Navigation so users always land in the correct flow.

Structured Firestore around users, clubs, players, and join requests to keep ownership boundaries clear.

Handled Android build, signing, and release APK debugging to move beyond prototype status.

Responsibilities

Designed and implemented multi-step onboarding wizards for coaches and players, capturing rich club and player profiles.

Built club creation and management flows, including visual identity, squads, and member approval workflows.

Implemented a secure join-code based onboarding system that connects players to the correct club with branded previews.

Designed role-specific home experiences for managers and players, reflecting states like pending approval or active membership.

Structured Firestore collections and services for users, clubs, players, and join requests with clear separation of concerns.

Set up and debugged the Android build and signing pipeline, producing stable release APKs for real devices.

Highlights

Multi-role onboarding that feels like a guided conversation rather than a form, tailored separately for coaches and players.

Club creation with real identity — logos, jersey colors, and descriptions that carry through the entire experience.

Join-code and approval workflow that lets coaches fully review rich player profiles before accepting them into the club.

Navigation that adapts to auth state, profile completion, club membership, and join-request status without dead-ends.

Production-ready Android build demonstrating a complete pipeline from design and architecture through to distribution.

Screens

Product details

01 / overview

CoachCanvas onboarding and loading experience

02 / features

CoachCanvas manager and player home screens

03 / features

CoachCanvas match history and stats screens

04 / process

CoachCanvas formation and lineup management screens