Feel Pro Club Docs

Appearance

0009. Profile, Settings, and Support ​

Status: Approved Author: Codex Created: 2026-03-09

Overview ​

This PRD defines the self-service account area of Feel Pro Club: the personal profile hub, personal-data editing, a dedicated settings screen, the help & support screen, a product feedback entry point, and the about screen.

Problem Statement ​

Users need one place to understand their current player data, maintain both of their player-facing profiles, change basic account information, and get help without leaving the app. They also need a structured way to report problems, request features, and understand the product — all without mixing support, feedback, and documentation into a single undifferentiated surface.

Goals ​

  • Make the profile area a clear source of truth for what the app currently knows about the player.
  • Let users update personal data and reopen onboarding-style profile flows in edit mode.
  • Provide fast self-serve help by routing users to the external help center before escalating to support.
  • Separate support (problems) from feedback (ideas) so each reaches the right system.

Success Metrics ​

  • High rate of users updating incomplete profile data from the profile area.
  • High help-center deflection rate before users submit a support ticket.
  • Low abandonment when editing personal account information.

Scope ​

In Scope ​

  • Profile hub showing the base player card and free-player card.
  • Entry points into profile-editing flows.
  • Personal-data editor for display name and profile photo.
  • Settings screen with theme selector, navigation entries, logout, and account deletion.
  • Help & Support screen: help center link (Notion, in-app browser), report-an-issue form, contact-support form, and live system status indicator. No in-app FAQ content — all help content is managed externally in Notion.
  • Suggest an Improvement screen: Canny mobile widget for product improvement ideas and voting.
  • About screen: product description, version, developer credit, and website link.
  • GDPR-compliant account deletion with typed confirmation modal.

Out of Scope ​

  • Security settings such as password change or device management.
  • Legal documents, subscription billing, or privacy data exports.
  • In-app live chat.

Personas and Roles ​

  • Any authenticated user: Needs a reliable place to view and manage their information.
  • Incomplete-profile user: Needs clear prompts to finish missing data.
  • Returning user: Needs support answers and a quick way to adjust account details.
  • User with product feedback: Wants to suggest improvements or vote on existing ideas.

User Journey ​

  1. The user opens the Profile tab.
  2. The profile hub shows a header with avatar and display name (pencil icon for quick edit), plus the base player card and free-player card.
  3. If either card is incomplete, the user sees an overlay prompting completion.
  4. The user either taps the pencil icon to edit personal data or opens a card's edit action to reopen the corresponding onboarding wizard.
  5. From the same tab the user can navigate to Settings, which is a full screen containing theme preferences, Help & Support, Suggest an Improvement, About, logout, and account deletion.

Functional Requirements ​

Profile Hub ​

  1. The profile tab shall show an avatar, display name, and lightweight tenure/account context.
  2. The base player card shall summarize positions, preferred foot, and play style.
  3. The free-player card shall summarize preferred group types, desired locations, days, and time windows.
  4. When either card is empty, the product shall overlay the section with an explicit completion CTA instead of showing a blank state only.
  5. Completed cards shall expose an "edit" action that reopens the corresponding onboarding wizard in edit mode.
  6. A pencil icon displayed adjacent to the player name shall open personal-data editing directly from the profile header, without requiring navigation to Settings.

Personal Data Editing ​

  1. Users shall be able to edit their display name and profile photo. No other personal data fields are editable in MVP.
  2. Photo upload shall accept JPG, PNG, and SVG files up to 5 MB, consistent with the team logo upload specification in PRD 0003. Files exceeding the size limit or of unsupported format shall be rejected with a clear error message.
  3. Users shall be able to remove a previously uploaded photo.
  4. Leaving the edit screen with unsaved changes shall require confirmation.
  5. Saving personal data shall return the user to the Profile tab. The edit screen is accessed via the pencil icon in the profile header, not through Settings.

Settings Screen ​

  1. Settings shall be a dedicated full screen, not a modal or bottom sheet. The back/close action shall always return the user to the Profile tab.
  2. Settings shall include a theme selector rendered as a three-option segmented control: Light / Dark / System. The System option follows the device OS preference.
  3. Settings shall include an entry point labeled "Help & Support" that opens the support screen.
  4. Settings shall include an entry point labeled "Suggest an Improvement" that opens the feedback screen.
  5. Settings shall include an entry point to the About screen.
  6. Settings shall include a one-tap logout action that returns the user to the authentication/welcome flow. No confirmation dialog is required.
  7. Settings shall include an entry point to the account deletion flow.

Help & Support Screen ​

All help content is managed externally in Notion. There is no in-app FAQ content. The screen is titled "Help & Support" and its content is presented in the following order:

  1. A Help Center tappable row opens the Notion help site in the in-app browser (Capacitor Browser plugin / WebView). Notion blocks iframe embedding via X-Frame-Options: SAMEORIGIN, so an in-app browser is the correct approach. All FAQ and documentation content is maintained in Notion with no in-app copy to keep in sync.
  2. A Report an Issue action opens a HubSpot ticket form with the category pre-filled as "Bug/Error". The form shall automatically include app version and device OS; the user provides a subject and description.
  3. A Contact Support action opens a HubSpot ticket form with a user-selectable category (account, match, market, other). The same app context is pre-filled automatically.
  4. A System Status element at the bottom of the screen displays a live status indicator: green when all systems are operational, orange when there is partial degradation or an active incident. If the BetterStack status API is unreachable, the indicator shall display a gray icon. The status is fetched from BetterStack's public status API on screen load. Tapping the element opens the BetterStack status page in the in-app browser. The link shall remain available regardless of API availability.

Suggest an Improvement Screen ​

  1. The screen opens from the "Suggest an Improvement" entry in Settings.
  2. The screen shall launch the Canny mobile widget using the official Canny SDK for mobile. It shall not use a generic webview.
  3. Users shall be able to submit new product improvement ideas and vote on existing ones from within the widget.
  4. If a user attempts to submit a bug report or support request via Canny, the screen shall display a prompt directing them to "Help & Support" for proper handling.

About Screen ​

  1. The About screen shall display: a brief product description, the current app version number, a developer credit line ("Developed by [company name]"), and a tappable link to the product website.

Account Deletion ​

  1. Account deletion shall be fully functional and GDPR-compliant.
  2. The deletion flow is entered from the Settings screen.
  3. If the user is the last organizer of one or more active teams, the flow shall block progress at the start and prompt them to transfer ownership or delete those teams first, applying the same guardrail defined in PRD 0010.
  4. Once any team guardrail is resolved, the flow shall present a confirmation modal that clearly explains what personal data will be permanently deleted and that the action is irreversible.
  5. The modal shall require the user to type a confirmation phrase (their display name or the word "DELETE") before the destructive action button becomes available.
  6. On confirmed deletion, all of the user's confirmed attendance and pending match invitations across all teams shall be automatically revoked. Any pending market summons for the user shall be removed from all convocations.
  7. All personal data associated with the account shall be permanently purged in compliance with GDPR Article 17 (right to erasure). This includes profile data, match history, and any stored preferences.
  8. A confirmation email shall be sent to the user's registered address after deletion is complete.

Business Rules and Permissions ​

  • Editing the base player card or free-player card from Profile reuses the onboarding flows but changes their exit behavior so they return to Profile afterward.
  • Personal-data editing is separate from the sports-profile wizards and must not overwrite sports data unintentionally.
  • HubSpot handles support tickets and bug reports. Canny handles feature-improvement requests. These two systems must not be mixed; the in-product UI routes users to the correct destination based on intent.
  • All HubSpot ticket submissions shall automatically include app context (app version, device OS) without exposing raw system identifiers to the user.
  • Account deletion is GDPR-compliant. All personal data is permanently purged on confirmed deletion. No soft-delete or anonymization-only approach is acceptable.
  • A user who is the last organizer of an active team cannot delete their account until they have transferred ownership or deleted the team, consistent with PRD 0010 business rules.

UX Considerations ​

  • The profile area should make incomplete data obvious without feeling punitive.
  • The pencil icon on the profile header should provide a faster edit path than navigating into Settings.
  • Settings should feel like a lightweight, linear list — not a nested menu.
  • The theme segmented control should reflect the current selection clearly and change the UI preview immediately on selection.
  • In Help & Support, the Help Center link comes before contact options so users can self-serve through Notion before submitting a ticket.
  • The system status indicator must be visually distinct from the rest of the list so users can check it at a glance without tapping.
  • The account deletion confirmation phrase requirement should be clearly instructed and the confirm button must remain disabled until the phrase matches exactly.

Error States ​

  • Personal-data saves shall preserve pending display-name and photo changes on failure, keep the user in the editor, and offer retry instead of returning them to Profile with stale data.
  • Photo uploads: if transfer fails, keep the selected file reference until the user retries, replaces, or cancels it.
  • If the in-app browser or external widget fails to open the Help Center, BetterStack status page, or Canny, the screen shall show a clear failure message plus a fallback external URL the user can open or copy.
  • HubSpot-based support and bug-report forms shall preserve entered subject, category, and description when submission fails and allow retry. The UI shall not imply that a ticket was created until HubSpot confirms it.
  • Account deletion shall expose an in-progress state for the full cascade. If the user leaves and returns before completion, the screen shall show that deletion is still processing rather than restarting the flow.
  • If the last-organizer guardrail check cannot be validated, the deletion flow shall fail closed, explain that eligibility could not be verified, and require retry before destructive action is allowed.