Journey Builder UX Flow
This document describes the user experience flows for creating, editing, and managing customer journeys in the CRM system.
Navigation
Access the Journey Builder from the CRM sidebar:
CRM Hub
├── Dashboard
├── Customers
├── Duplicates
├── Marketing
│ ├── Journeys ← Journey list and builder
│ ├── Campaigns
│ ├── Segments
│ └── Rule Templates
└── Settings
User Flows
1. View Journey List
Entry Point: Marketing > Journeys
┌─────────────────────────────────────────────────────────────────┐
│ Journey List [+ New Journey] │
├─────────────────────────────────────────────────────────────────┤
│ 🔍 Search journeys... Filter: [All Status ▼] │
├─────────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Welcome Series [ACTIVE] 👥 1,234 enrolled │ │
│ │ Event: member.created Last run: 2 hours ago │ │
│ │ [View] [Edit] [···] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Re-engagement Campaign [DRAFT] 👥 0 enrolled │ │
│ │ Manual enrollment Created: Dec 15, 2024 │ │
│ │ [View] [Edit] [···] │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Available Actions:
- View journey details
- Edit journey in builder
- Clone journey
- Activate/Pause/Archive journey
- Delete journey (draft only)
2. Create New Journey
Flow: Journey List → Click "+ New Journey" → Journey Builder
Step 1: Enter Basic Info
┌─────────────────────────────────────────┐
│ Create New Journey │
├─────────────────────────────────────────┤
│ Name: [________________] │
│ Description: [________________] │
│ │
│ [Cancel] [Create Journey] │
└─────────────────────────────────────────┘
Step 2: Journey Builder Opens
┌─────────────────────────────────────────────────────────────────┐
│ Journey: Welcome Series [Save] [Activate]│
├──────────────┬──────────────────────────────────────────────────┤
│ Step Palette │ Canvas │
│ ┌──────────┐ │ │
│ │📧 Send │ │ ┌────────────────────┐ │
│ │⏰ Wait │ │ │ 🚀 Start Journey │ │
│ │🔀 Branch │ │ │ Manual Enrollment │ │
│ │✏️ Update │ │ └─────────┬──────────┘ │
│ │🔀 Split │ │ │ │
│ │⏹️ End │ │ ▼ │
│ └──────────┘ │ [Drag steps here] │
│ │ │
└──────────────┴──────────────────────────────────────────────────┘
3. Configure Trigger
Flow: Click "Start Journey" node → Trigger Configuration Modal
┌─────────────────────────────────────────┐
│ 🚀 Configure Trigger │
├─────────────────────────────────────────┤
│ Trigger Type: │
│ ○ Manual Enrollment │
│ ○ Event Triggered │
│ ○ Segment Entry │
│ │
│ ☐ Allow re-entry │
│ Re-entry wait: [30] days │
│ │
│ [Cancel] [Save] │
└─────────────────────────────────────────┘
Trigger Types:
| Type | Description | Use Case |
|---|---|---|
| Manual | Customers enrolled via API or UI | Ad-hoc campaigns, testing |
| Event | Triggered by system events | Transactional sequences |
| Segment Entry | Triggered when joining segment | Behavior-based automation |
4. Add Steps
Method 1: Drag from Palette
- Drag step type from palette to canvas
- Step appears at cursor position
- Configure step via modal
Method 2: Click to Add
- Click step type in palette
- Step added at end of sequence
- Configure step via modal
5. Configure Step Types
Send Step
┌─────────────────────────────────────────┐
│ 📧 Configure Send Step │
├─────────────────────────────────────────┤
│ Step Name: [Welcome Email______] │
│ │
│ Channel: [Email ▼] │
│ Template: [Welcome Template ▼] │
│ │
│ Preview: "Welcome to {club_name}..." │
│ [Cancel] [Save] │
└─────────────────────────────────────────┘
Wait Step
┌─────────────────────────────────────────┐
│ ⏰ Configure Wait Step │
├─────────────────────────────────────────┤
│ Step Name: [Wait 2 Days________] │
│ │
│ Duration: [2] [Days ▼] │
│ │
│ ℹ️ Customers will wait 2 days before │
│ proceeding to the next step. │
│ [Cancel] [Save] │
└─────────────────────────────────────────┘
Condition Step
┌─────────────────────────────────────────┐
│ 🔀 Configure Condition Step │
├─────────────────────────────────────────┤
│ Step Name: [Check Email Opened__] │
│ │
│ Match: [ALL ▼] conditions │
│ ┌─────────────────────────────────────┐ │
│ │ [Email Opened ▼] [is ▼] [True ▼] │ │
│ │ [+ Add] │ │
│ └─────────────────────────────────────┘ │
│ │
│ ✓ Yes path: Matching customers │
│ ✗ No path: Non-matching customers │
│ [Cancel] [Save] │
└─────────────────────────────────────────┘
A/B Split Step
┌─────────────────────────────────────────┐
│ 🔀 Configure A/B Split Step │
├─────────────────────────────────────────┤
│ Step Name: [Test Subject Lines_] │
│ │
│ ☐ Deterministic (same customer → same │
│ variant) │
│ │
│ Variants: [Distribute Evenly] │
│ ┌─────────────────────────────────────┐ │
│ │ Variant A [50]% ████████░░ │ │
│ │ Variant B [50]% ████████░░ │ │
│ │ [+ Add] │ │
│ └─────────────────────────────────────┘ │
│ Total: 100% ✓ │
│ [Cancel] [Save] │
└─────────────────────────────────────────┘
Update Step
┌─────────────────────────────────────────┐
│ ✏️ Configure Update Step │
├─────────────────────────────────────────┤
│ Step Name: [Tag as Engaged____] │
│ │
│ Field Updates: │
│ ┌─────────────────────────────────────┐ │
│ │ [Tags ▼] [Add ▼] [engaged] │ │
│ │ [+ Add] │ │
│ └─────────────────────────────────────┘ │
│ │
│ ℹ️ Updates applied as customer passes │
│ through this step. │
│ [Cancel] [Save] │
└─────────────────────────────────────────┘
6. Reorder Steps
Method: Drag and Drop
- Click and hold any step on canvas
- Drag to new position
- Release to drop
- Order automatically updates
7. Activate Journey
Flow: Click "Activate" → Confirmation → Journey goes live
Pre-activation Checklist:
✓ At least one step configured
✓ Send steps have templates selected
✓ No validation errors
✓ Trigger configured
┌─────────────────────────────────────────┐
│ ⚠️ Activate Journey? │
├─────────────────────────────────────────┤
│ This will start enrolling customers │
│ based on your trigger settings. │
│ │
│ Journey: Welcome Series │
│ Trigger: Event (member.created) │
│ Steps: 5 │
│ │
│ [Cancel] [Activate] │
└─────────────────────────────────────────┘
8. View Journey Analytics
Entry Point: Journey List → Click "View" → Journey Detail
┌─────────────────────────────────────────────────────────────────┐
│ Welcome Series [ACTIVE] [Edit] [Pause] │
├─────────────────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 1,234 │ │ 892 │ │ 756 │ │ 45 │ │
│ │ Enrolled│ │ Active │ │Completed│ │ Exited │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ Journey Funnel │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Step 1: Welcome Email █████████████████████████ 100% │ │
│ │ Step 2: Wait 2 Days ████████████████████████ 96% │ │
│ │ Step 3: Check Engagement ██████████████████████ 89% │ │
│ │ Step 4: Follow-up ████████████████ 72% │ │
│ │ Step 5: End ████████████ 61% │ │
│ └─────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ A/B Test Results (if applicable) │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Test Subject Lines [🏆 Winner Detected] [95% Confident]│ │
│ │ │ │
│ │ Variant A ████████████░░░░░░ 32.4% │ │
│ │ Variant B █████████████████ 47.6% 🏆 +15.2% lift │ │
│ │ │ │
│ │ ✓ Statistical significance reached │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
9. Enroll Customers Manually
Flow: Journey Detail (Active) → Click "Enroll Customers"
┌─────────────────────────────────────────┐
│ 👤 Enroll Customers │
├─────────────────────────────────────────┤
│ Journey: Welcome Series │
│ │
│ Method: ○ Manual Entry ○ CSV Upload │
│ │
│ Customer IDs: │
│ ┌─────────────────────────────────────┐ │
│ │ cus_123456 │ │
│ │ cus_789012 │ │
│ │ cus_345678 │ │
│ └─────────────────────────────────────┘ │
│ │
│ Preview: 3 customers │
│ ⚠️ Duplicates will be skipped │
│ │
│ [Cancel] [Enroll (3)] │
└─────────────────────────────────────────┘
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Esc | Deselect step / Close modal |
Delete | Delete selected step |
Ctrl+S | Save journey |
Ctrl+Z | Undo last action |
Error States
Validation Errors
┌─────────────────────────────────────────┐
│ ⚠️ Cannot Activate Journey │
├─────────────────────────────────────────┤
│ Please fix the following issues: │
│ │
│ • Step 2: No template selected │
│ • Step 4: Weight total must equal 100% │
│ │
│ [OK] │
└─────────────────────────────────────────┘
Loading States
- Skeleton loaders while fetching journey data
- Spinner overlay during save operations
- Progress indicator for bulk enrollments
Accessibility
- All modals are keyboard navigable
- Focus traps in modal dialogs
- ARIA labels on interactive elements
- Color-blind friendly status indicators
- High contrast mode support
Related Documentation
- Journey Overview - Journey concepts and data model
- API Reference - Journey API endpoints
- Segmentation - Creating segments for journey triggers