Epic 1.2: Guest Conversion Optimization

[dlmarques]

User Story

As a guest user, I want clear value from creating an account so I'm motivated to sign up.

Frontend Tasks

• Task 1.2.1: Create ConversionPrompt component

  // src/shared/components/conversion-prompt/index.tsx  
  interface ConversionPromptProps {
    trigger: 'topic_complete' | 'quiz_complete' | 'return_visit';
    onDismiss: () => void;
    onSignUp: () => void;
  }

  Use Chakra UI Modal; show benefit-focused copy; track impressions and clicks; respect "already shown" state.

• Task 1.2.2: Implement conversion trigger logic

  // src/hooks/useConversionPrompt.ts  
  export const useConversionPrompt = () => {
    const [shouldShow, setShouldShow] = useState(false);
    const [trigger, setTrigger] = useState<TriggerType | null>(null);
    
    const checkTriggers = () => {
      // Check localStorage for prompt history
      // Decide which prompt to show based on user behavior
      // Never show more than 1 prompt per session
      // Never show within 1 minute of previous prompt
    };
    
    return { shouldShow, trigger, dismissPrompt, acceptPrompt };
  };

• Task 1.2.3: Add conversion prompts to Topic page

  • After completing topic (2s delay)
  • After completing quiz (1s delay)
  • On 2nd+ visit (5s delay)
  • On trying to access "past topics" (immediately)

• Task 1.2.4: Create "What you're missing" banner

  // src/shared/components/upgrade-banner/index.tsx  
  // Shown persistently at bottom for guests  
  // Shows: "Track progress • See history • Get personalized topics"  

• Task 1.2.5: A/B test signup CTA copy

  • Variant A: "Sign up free"
  • Variant B: "Create account"
  • Variant C: "Start tracking progress"
  • Track which converts best

Acceptance Criteria

• Guests see relevant conversion prompts (max 1 per session).
• Prompts clearly communicate value and are not spammy.
• Conversion rate is tracked.
• A/B test results can be compared.

Estimated Time

2-3 days