jpwysocz/trading
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c2bbbcb5974036c50ac441438f9faf9b168c93c9
trading/app_idea/user-flow.md
pki f94646d1fc Upload files to "app_idea"
2025-03-11 14:46:30 -07:00

8.8 KiB
Raw Blame History

User Flow Documentation

Onboarding Flow

stateDiagram-v2
    [*] --> LandingPage: User visits site
    
    LandingPage --> Registration: Click "Sign Up"
    Registration --> GoogleAuth: Click "Sign in with Google"
    
    GoogleAuth --> WelcomePage: Successfully authenticated
    GoogleAuth --> Registration: Authentication failed
    
    WelcomePage --> SetupOptions: Choose setup path
    
    SetupOptions --> GuidedTour: Choose "Show me around"
    SetupOptions --> APIKeySetup: Choose "Set up API keys"
    SetupOptions --> SkipSetup: Choose "Skip for now"
    
    GuidedTour --> APIKeySetup: Tour complete
    APIKeySetup --> Dashboard: API keys set
    SkipSetup --> Dashboard: Skip setup
    
    Dashboard --> [*]

Steps Breakdown:

  1. Landing Page

    • Introduction to TradingScriptPro
    • Value proposition
    • Call-to-action for sign-up
    • Login option for existing users

  2. Registration

    • Google social login option
    • Terms of service acceptance
    • Privacy policy acknowledgment

  3. Google Authentication

    • Secure OAuth flow
    • Email permission request

  4. Welcome Page

    • Welcome message for new users
    • Brief explanation of the 5 free credits
    • Setup options presentation

  5. API Key Setup (Optional)

    • Educational content about LLM API keys
    • Secure input fields for API keys
    • Validation and test connection

  6. Guided Tour (Optional)

    • Interactive walkthrough of key features
    • Example strategy creation
    • Quick tips for best results

Core User Journey: Strategy Creation

stateDiagram-v2
    [*] --> Dashboard: User logged in
    
    Dashboard --> StrategyBuilder: Click "Create New Strategy"
    Dashboard --> AIGenerator: Click "AI Generate Strategy"
    
    StrategyBuilder --> TrendSetup: Step 1
    TrendSetup --> EntrySetup: Continue
    EntrySetup --> ExitSetup: Continue
    ExitSetup --> StopLossSetup: Continue
    
    StopLossSetup --> StrategyReview: All components configured
    
    AIGenerator --> AIPromptInput: Describe strategy goals
    AIPromptInput --> AIProcessing: Submit request
    AIProcessing --> AIResults: Strategy generated
    AIProcessing --> AIError: Generation failed
    
    AIError --> AIPromptInput: Retry with modifications
    AIResults --> StrategyReview: Review generated strategy
    
    StrategyReview --> StrategyTesting: Preview strategy
    StrategyReview --> StrategyModification: Edit components
    
    StrategyModification --> StrategyReview: Changes complete
    
    StrategyTesting --> StrategySaving: Save strategy
    StrategySaving --> ExportOptions: Strategy saved
    
    ExportOptions --> PineScriptMinimal: Export minimal code
    ExportOptions --> PineScriptDetailed: Export detailed code
    ExportOptions --> ShareCommunity: Share with community
    
    PineScriptMinimal --> Dashboard: Return to dashboard
    PineScriptDetailed --> Dashboard: Return to dashboard
    ShareCommunity --> Dashboard: Return to dashboard

Steps Breakdown:

  1. Strategy Builder Entry

    • Two paths: Manual builder or AI generator
    • Clear explanation of each approach
    • Credit usage information for AI generation

  2. Manual Strategy Building

    • Trend Setup:

      • Select from trend indicators
      • Configure parameters
      • Visual feedback on selection

    • Entry Setup:

      • Select from entry indicators
      • Configure parameters
      • Rules for entry conditions

    • Exit Setup:

      • Select from exit indicators
      • Configure parameters
      • Rules for exit conditions

    • Stop Loss Setup:

      • Configure stop loss approach
      • Set parameters (fixed, trailing, indicator-based)
      • Risk management options

  3. AI Strategy Generation

    • Prompt Input:

      • Market selection
      • Trading style preferences
      • Goals and risk tolerance

    • Processing:

      • Loading indicator
      • Status updates
      • Credit usage notification

    • Results:

      • Complete strategy presentation
      • Educational explanation of components
      • Options to modify or accept

  4. Strategy Review

    • Complete strategy overview
    • Component interaction explanation
    • Performance expectations
    • Modification options

  5. Export Options

    • PineScript code generation:
      • Minimal code option
      • Detailed commented code option
    • Copy to clipboard functionality
    • Community sharing option
    • Version saving

Account Management Flow

stateDiagram-v2
    [*] --> Dashboard
    
    Dashboard --> AccountSettings: Click user avatar
    
    AccountSettings --> SubscriptionManagement: "Subscription" tab
    AccountSettings --> APIKeyManagement: "API Keys" tab
    AccountSettings --> ProfileSettings: "Profile" tab
    
    SubscriptionManagement --> ViewCurrentPlan: View subscription details
    SubscriptionManagement --> UpgradePlan: Upgrade to premium
    SubscriptionManagement --> EnterCoupon: Apply coupon code
    
    UpgradePlan --> PaymentSelection: Choose payment method
    PaymentSelection --> StripeCheckout: Stripe selected
    PaymentSelection --> PayPalCheckout: PayPal selected
    
    StripeCheckout --> SubscriptionConfirmation: Payment successful
    PayPalCheckout --> SubscriptionConfirmation: Payment successful
    
    SubscriptionConfirmation --> Dashboard: Return to dashboard
    
    APIKeyManagement --> AddNewKey: Add new provider key
    APIKeyManagement --> RemoveKey: Remove existing key
    APIKeyManagement --> UpdateKey: Update existing key
    
    AddNewKey --> APIKeyValidation: Test connection
    UpdateKey --> APIKeyValidation: Test connection
    
    APIKeyValidation --> APIKeySuccess: Validation passed
    APIKeyValidation --> APIKeyError: Validation failed
    
    APIKeySuccess --> APIKeyManagement: Return to key management
    APIKeyError --> AddNewKey: Try again
    
    RemoveKey --> APIKeyManagement: Key removed
    
    ProfileSettings --> UpdateProfile: Edit profile information
    UpdateProfile --> ProfileSettings: Save changes

Steps Breakdown:

  1. Account Settings Entry

    • User avatar menu in header
    • Settings categories
    • Account status overview

  2. Subscription Management

    • Current plan display
    • Usage statistics (credits remaining)
    • Upgrade options with benefits
    • Coupon code redemption

  3. Payment Process

    • Payment method selection
    • Secure checkout integration
    • Order summary
    • Confirmation and receipt

  4. API Key Management

    • Current keys display (partially masked)
    • Add/update/remove functionality
    • Connection testing
    • Security information

  5. Profile Settings

    • Basic profile information
    • Email preferences
    • Account deletion option

Error Handling Flows

stateDiagram-v2
    [*] --> UserAction: User performs action
    
    UserAction --> Success: Action completes successfully
    UserAction --> Error: Action fails
    
    Error --> ValidationError: Input validation fails
    Error --> APIError: API call fails
    Error --> CreditsExhausted: User out of credits
    Error --> AuthError: Authentication issue
    
    ValidationError --> InlineErrorDisplay: Show error next to input
    ValidationError --> UserAction: User corrects input
    
    APIError --> ConnectionErrorModal: Show API connection error
    APIError --> APITroubleshooting: Show troubleshooting steps
    
    CreditsExhausted --> UpgradePrompt: Show upgrade offer
    CreditsExhausted --> CouponPrompt: Offer coupon option
    
    AuthError --> ReauthPrompt: Prompt for reauthentication
    
    InlineErrorDisplay --> UserAction: User corrects error
    ConnectionErrorModal --> APIKeyManagement: Go to API key settings
    APITroubleshooting --> UserAction: User retries after troubleshooting
    UpgradePrompt --> SubscriptionManagement: User opts to upgrade
    CouponPrompt --> EnterCoupon: User enters coupon
    ReauthPrompt --> GoogleAuth: User reauthenticates

Error Scenarios and Recovery:

  1. Validation Errors

    • Field-specific error messages
    • Immediate feedback on input
    • Clear recovery instructions

  2. API Connection Errors

    • Clear explanation of the issue
    • Troubleshooting steps:
      • Check API key validity
      • Verify internet connection
      • Check LLM provider service status
    • Retry options with backoff

  3. Credits Exhausted

    • Friendly notification
    • Options to:
      • Upgrade to premium
      • Enter coupon code
      • Review existing strategies

  4. Authentication Errors

    • Session expiration handling
    • Secure re-authentication
    • Session persistence options

Alternative Flows

  1. Guest Mode (Limited Features)

    • Strategy browsing only
    • Community section access
    • Call-to-action for registration

  2. Free vs. Premium User Paths

    • Clear indicators of premium features
    • Upgrade prompts at strategic points
    • Value demonstration before paywall
Reference in New Issue View Git Blame Copy Permalink