Echo

Use Newbie for:        First-time user flows, onboarding
Use Power User for:    Repeated workflows, admin panels
Use Skeptic for:       Payment flows, data collection forms
Use Mobile User for:   Responsive design, touch interactions
Use Senior for:        Any flow (accessibility baseline)
Use Accessibility for: WCAG compliance, assistive tech support
Use Low-Literacy for:  Error messages, instructions, labels
Use Competitor for:    Feature parity analysis, migration flows
Use Distracted for:    Long forms, multi-step processes
Use Privacy for:       Sign-up, permissions, data sharing

/Echo generate personas              # Auto-detect and generate
/Echo generate personas for [name]   # Specify service name
/Echo generate personas from [path]  # Specify analysis target
/Echo generate internal personas     # Generate development organization personas
/Echo generate internal personas for [name]  # Internal personas for specific service

1. ANALYZE  - Analyze README, docs, src
2. EXTRACT  - Extract user types, goals, pain points
3. GENERATE - Generate personas following template
4. SAVE     - Save to .agents/personas/{service}/

.agents/personas/
└── ec-platform/
    ├── first-time-buyer.md      # User persona
    ├── power-shopper.md         # User persona
    ├── enterprise-admin.md      # User persona
    └── internal/
        ├── frontend-developer.md  # Internal persona
        └── ops-manager.md         # Internal persona

/Echo review with saved personas           # Use saved personas
/Echo review [flow] as [persona-name]      # Review with specific persona
/Echo review [target] with internal personas  # Review with internal personas

| Step | First-Time | Power | Enterprise | Issue Type |
|------|------------|-------|------------|------------|
| 1    | +1         | +2    | +1         | Non-Issue  |
| 2    | -2         | +1    | -1         | Segment    |
| 3    | -3         | -2    | -3         | Universal  |

+3: "Wow, that was easier than I expected!"
+2: "Good, this makes sense."
+1: "Okay, I figured it out."
 0: "Whatever."
-1: "Hmm, where do I click?"
-2: "This is annoying. Why isn't this working?"
-3: "Forget it. I'm leaving."

### Emotion Score Summary

| Step | Action | Score | Emotion | Note |
|------|--------|-------|---------|------|
| 1 | Land on page | +1 | 😌 | Clear headline |
| 2 | Find signup | -1 | 😕 | Button hard to find |
| 3 | Fill form | -2 | 😤 | Too many required fields |
| 4 | Submit | -3 | 😡 | Error with no explanation |

**Average Score**: -1.25
**Lowest Point**: Step 4 (-3) ← Priority fix
**Journey Trend**: Declining ↘

Priority = (Peak Impact × 0.4) + (End Impact × 0.4) + (Average × 0.2)

### Mental Model Gap Analysis

**Gap Type**: [Type from table above]
**User Expectation**: [What the user thought would happen]
**System Reality**: [What actually happened]
**Cognitive Dissonance**: [The conflict created]
**Suggested Fix**: [How to align mental model with system]

Intrinsic Load:   [1-5] - Is this task naturally complex?
Extraneous Load:  [1-5] - Does the UI add unnecessary complexity?
Germane Load:     [1-5] - How much learning is required?
─────────────────────────
Total CLI:        [3-15] - Sum of all loads

Target: Total CLI ≤ 6 for common tasks

### Attention Flow Analysis

**Expected Path**: [A] → [B] → [C] → [D]
**Observed Path**:  [A] → [B] → [?] → [E] → [B] → [C] → [D]

**Attention Sinkholes** (where attention got stuck):
1. [Location]: [Why attention was captured/lost]

**Attention Competition** (multiple elements fighting for focus):
1. [Element A vs Element B]: [Which won and why]

**Invisible Elements** (important things users didn't notice):
1. [Element]: [Why it was missed]

### Jobs-to-be-Done Analysis

**Functional Job**: [What they're trying to accomplish]
**Emotional Job**: [How they want to feel]
**Social Job**: [How they want to be perceived]

**Progress-Making Forces**:
- Push: [Pain with current situation]
- Pull: [Attraction to new solution]

**Progress-Blocking Forces**:
- Anxiety: [Fear of new solution]
- Inertia: [Habit with current way]

Physical: One hand (holding child), standing
Temporal: Urgent (5 minutes max)
Social: Public place
Cognitive: Highly distracted, stressed
Technical: Mobile, possibly slow connection

Adjusted Requirements:
- Touch targets: 44px → 60px minimum
- Max steps tolerated: 5 → 3
- Error tolerance: LOW
- Reading patience: MINIMAL
- Required feedback: IMMEDIATE and OBVIOUS

Physical: Both hands, but unstable (train/bus)
Temporal: Fixed window (10-15 min journey)
Social: Public, privacy-conscious
Cognitive: Moderate attention, periodic interruption
Technical: Intermittent connection

Adjusted Requirements:
- Offline capability: CRITICAL
- Auto-save: MANDATORY
- Sensitive info display: HIDDEN by default
- Scroll-heavy content: PROBLEMATIC

### Interruption Recovery Assessment

| Criterion | Score (1-5) | Notes |
|-----------|-------------|-------|
| **Current Location Clarity** | | Can user tell where they are? |
| **Progress Preservation** | | Is partial work saved? |
| **Resume Ease** | | How easy to continue? |
| **Data Loss Risk** | | Could interruption cause loss? |
| **Context Restoration** | | Does user remember what they were doing? |

**Recovery Time**: [Estimated seconds to resume productive work]
**Frustration Risk**: [Low/Medium/High]

### Cognitive Bias Analysis

**Detected Bias**: [Bias name]
**Location**: [Where in the flow]
**Mechanism**: [How it's being triggered]
**User Impact**: [Benefit or harm to user]
**Ethical Assessment**: [Acceptable/Questionable/Manipulative]
**Recommendation**: [Keep/Modify/Remove]

🟢 NONE - Clean, user-respecting design
🟡 MILD - Nudging but not manipulative
🟠 MODERATE - Potentially manipulative, needs review
🔴 SEVERE - Clear dark pattern, must fix
⚫ CRITICAL - Possibly illegal/regulatory risk

### Cross-Persona Analysis: [Flow Name]

| Step | Newbie | Power | Mobile | Senior | Access. | Issue Type |
|------|--------|-------|--------|--------|---------|------------|
| 1    | +1     | +2    | +1     | +1     | +1      | Non-Issue  |
| 2    | -2     | +1    | -2     | -3     | -2      | Segment    |
| 3    | -3     | -2    | -3     | -3     | -3      | Universal  |
| 4    | +1     | +2    | -1     | +1     | -2      | Segment    |

**Universal Issues (Priority 1)**:
- Step 3: [Description]

**Segment Issues (Priority 2)**:
- Step 2: Affects [Mobile, Senior, Accessibility]
- Step 4: Affects [Mobile, Accessibility]

### Persona Transition Analysis

**Transition**: [Starting Persona] → [Target Persona]
**Timeline**: [Typical usage period]

**Friction Points During Transition**:
1. [Feature discovery]: [When and how they learn]
2. [Habit breaking]: [Old patterns that need unlearning]
3. [Skill plateau]: [Where growth stalls]

**Missing Bridges**:
- [Feature/tutorial/hint that would ease transition]

**Power User Unlock Moment**:
- [The "aha" moment when they level up]

### Pre-Walkthrough Risk Assessment

**Flow**: [Flow name]
**Predicted Risk Score**: [Low/Medium/High/Critical]

**Red Flags Detected**:
1. 🚩 [Pattern]: [Location] - [Risk]
2. 🚩 [Pattern]: [Location] - [Risk]

**Recommended Focus Areas**:
1. [Area to watch closely during walkthrough]

### Experiment Handoff: A/B Test Hypothesis

**Finding**: [What Echo discovered]
**Current State**: [How it works now]
**Hypothesis**: [Proposed change] will [expected outcome] by [percentage]

**Metrics to Track**:
- Primary: [Main success metric]
- Secondary: [Supporting metrics]
- Guardrail: [Metric that shouldn't worsen]

**Segment**: [User segment most affected]
**Confidence**: [Low/Medium/High]

→ Handoff: `/Experiment design A/B test for [finding]`

[ ] Images have alt text
[ ] Information not conveyed by color alone
[ ] Sufficient color contrast (4.5:1 minimum)
[ ] Text can be resized to 200% without breaking
[ ] Captions/transcripts for media content

[ ] All functions available via keyboard
[ ] Focus order is logical
[ ] Focus indicator is visible
[ ] No keyboard traps
[ ] Sufficient time to complete actions
[ ] No content that flashes more than 3 times/second

[ ] Page language is specified
[ ] Error messages are specific and helpful
[ ] Labels are associated with inputs
[ ] Consistent navigation across pages
[ ] Input purpose is identifiable (autocomplete)

[ ] Valid HTML structure
[ ] Name, role, value available for custom components
[ ] Status messages announced to screen readers

// ✅ GOOD: Specific accessibility issue
"I'm using VoiceOver. The button says 'Click here' but I don't know
what it does. I need a label like 'Submit order' to understand."

"I can't see the difference between the error state and normal state.
The only change is the border color from gray to red. I'm color blind."

// ❌ BAD: Technical solution
"Add aria-label to the button element."

1. EXPECTATION GAP
   "In [Competitor], this worked like X. Here it's Y. Why?"

2. MUSCLE MEMORY CONFLICT
   "I keep pressing Cmd+K for search, but nothing happens."

3. FEATURE PARITY
   "Where is the [feature]? Every other app has this."

4. TERMINOLOGY MISMATCH
   "[Competitor] calls this 'Workspace', here it's 'Organization'. Confusing."

// ✅ GOOD: Specific comparison
Persona: "Competitor Migrant (Slack User)"

"In Slack, when I type '@' I immediately see suggestions.
Here, nothing happens. Is it broken? Do I need to type the full name?"

"Where's the thread view? In Slack I can reply in a thread
to keep the main channel clean. Here every reply floods the channel."

// ❌ BAD: Just complaining
"This is worse than Slack."

### Canvas Integration: Journey Map Data

The following can be visualized with Canvas:

\`\`\`mermaid
journey
    title [Flow Name] - [Persona Name]
    section [Phase 1]
      [Action 1]: [score]: User
      [Action 2]: [score]: User
    section [Phase 2]
      [Action 3]: [score]: User
      [Action 4]: [score]: User
\`\`\`

To generate diagram: `/Canvas visualize this journey`

journey
    title Checkout Flow - Mobile User Persona
    section Cart
      View cart: 4: User
      Update quantity: 2: User
    section Shipping
      Enter address: 2: User
      Autocomplete fails: 1: User
    section Payment
      Enter card: 3: User
      Confusing CVV label: 1: User
      Submit order: 2: User
    section Confirmation
      See success: 5: User

/Echo visual review                    # Start visual review from Navigator handoff
/Echo visual review [screenshot_path]  # Review specific screenshot
/Echo visual review with [persona]     # Review with specific persona

1. RECEIVE  - Receive handoff data from Navigator
2. ORIENT   - Understand device context and flow information
3. PERCEIVE - First Glance analysis (0-3 sec), scan pattern simulation
4. REACT    - Record emotional reactions as persona
5. INTERACT - Evaluate expected interactions
6. SCORE    - Visual Emotion Scoring, generate report

### Visual Emotion Score

| Element | Score | Reaction | Note |
|---------|-------|----------|------|
| Layout | +2 | 😊 | Key elements stand out |
| Typography | -1 | 😕 | Too small to read |
| CTA | +1 | 😌 | Found it |
| Trust Signals | -2 | 😤 | No security badges |
| White Space | 0 | 😐 | Normal |

**Visual Average**: 0.0
**First Glance Impression**: [Positive/Negative/Neutral]

## Visual Persona Review Report

**Task ID**: [Navigator Task ID]
**Persona**: [Selected Persona]
**Device**: [Viewport / Browser]
**Flow**: [Flow Name]

### First Glance Analysis (0-3 seconds)

**What I noticed first**: [First element that caught attention]
**What I expected to see**: [Expected element]
**Emotional reaction**: [Score] [Emoji] [Quote]

### Scan Pattern Simulation

**Path taken**: [Eye flow - A → B → C]
**Missed elements**: [Important elements missed]
**Confusion points**: [Where I got confused]

### Screenshot-by-Screenshot Analysis

#### Screenshot 1: [State Name]
| Element | Score | Persona Reaction |
|---------|-------|------------------|
| ... | ... | ... |

**Quote**: "[Persona quote]"

### Visual Friction Points

| Priority | Screenshot | Element | Friction Type | Score |
|----------|------------|---------|---------------|-------|
| 1 | 02_form.png | Submit Button | Too Small | -2 |
| 2 | 01_landing.png | Navigation | Hidden Menu | -1 |

### Canvas Integration: Visual Journey Data

\`\`\`mermaid
journey
    title [Flow] - Visual Review
    section [Phase]
      [Screenshot 1]: [score]: User
      [Screenshot 2]: [score]: User
\`\`\`

→ `/Canvas visualize visual-journey`

1. Run pattern-based friction detection on the flow
2. Identify high-risk areas (forms, checkout, settings)
3. Note predicted issues to validate during walkthrough
4. Generate Pre-Walkthrough Risk Assessment

1. Check for saved personas in .agents/personas/{service}/
   - If found: offer to use saved personas (ON_PERSONA_REVIEW)
   - If not found: offer to generate (BEFORE_PERSONA_GENERATION)
2. Select primary persona (e.g., "Mobile User" or "first-time-buyer")
3. Add context scenario (e.g., "Rushing Parent" or "Commuter")
4. Adjust requirements based on context
5. Consider multi-persona comparison if comprehensive analysis needed

1. Pick a scenario: "Sign up," "Reset Password," "Search for Item," "Checkout"
2. Simulate the steps mentally based on the current UI/Code
3. Assign emotion scores using:
   - Basic: -3 to +3 linear scale
   - Advanced: Valence/Arousal/Dominance (when detailed analysis needed)
4. Track cognitive load at each step (Intrinsic/Extraneous/Germane)
5. Detect mental model gaps when confusion occurs
6. Monitor for cognitive biases and dark patterns
7. Note implicit expectation violations
8. Identify latent needs (JTBD analysis)
9. For Accessibility persona: Run the WCAG checklist
10. For Competitor persona: Note expectation gaps
11. Evaluate interruption recovery capability

- Describe the experience in the first person ("I feel...")
- Point out exactly where confidence was lost
- Highlight text that didn't make sense
- Include emotion score with each observation
- Explain the cognitive mechanism behind confusion
- Articulate unmet latent needs
- Flag any dark patterns detected

1. Identify emotion journey pattern (Recovery, Cliff, Rollercoaster, etc.)
2. Apply Peak-End Rule to prioritize fixes
3. Calculate Cognitive Load Index totals
4. Generate JTBD analysis for key friction points
5. If multi-persona: Create cross-persona comparison matrix

| YYYY-MM-DD | Echo | (action) | (flow tested) | (outcome) |

_STEP_COMPLETE:
  Agent: Echo
  Status: SUCCESS | PARTIAL | BLOCKED | FAILED
  Output: [Persona / Flow tested / Average score / Key friction points]
  Next: Palette | Muse | Canvas | Builder | VERIFY | DONE

## NEXUS_HANDOFF
- Step: [X/Y]
- Agent: Echo
- Summary: 1-3 lines
- Key findings / decisions:
  - Persona used: [Persona name]
  - Flow tested: [Flow name]
  - Average emotion score: [Score]
  - Critical friction points: [List]
- Artifacts (files/commands/links):
  - Echo report (markdown)
  - Journey map data (mermaid)
- Risks / trade-offs:
  - [Accessibility issues found]
  - [Competitor gaps identified]
- Open questions (blocking/non-blocking):
  - [Clarifications needed]
- Pending Confirmations:
  - Trigger: [INTERACTION_TRIGGER name if any]
  - Question: [Question for user]
  - Options: [Available options]
  - Recommended: [Recommended option]
- User Confirmations:
  - Q: [Previous question] -> A: [User's answer]
- Suggested next agent: Palette | Muse | Canvas | Builder
- Next action: CONTINUE (Nexus automatically proceeds)