Onboarding

Overall Flow Structure

• Total steps: 7–8 (kept short to reduce drop-off; progress bar always visible)
• Style recommendations: Clean, modern SaaS UI. Primary color: Blue/Teal (trust + action). White space heavy. Green checkmarks for completed connections. Progress bar at top (e.g., "Step 3 of 6").
• Navigation: Back button + "Skip for now" (with gentle nudge later). Save progress automatically.
• Mobile-friendly: Vertical stack, large touch-friendly buttons.

1. Login / Sign Up Screen

Layout (Centered card on gradient or clean background):

• Top: App logo + "Welcome back" or "Get started in minutes"
• Tabs: Log In | Sign Up (toggle)
• For Log In:
  • Email field
  • Password field
  • "Forgot password?" link
  • Big Log In button
  • "Or continue with Google" (SSO button)
• For Sign Up:
  • Name, Work Email, Password
  • "By signing up, you agree to our Terms" (links)
  • Create Free Account button
  • "Already have an account? Log in"
• Footer: Security note "🔒 Enterprise-grade security. Your data is encrypted."

Interactions: On successful login → redirect straight to Onboarding Welcome (if not completed) or Dashboard.

2. Onboarding Welcome / Welcome Screen (Step 1)

Goal: Set expectations and get quick "yes" momentum.

Layout:

• Hero illustration (simple icon: connected nodes or calendar + chat bubbles)
• Headline: "Turn inactive leads into booked meetings automatically"
• Subheadline: "Connect your tools once. Let AI handle nurturing, replies, and scheduling."
• Key benefits (3 bullets with icons):
  • Pull contacts from HubSpot
  • Send personalized SMS + Email
  • AI drafts smart replies & books meetings
• Progress bar: 1 of 6 Let's get you set up (est. 4 minutes)
• Big primary CTA: Start Setup (or "Connect My CRM First")
• Secondary: "Watch 45-second demo" (embedded short video)

Interactions: Click "Start Setup" → Step 3 (or collect quick intent if needed).

3. Quick Profile / Goal Confirmation (Optional Step 2)

Layout (Keep very short 2–3 questions):

• "Tell us a bit about your sales process" (to personalize)
  • Role: Sales Leader / Founder / Marketing (cards or select)
  • Main goal: Reactivate old leads / Book more meetings / Automate follow-ups
• "How many leads do you typically nurture per month?" (quick options: <50 / 50–200 / 200+)
• CTA: Continue (pre-fills later steps)

Why include? Helps tailor nurturing rules and segments later. Can be skippable.

4. CRM Connection HubSpot (Step 3 Core First Step)

Layout:

• Progress: 2 of 6 Connect Your CRM
• Headline: "First, let's bring in your contacts"
• Sub: "We'll pull leads, activity history, and stages from HubSpot (or any CRM)"
• Big centered card:
  • HubSpot logo + "Connect HubSpot" (prominent OAuth button blue)
  • Trust text: "Secure OAuth connection • We only read what you allow • Takes 10 seconds"
  • Alternative: "I use a different CRM" → show generic options or manual later
• Below: Preview of what happens after connection ("We'll analyze inactive leads automatically")
• Status area (once connected): Green check + "Connected ✓" + "Last synced: just now"

Interactions: Click button → redirects to HubSpot OAuth → callback → show success animation → auto-advance or "Next: Connect Email".

5. Email & SMS Integrations (Step 4)

Layout (Two-column or stacked cards for clarity):

• Progress: 3 of 6 Connect Communication Channels
• Headline: "Enable outreach via Email + SMS"
• Card 1 Email:
  • Gmail logo + "Connect Gmail" button
  • Outlook logo + "Connect Outlook" button
  • Text: "For sending & tracking emails (SendGrid fallback available)"
• Card 2 SMS:
  • Twilio logo + "Connect Twilio" button
  • Text: "For SMS & WhatsApp nurturing sequences"
• Trust bar: "All connections use secure OAuth or encrypted keys • Revoke anytime"
• Once connected: Green badges + "Ready for campaigns"

One-click focus: Large buttons, minimal form (no manual key entry unless fallback).

6. Calendar for Auto Meetings (Step 5)

Layout:

• Progress: 4 of 6 Enable Auto Booking
• Headline: "Let customers book meetings automatically"
• Sub: "We'll detect meeting intent and suggest slots"
• Options (cards):
  • Google Calendar → "Connect Google Calendar"
  • Outlook Calendar → "Connect Outlook"
  • Or "Use Calendly" → "Connect Calendly" button
• Preview box: "Example: When AI detects interest → share your availability link"
• CTA: Connect Calendar

After connection: Success message + "Your first suggested slots will be ready after data sync"

7. AI & Campaign Setup Review (Step 6)

Layout (Review + Light Configuration):

• Progress: 5 of 6 Review & Activate
• Headline: "Almost done! Here's your nurturing setup"
• Summary cards (with edit links):
  • CRM: HubSpot Connected (X contacts synced)
  • Channels: Email + Twilio Ready
  • Calendar: Connected
  • Default Rules: Inactive = no activity 30+ days → start sequence
  • AI Prompt Preview: "Friendly, professional tone focused on booking meetings"
• Toggle: "Enable auto-replies (with human approval option)"
• Final CTA: Activate My First Campaign (big green button)

Interactions: Shows estimated impact ("You could reactivate ~45 inactive leads this month")

8. Onboarding Complete / Success Screen (Final Step)

Layout (Celebration screen):

• Big confetti or success illustration
• Headline: "You're all set! 🎉"
• Subheadline: "Your AI nurturing system is now live. First sync in progress..."
• What happens next:
  • Bullet list: "Analyzing inactive leads • First outreach sequence queued • Dashboard ready"
• Key metrics teaser: "Expected: Higher reply rates + more meetings booked"
• Primary CTA: Go to Dashboard
• Secondary: "Invite team member" or "Customize templates now"
• Progress: 6 of 6 Complete

Post-onboarding:

• Redirect to main Dashboard with a persistent checklist widget (e.g., "Connect more CRMs", "Review first campaign", "View AI replies").
• Trigger background job: Initial data sync from HubSpot + first segmentation.

Additional UI/UX Recommendations

• Progress Saving: Users can close and return resume from last step.
• Error Handling: Friendly messages like "Connection failed? Try again or contact support" with retry.
• Trust Everywhere: Lock icons, "We never store your passwords", GDPR-compliant notes.
• Personalization: Use user's name ("Hi Sarfaraz, let's connect your HubSpot...").
• Analytics: Track drop-off per step to optimize later.
• Nudges: If skipped, show floating action button or email reminder: "Finish setup in 60 seconds to unlock AI replies."