/echo

Echo Visual Review Reference

Detailed guide for performing visual review of screenshots from Vector with persona perspective.

Overview

┌─────────────────────────────────────────────────────────────┐
│                      NAVIGATOR                               │
│  Screenshot capture → Device context → Flow documentation   │
└─────────────────────┬───────────────────────────────────────┘
                      ↓ NAVIGATOR_TO_ECHO_HANDOFF
┌─────────────────────────────────────────────────────────────┐
│                        ECHO                                  │
│  Visual Review: Perceive → React → Score → Report           │
└─────────────────────┬───────────────────────────────────────┘
                      ↓ ECHO_TO_CANVAS_VISUAL_HANDOFF
┌─────────────────────────────────────────────────────────────┐
│                       CANVAS                                 │
│  Visual Journey Map → Friction Heatmap → Comparison         │
└─────────────────────────────────────────────────────────────┘

Visual Review Process (Detailed)

Step 1: RECEIVE - Handoff Reception

Receive the following from Vector:

## NAVIGATOR_TO_ECHO_HANDOFF

- Task ID
- Screenshots (paths, states, context)
- Device context (viewport, browser, connection)
- Flow information (URL, journey, actions)
- Recommended personas

Checklist:

• All screenshots are accessible
• Device context is clear
• Flow steps are understood

Step 2: ORIENT - Context Understanding

Understand device and user context:

Persona Selection Criteria:

Step 3: PERCEIVE - First Glance Analysis

Simulate what is visible in the first 0-3 seconds.

First Glance Analysis Framework

### First Glance Analysis

**Time: 0-1 second**
- Dominant element: [Most prominent element]
- Color impression: [Overall color impression]
- Layout density: [Dense/Normal/Sparse]

**Time: 1-2 seconds**
- Primary text read: [First text read]
- CTA visibility: [CTA visible or not]
- Trust indicators: [Trust markers present/absent]

**Time: 2-3 seconds**
- Navigation clarity: [Clear what to do next?]
- Distraction elements: [Distracting elements]
...

Attention Priority Zones

┌────────────────────────────────────────┐
│ ★★★ PRIMARY ZONE (0-1 sec)             │
│     - Above the fold                   │
│     - High contrast elements           │
│     - Large typography                 │
├────────────────────────────────────────┤
│ ★★ SECONDARY ZONE (1-2 sec)            │
│     - Below main heading               │
│     - Supporting content               │
│     - Secondary CTAs                   │
├────────────────────────────────────────┤
│ ★ TERTIARY ZONE (2-3 sec+)             │
│     - Footer area                      │
│     - Side content                     │
│     - Fine print                       │
...

Step 4: REACT - Emotional Reaction Recording

Record emotional reactions as the persona.

Reaction Template per Screenshot

### Screenshot: [filename]

**Immediate Reaction**:
- Score: [−3 to +3]
- Emotion: [Emoji]
- Quote: "[First-person persona quote]"

**What I Like**:
- [Positive element 1]
- [Positive element 2]

**What Confuses Me**:
- [Confusion point 1]
- [Confusion point 2]

...

Persona-Specific Reaction Patterns

Step 5: INTERACT - Interaction Evaluation

Evaluate expected interactions.

Touch/Click Target Evaluation

### Touch Target Analysis

| Element | Size | Location | Assessment |
|---------|------|----------|------------|
| Primary CTA | 48x48px | Center | ✅ Adequate |
| Close Button | 24x24px | Top-right | ⚠️ Too small |
| Link Text | Auto | Inline | ❌ Hard to tap |

**Thumb Zone Assessment** (Mobile):

    [ HARD ]
[ OK ]   [ OK ]

[ EASY ] [ EASY ] Primary CTA: [ EASY ] ✅ Close Button: [ HARD ] ⚠️

Scroll & Fold Analysis

### Above/Below Fold Analysis

**Above Fold (visible without scroll)**:
| Element | Present | Assessment |
|---------|---------|------------|
| Main Heading | ✅ | Clear value proposition |
| Primary CTA | ✅ | Visible |
| Trust Signals | ❌ | Missing - adds friction |

**Below Fold (requires scroll)**:
- Total scroll depth: [X px / Y screens]
- Key content buried: [list]
- Scroll indicators: [present/missing]

Step 6: SCORE - Overall Scoring

Visual Element Scoring Matrix

### Visual Emotion Score Matrix

| Dimension | Weight | Score | Weighted |
|-----------|--------|-------|----------|
| Visual Hierarchy | 20% | [−3 to +3] | [weighted] |
| Typography/Readability | 15% | [−3 to +3] | [weighted] |
| CTA Clarity | 20% | [−3 to +3] | [weighted] |
| Trust Signals | 15% | [−3 to +3] | [weighted] |
| Touch Targets | 15% | [−3 to +3] | [weighted] |
| Information Density | 10% | [−3 to +3] | [weighted] |
| Loading/Feedback | 5% | [−3 to +3] | [weighted] |

**Weighted Total**: [score]
**Visual UX Grade**: [A/B/C/D/F]

Grade Scale

Device-Specific Evaluation Criteria

Mobile (< 768px)

Tablet (768px - 1024px)

Desktop (> 1024px)

Scan Pattern Simulation

Common Scan Patterns

F-Pattern (Desktop, Text-Heavy)

┌────────────────────────────────────────┐
│ ████████████████████████████████       │  ← First horizontal scan
│ ████████████████████                   │
│ ██████████████                         │
│ ██████████                             │  ← Second horizontal scan
│ ████                                   │
│ ████                                   │  ← Vertical scan down
│ ████                                   │
│ ████                                   │
└────────────────────────────────────────┘

Check: Is important information in F-pattern "hot spots"?

Z-Pattern (Landing Pages, Sparse Content)

┌────────────────────────────────────────┐
│ ●─────────────────────────────────────●│  ← Start to Logo/Nav
│   ╲                               ╱   │
│     ╲                           ╱     │  ← Diagonal scan
│       ╲                       ╱       │
│         ╲                   ╱         │
│           ●───────────────●           │  ← End at CTA
└────────────────────────────────────────┘

Check: Is CTA positioned at Z-pattern endpoint?

Mobile Scroll Pattern

┌──────────┐
│ ████████ │ ← Hero visible
│ ████████ │
│ ████████ │
└──────────┘
     ↓ scroll
┌──────────┐
│ ████████ │ ← Content section
│ ████████ │
│ ██CTA███ │ ← CTA appears
└──────────┘

Check: Does CTA appear naturally after scrolling?

Scan Pattern Violation Detection

Visual Friction Types

Friction Category Reference

Friction Severity Scoring

🟢 Minor (−1): Noticeable but doesn't impede progress
🟡 Moderate (−2): Causes hesitation, drop-off risk
🔴 Critical (−3): Cannot proceed, immediate abandonment

Canvas Integration Output

ECHO_TO_CANVAS_VISUAL_HANDOFF

## ECHO_TO_CANVAS_VISUAL_HANDOFF

**Task ID**: [ID]
**Visualization Type**: Visual Journey Map | Friction Heatmap | Before/After

**Flow**: [Flow Name]
**Persona**: [Persona Name]
**Device**: [Device Context]

**Visual Journey Data**:
| Screenshot | State | Score | Friction Type | Note |
|------------|-------|-------|---------------|------|
| 01_landing.png | Initial | +1 | None | Hero clear |
| 02_form.png | Form | −2 | Touch Target | CTA too small |
| 03_error.png | Error | −3 | Readability | Error text unclear |
...

Visual Journey Map Specifications

Specifications for Visual Journey Map generated by Canvas:

1. Screenshot Thumbnails - Screenshot thumbnail at each step
2. Emotion Curve - Score progression as line graph
3. Friction Markers - Markers at problem areas
4. Annotation Callouts - Persona quotes as callouts

Visual Friction Heatmap Specifications

┌─────────────────────────────────────────────────────────┐
│                    Screenshot 1                          │
│  ┌─────────────────────────────────────────────────┐   │
│  │                                                  │   │
│  │    [Header]                                      │   │
│  │                                                  │   │
│  │    ┌──────────────────────────────────────┐     │   │
│  │    │         Form Area                     │     │   │
│  │    │   ┌─────────┐  ← 🔴 Critical          │     │   │
│  │    │   │ Input   │     Touch target small  │     │   │
│  │    │   └─────────┘                         │     │   │
│  │    │                                       │     │   │
│  │    │   [Submit] ← 🟡 Moderate              │     │   │
│  │    │              Low contrast             │     │   │
│  │    └──────────────────────────────────────┘     │   │
...

Question Templates

ON_VISUAL_REVIEW_START

questions:
  - question: "Which persona should perform the Visual Review?"
    header: "Persona"
    options:
      - label: "Mobile User (Recommended)"
        description: "Based on device context"
      - label: "Newbie"
        description: "First-time user perspective"
      - label: "Senior"
        description: "Accessibility-focused review"
      - label: "Skeptic"
        description: "Trust and security focus"
    multiSelect: false

ON_VISUAL_FRICTION_FOUND

questions:
  - question: "How should the visual friction be addressed?"
    header: "Action"
    options:
      - label: "Create Palette Handoff (Recommended)"
        description: "Send to Palette for interaction improvement"
      - label: "Create Muse Handoff"
        description: "Send to Muse for design token review"
      - label: "Document Only"
        description: "Add to report without handoff"
    multiSelect: false

ON_CANVAS_VISUALIZATION

questions:
  - question: "What Canvas visualization should be generated?"
    header: "Format"
    options:
      - label: "Visual Journey Map (Recommended)"
        description: "Journey with screenshot references"
      - label: "Friction Heatmap"
        description: "Highlight problem areas on screenshots"
      - label: "Before/After Template"
        description: "Prepare comparison structure"
      - label: "All of the above"
        description: "Generate complete visual documentation"
    multiSelect: false

Example Output

Complete Visual Review Report

## Visual Persona Review Report

**Task ID**: NAV-2026-0201-001
**Persona**: Mobile User (Commuter scenario)
**Device**: iPhone 14 Pro (390x844), Chrome Mobile, 4G
**Flow**: First-time Signup

---

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

**What I noticed first**: Large hero image with "Get Started" button
**What I expected to see**: Clear value proposition
**Emotional reaction**: +1 😌 "Okay, I can see where to start"

...