User flow diagram a journey mapping

# User Flow: Course Purchase (New User)

## 1. Flow Overview

**Flow Name:** "First-Time Course Purchase"
**Description:** New user discovers course via Google, evaluates content, creates account, and completes payment.

**User Goal:** Learn React, find trusted course, purchase without hassle
**Business Goal:** Convert search traffic to paying customers, capture email

**Estimated Duration:** 5-10 minutes (if smooth)
**Complexity:** Medium (7 major steps, account creation + payment)

## 2. Entry Points

**Primary Entry: Google Search** (70% of new users)
```
User searches: "learn react online"
↓
Clicks ad/organic result
↓
Lands on: \/courses/react-masterclass
```

**User Mindset:**
- Skeptical (Is this legit? Will I actually learn?)
- Comparison shopping (likely visiting 3-5 sites)
- Price-sensitive (looking for value)

**Context They Bring:**
- Search intent: Want to learn React
- Device: 60% desktop, 40% mobile
- Likely won't buy on first visit (average: 2.3 visits)

**Secondary Entry Points:**
- Facebook/LinkedIn ad (20%)
- Blog post → course link (10%)

## 3. Step-by-Step Flow

### STEP 1: Landing Page (Course Detail)

**Screen:** `/courses/react-masterclass`

**User Actions:**
- [ ] Scroll page (read description)
- [ ] Watch preview video
- [ ] Read reviews/testimonials
- [ ] Check pricing

**System Response:**
- Display: Course title, price ($49), CTA button
- Load: Preview video (autoplay muted)
- Show: 4.8★ rating, "1,250 students"

**Decision Point:**
```
IF interested THEN click "Enroll Now"
ELSE exit site (33% bounce rate here)
```

**Friction Points:**
⚠️ Price not immediately visible (requires scroll)
⚠️ Too much text (TL;DR for mobile users)

**Optimization:**
✓ Add "What You'll Learn" summary above fold
✓ Sticky CTA button (always visible)

---

### STEP 2: CTA Click → Account Check

**User Action:**
- Clicks "Enroll Now" button

**System Response:**
```javascript
if (user.isLoggedIn()) {
redirect('/checkout'); // Skip signup
} else {
showModal('signupModal'); // New users
}
```

**Decision Point:**
- **Path A (80%):** Not logged in → Show signup modal
- **Path B (20%):** Already logged in → Go to checkout

---

### STEP 3A: Signup Modal (New Users)

**Screen:** Modal overlay on course page

```
┌───────────────────────────────┐
│ Create Your Account │
│ │
│ [Name____________] │
│ [Email___________] │
│ [Password________] │
│ │
│ [ Sign Up & Continue ] │
│ │
│ Already have account? Log in │
└───────────────────────────────┘
```

**User Actions:**
- [ ] Fill name
- [ ] Fill email
- [ ] Fill password
- [ ] Click "Sign Up & Continue"

**System Response:**
- Validate email format
- Check if email already exists
- Hash password
- Create user record
- Send welcome email (background job)
- Auto-login user

**Error States:**
- ✗ Email already exists → "This email is taken. [Log in instead]"
- ✗ Weak password → "Password must be 8+ characters"
- ✗ Invalid email → "Please enter valid email"

**Friction Points:**
⚠️ Asking for name upfront (extra field)
⚠️ No social login (Google/Apple)
⚠️ Password requirements unclear

**Recovery Path:**
```
IF signup fails THEN
show error message inline (red text)
keep form data (don't clear fields)
focus on problem field
offer "Need help?" link
```

**Drop-off Rate:** 25% abandon here (industry average)

**Mitigation:**
✓ Add Google/Apple social login (reduces friction)
✓ Show password strength meter
✓ Offer "Continue as Guest" (capture email only)

---

### STEP 3B: Auto-Redirect to Checkout

**System Action:**
```
POST /api/users/register
↓ (Success)
GET /checkout?course_id=react-masterclass
↓
Render checkout page
```

**Loading State:**
- Show spinner (500ms expected)
- "Creating your account..."

---

### STEP 4: Checkout Page

**Screen:** `/checkout?course_id=react-masterclass`

```
┌─────────────────────────────────────────────────┐
│ Checkout │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Order Summary │ │ Payment Method │ │
│ │ │ │ │ │
│ │ React Masterclass│ │ 💳 Credit Card │ │
│ │ $49.00 │ │ │ │
│ │ │ │ [Card Number___]│ │
│ │ Tax: $0 │ │ [Expiry____CVV_]│ │
│ │ ─────────────── │ │ [Zip Code_____]│ │
│ │ Total: $49.00 │ │ │ │
│ │ │ │ [ Complete Purchase ]│
│ └──────────────────┘ └──────────────────┘ │
│ │
│ 🔒 Secure checkout • 30-day money back │
└─────────────────────────────────────────────────┘
```

**User Actions:**
- [ ] Review order
- [ ] Enter card number
- [ ] Enter expiry + CVV
- [ ] Enter billing zip code
- [ ] Click "Complete Purchase"

**System Response:**
1. Validate card data (client-side)
2. Tokenize card (Stripe.js)
3. Send payment request to Stripe API
4. Wait for authorization (2-3 seconds)
5. Create order record
6. Enroll user in course
7. Send receipt email
8. Redirect to success page

**Error States:**

**Payment Declined:**
```
✗ "Your card was declined. Please try another card."

[ Try Another Card ] [ Contact Support ]
```

**Network Error:**
```
✗ "Connection error. Your payment was NOT charged."

[ Try Again ]
```

**Expired Card:**
```
✗ "This card has expired. Please use a different card."
```

**Friction Points:**
⚠️ Asking for zip code (non-US users confused)
⚠️ No PayPal option (25% of users prefer it)
⚠️ Loading time anxiety ("Did it work?")

**Recovery Paths:**
```
IF payment fails THEN
preserve form data (don't clear card number)
show clear error message
offer alternative payment methods
provide support contact (live chat)

IF user refreshes page during payment THEN
check order status
IF order exists THEN redirect to success
ELSE show checkout again with saved data
```

**Drop-off Rate:** 18% abandon at checkout (industry average: 70%!)
**Reason:** We pre-qualified them, they already decided to buy

**Mitigation:**
✓ Add PayPal + Apple Pay
✓ Show security badges (Norton, BBB)
✓ Display loading animation during payment ("Processing...")
✓ Offer coupon code field (incentive to complete)

---

### STEP 5: Payment Processing

**Screen:** Loading overlay

```
┌─────────────────────────────────┐
│ │
│ [⏳ Spinner] │
│ │
│ Processing your payment... │
│ Please don't refresh │
│ │
└─────────────────────────────────┘
```

**System Process:**
```
1. Client: Stripe.createToken(cardData)
↓
2. Stripe: Returns token (tok_xxxxx)
↓
3. Backend: POST /api/orders
- amount: 4900 (cents)
- token: tok_xxxxx
- course_id: react-masterclass
↓
4. Backend → Stripe API: charge.create()
↓
5. Stripe: Returns charge object
↓ (Success)
6. Backend:
- Insert order record
- Insert course_enrollments record
- Queue email job (receipt + course access)
↓
7. Backend: Return success response
↓
8. Client: Redirect to /success?order_id=12345
```

**Expected Duration:** 2-4 seconds

**Error Handling:**
```
TRY
charge = stripe.charge.create(...)
CATCH CardError
return { error: "Card declined" }
CATCH RateLimitError
return { error: "Too many requests, try again" }
CATCH StripeError
return { error: "Payment provider error" }
CATCH Exception
log.error(exception)
return { error: "Something went wrong" }
```

---

### STEP 6: Success Page

**Screen:** `/success?order_id=12345`

```
┌─────────────────────────────────────────────┐
│ │
│ ✅ Purchase Complete! │
│ │
│ You're now enrolled in React Masterclass │
│ │
│ Receipt sent to: [email protected] │
│ Order #12345 │
│ │
│ ┌────────────────────────────────────┐ │
│ │ [ Start Learning Now → ] │ │
│ └────────────────────────────────────┘ │
│ │
│ Or explore: │
│ • Download course materials │
│ • Join our community │
│ • Invite a friend (get $10 credit) │
│ │
└─────────────────────────────────────────────┘
```

**User Actions:**
- [ ] Click "Start Learning Now"
- [ ] (Optional) Download materials
- [ ] (Optional) Share on social

**System Response:**
- Display confirmation
- Fire analytics event ('purchase_complete')
- Show personalized next steps

**Next Action Suggestions:**
1. **Primary CTA:** "Start Learning Now" → First lesson
2. **Secondary:** "Download Materials" → ZIP file
3. **Tertiary:** "Join Discord Community" → Invite link

**Return Paths:**
```
User clicks \"Start Learning Now\"
↓
Redirect to: \/courses\/react-masterclass\/lessons\/1
↓
Auto-play first lesson video
```

---

## 4. Happy Path (No Errors)

**Minimum Steps: 7**

```
1. Land on course page (Google)
↓ (30 sec - scan content)
2. Click "Enroll Now"
↓ (10 sec)
3. Fill signup form (name, email, password)
↓ (45 sec)
4. Auto-redirect to checkout
↓ (2 sec)
5. Enter payment info (card, expiry, CVV, zip)
↓ (60 sec)
6. Click "Complete Purchase"
↓ (3 sec - processing)
7. Success page
↓
8. Start learning

Total Time: ~2.5 minutes
Conversion Rate Target: 8% (industry avg: 2-3%)
```

**Success Criteria:**
✓ User completes payment
✓ Enrolls in course
✓ Receives confirmation email
✓ Starts first lesson

## 5. Alternative Paths

### Alt Path A: Already Have Account

```
Step 2: Click "Enroll Now"
↓
IF logged in THEN
Skip signup (Steps 3A, 3B)
Go directly to checkout (Step 4)
↓
Reduces flow from 7 steps to 5 steps
2 minutes saved
```

**Probability:** 20% of users (returning visitors)

### Alt Path B: Abandon Cart

```
User reaches checkout but doesn't complete
↓
System: Save cart state (cookie + database)
↓
Send email after 1 hour:
"You left React Masterclass in your cart!"
"Complete your purchase: [Link]"
"Need help? Reply to this email"
↓
User clicks link → Returns to checkout (pre-filled)
↓
15-20% cart recovery rate
```

### Alt Path C: Payment Error → Retry

```
Payment declined (insufficient funds)
↓
Show error: "Card declined. Try another card?"
↓
User clicks "Try Another Card"
↓
Form resets (but keeps order info)
↓
User enters new card
↓
Retry payment
↓ (Success)
Continue to Step 6 (Success Page)
```

**Retry Success Rate:** 40%

### Alt Path D: Coupon Code

```
Checkout page → User clicks "Have a coupon?"
↓
Expand coupon field:
[Enter code_______] [Apply]
↓
User enters: "NEWUSER10"
↓
System validates code
↓ (Valid)
Apply 10% discount
Update total: $49.00 → $44.10
↓
Continue to payment
```

**Impact:**
- Conversion rate increases 12% when coupon applied
- Average order value decreases 8%
- Net positive ROI

## 6. Decision Trees

### Decision Tree: User State Check

```
User clicks "Enroll Now"
│
┌────────────┴────────────┐
│ │
Is Logged In? Not Logged In
│ │
┌────┴────┐ │
│ │ │
Already First Time Show Signup
Enrolled? User? Modal (Step 3A)
│ │ │
┌────┴────┐ │ │
│ │ │ │
YES NO │ │
│ │ │ │
Show Error Go to │ │
"Already Checkout│ │
Enrolled" (Skip) │ │
│ │
└───────────────────┘
│
Proceed to Checkout
(Step 4)
```

### Decision Tree: Payment Validation

```
User submits payment
│
┌─────────────┼─────────────┐
│ │ │
Card Format Card Expired? Stripe API
Valid? │ Response
│ │ │
┌────┴────┐ ┌────┴────┐ ┌────┴────┐
│ │ │ │ │ │
YES NO YES NO Success Decline
│ │ │ │ │ │
│ Show Error│ Continue │ Show Error
│ "Invalid"│ │ │ "Declined"
│ │ │ │ │ │
└─────────┴───┴─────────┴───┴─────────┘
│
Final Status?
│
┌────┴────┐
│ │
Success Failure
│ │
Step 6 Retry/Support
(Success) (Alt Path C)
```

## 7. Touchpoints

**UI Elements:**
```
Step 1: Course Page
- Hero image
- "Enroll Now" button (primary CTA)
- Preview video player
- Reviews section
- Curriculum accordion

Step 3A: Signup Modal
- Form fields (name, email, password)
- "Sign Up & Continue" button
- "Already have account?" link
- Social login buttons (Google, Apple)

Step 4: Checkout
- Order summary card
- Payment form (Stripe Elements)
- "Complete Purchase" button
- Security badges
- Money-back guarantee text

Step 6: Success Page
- Checkmark icon
- Confirmation message
- "Start Learning" CTA
- Next steps suggestions
```

**Notifications/Emails:**

**Email 1: Welcome (immediately after signup)**
```
Subject: Welcome to CodeLearn! 🎉

Hi [Name],

Your account is ready!

You're about to start React Masterclass.
We can't wait to see what you build.

[Complete Your Purchase →]

- CodeLearn Team
```

**Email 2: Receipt (after payment)**
```
Subject: Your CodeLearn receipt ($49.00)

Order #12345
React Masterclass - $49.00

Receipt: [Download PDF]
Access Course: [Start Learning →]

Questions? Reply to this email.
```

**Email 3: Cart Abandonment (1 hour later)**
```
Subject: You left React Masterclass in your cart

Hey [Name],

You were SO close! Complete your purchase:

[Finish Checkout →]

P.S. Need help? Hit reply.
```

**External Systems:**
- **Stripe API:** Payment processing
- **SendGrid:** Transactional emails
- **Google Analytics:** Event tracking
- **Mixpanel:** Funnel analysis

## 8. Pain Points & Friction

| Step | Pain Point | Severity | Drop-off% | Mitigation |
|------|-----------|----------|-----------|------------|
| 1 | Price not visible above fold | Medium | 10% | Move pricing higher, add sticky CTA |
| 3A | Signup form friction (name + email + password) | **High** | 25% | Add Google/Apple social login, allow guest checkout |
| 4 | No PayPal option | Medium | 5% | Integrate PayPal + Apple Pay |
| 4 | Credit card only (no debit, crypto) | Low | 3% | Consider alternatives |
| 5 | Payment loading anxiety ("Did it work?") | Medium | 2% | Show clear loading state with reassuring copy |

**Complexity Score Per Step:**
```
Step 1 (Landing): ⭐⭐ (Low) - Just reading
Step 2 (CTA Click): ⭐ (Very Low) - One click
Step 3A (Signup): ⭐⭐⭐⭐ (High) - 3 form fields + validation
Step 4 (Checkout): ⭐⭐⭐⭐⭐ (Very High) - 5 fields + payment anxiety
Step 5 (Processing): ⭐⭐ (Low) - Wait state
Step 6 (Success): ⭐ (Very Low) - Confirmation
```

**User Drop-off Prediction:**
```
Step 1: 1,000 visitors
↓ (-33% bounce)
Step 2: 670 click "Enroll"
↓ (-25% abandon signup)
Step 3A: 503 complete signup
↓ (-18% abandon checkout)
Step 4: 412 start payment
↓ (-5% payment failures)
Step 5: 391 payments succeed
↓
Step 6: 391 reach success page

Conversion Rate: 39.1% (from click to purchase)
Overall Conversion Rate: 39.1% (from landing to purchase)
```

**Mitigation Strategies:**
1. **Reduce Step 3A friction** → Add Google login (+10% conversion)
2. **Optimize Step 4** → Add PayPal (+3% conversion)
3. **Step 1 improvements** → Better copy, social proof (+5% click rate)

## 9. Success States

**Completion Confirmation (Step 6):**
```
✅ Checkmark icon (visual success)
"Purchase Complete!" (headline)
"You're now enrolled in React Masterclass" (subheadline)
"Receipt sent to: [email protected]" (confirmation)
"Order #12345" (reference number)
```

**Next Action Suggestions:**
1. **Immediate Action:** "Start Learning Now" (80% click)
2. **Support Action:** "Download Materials" (15% click)
3. **Social Action:** "Share on Twitter" (5% click)
4. **Long-term:** "Set Reminder (daily lessons)" (12% click)

**Return Paths:**
```
From Success Page, users can go to:
- First Lesson (primary path)
- Course Dashboard (see all lessons)
- My Account (manage subscription)
- Community Forum (ask questions)
- Homepage (explore more courses)
```

**Retention Hooks:**
- Email Day 1: "Start Lesson 1!"
- Email Day 3: "You're 10% through!"
- Email Day 7: "Check out Module 2"
- Push Notification: "New lesson available"

## 10. Metrics & Validation

**Conversion Funnel:**
```
┌─────────────────────────────────┐
│ Step 1: Landing Page │ 1,000 visitors
│ ████████████████████████████████│ 100%
└─────────────────────────────────┘
↓ 67% continue
┌─────────────────────────────────┐
│ Step 2: Click "Enroll Now" │ 670 visitors
│ ████████████████████░░░░░░░░░░░░│ 67%
└─────────────────────────────────┘
↓ 75% complete
┌─────────────────────────────────┐
│ Step 3A: Complete Signup │ 503 visitors
│ ████████████████░░░░░░░░░░░░░░░░│ 50.3%
└─────────────────────────────────┘
↓ 82% continue
┌─────────────────────────────────┐
│ Step 4: Enter Payment │ 412 visitors
│ █████████████░░░░░░░░░░░░░░░░░░░│ 41.2%
└─────────────────────────────────┘
↓ 95% succeed
┌─────────────────────────────────┐
│ Step 6: Purchase Complete │ 391 visitors
│ ████████████░░░░░░░░░░░░░░░░░░░░│ 39.1% ✓
└─────────────────────────────────┘

🎯 Target: 35% overall conversion → **EXCEEDED** (39.1%)
```

**Drop-off Rates Per Step:**
| Step | Entered | Completed | Drop-off% | Industry Avg |
|------|---------|-----------|-----------|---------------|
| 1 → 2 | 1,000 | 670 | 33% | 40-50% |
| 2 → 3A | 670 | 503 | 25% | 30-35% |
| 3A → 4 | 503 | 412 | 18% | 20-25% |
| 4 → 6 | 412 | 391 | 5% | 10-15% |

**Time Per Step:**
```
Step 1 (Landing): 30-60 sec (reading, video)
Step 2 (CTA Click): <1 sec
Step 3A (Signup): 45-90 sec (typing)
Step 3B (Redirect): 0.5-2 sec (loading)
Step 4 (Checkout): 60-120 sec (entering card)
Step 5 (Processing): 2-4 sec (payment API)
Step 6 (Success): 5-10 sec (reading confirmation)

Total: ~3-5 minutes (happy path)
```

**A/B Test Opportunities:**

**Test 1: Signup Form**
- **Variant A (Control):** Name + Email + Password
- **Variant B:** Google Login only
- **Hypothesis:** Reducing fields increases conversion by 15%
- **Metric:** Signup completion rate

**Test 2: Checkout CTA**
- **Variant A (Control):** "Complete Purchase"
- **Variant B:** "Start Learning Now ($49)"
- **Hypothesis:** Action-oriented copy increases clicks by 8%
- **Metric:** CTA click rate

**Test 3: Pricing Display**
- **Variant A (Control):** Price at bottom of page
- **Variant B:** Price in hero section (above fold)
- **Hypothesis:** Early price visibility increases qualified clicks
- **Metric:** Bounce rate (expect increase) + conversion rate (expect increase)

**Test 4: Social Proof**
- **Variant A:** "1,250 students"
- **Variant B:** "Join 1,250 students who landed dev jobs"
- **Hypothesis:** Outcome-focused copy increases trust
- **Metric:** Time on page + scroll depth

## Swim Lane Diagram

```
┌────────────┬─────────────────────────────────────────────────────────┐
│ USER │ [Google] → [Land Page] → [Read] → [Watch Video] │
│ │ ↓ ↓ │
│ │ [Decide] ←──────────────────────→ [Click Enroll] │
│ │ ↓ │
│ │ [Fill Signup] → [Submit] │
│ │ ↓ │
│ │ [Wait] → [Redirected] │
│ │ ↓ │
│ │ [Enter Card] → [Click Pay] │
│ │ ↓ │
│ │ [Wait] ────────────────────────→ [See Confirmation] │
│ │ ↓ │
│ │ [Start Learning] │
├────────────┼─────────────────────────────────────────────────────────┤
│ FRONTEND │ [Render Page] │
│ │ ↓ │
│ │ [Show Modal] │
│ │ ↓ │
│ │ [Validate Form] │
│ │ ↓ │
│ │ [POST /register] │
│ │ ↓ │
│ │ [Redirect /checkout] │
│ │ ↓ │
│ │ [Tokenize Card] ← Stripe.js │
│ │ ↓ │
│ │ [POST /orders] │
│ │ ↓ │
│ │ [Show Loading] │
│ │ ↓ │
│ │ [Redirect /success] │
├────────────┼─────────────────────────────────────────────────────────┤
│ BACKEND │ │
│ │ [Receive /register] │
│ │ ↓ │
│ │ [Validate Email] │
│ │ ↓ │
│ │ [Hash Password] │
│ │ ↓ │
│ │ [Insert User] │
│ │ ↓ │
│ │ [Return Token] │
│ │ ↓ │
│ │ [Receive /orders] │
│ │ ↓ │
│ │ [Call Stripe API] │
│ │ ↓ │
│ │ [Create Enrollment] │
│ │ ↓ │
│ │ [Queue Email] │
│ │ ↓ │
│ │ [Return Success] │
├────────────┼─────────────────────────────────────────────────────────┤
│ STRIPE │ │
│ │ [Receive Token] │
│ │ ↓ │
│ │ [Verify Card] │
│ │ ↓ │
│ │ [Process Payment] │
│ │ ↓ │
│ │ [Return Charge Object] │
├────────────┼─────────────────────────────────────────────────────────┤
│ EMAIL │ │
│ │ [Receive Queue Job] │
│ │ ↓ │
│ │ [Send Welcome Email] │
│ │ ↓ │
│ │ [Send Receipt] │
└────────────┴─────────────────────────────────────────────────────────┘
```

---

**Flow Version:** 1.0 (Nov 2025)
**Owner:** Product Team
**Next Review:** Monthly (monitor metrics)