Update onboarding flow to resemble SaaS subscription tiers and display available models per tier

[sh1ftred]

Overview

Update the onboarding flow to resemble subscription tiers commonly found in SaaS applications. The flow should clearly display which AI models users can access with each topup tier.

Requirements

1. SaaS-Style Subscription Tiers

• Redesign the onboarding flow to present topup options as clear, distinct subscription tiers
• Each tier should have:
  • Clear pricing information
  • Feature highlights
  • Model availability
  • Usage limits/benefits
• Use visual hierarchy to differentiate between tiers (e.g., Basic, Pro, Enterprise)

2. Model Availability Display

• For each tier, clearly display which AI models are available
• Models should be categorized by tier (e.g., Basic models, Advanced models, Premium models)
• Include model capabilities or descriptions where relevant
• Make it easy for users to understand what they get at each level

3. User Experience Improvements

• Clear call-to-action for each tier
• Comparison view between tiers (if applicable)
• Smooth transition from tier selection to payment/activation
• Mobile-responsive design

4. Technical Considerations

• Ensure the data structure supports dynamic model availability per tier
• Make it easy to update models and pricing without code changes
• Consider future-proofing for new models and tiers

Success Criteria

• Users can easily understand the differences between topup tiers
• Model availability is clearly communicated for each tier
• The onboarding flow feels familiar to users of other SaaS applications
• Conversion rate from onboarding to first topup improves

Notes

• Reference popular SaaS applications for tier presentation patterns
• Consider A/B testing different tier presentations
• Ensure accessibility compliance