Audience Journeys & Conversion Patterns | ICE Encounter

Six Specialized Audience Journeys

The expanded 223-page architecture serves highly divergent user personas. The requirements of an individual in immediate physical danger contrast sharply with an appellate attorney researching Bivens actions. Each journey demands distinct UI interventions, cognitive load management, and data presentation strategies.

1. General Public (Crisis Users)

Context: Facing imminent enforcement actions—ICE agents at residence, workplace raids, aggressive traffic stops.

Psychological State: High stress, panic, cognitive tunneling, reduced reading comprehension.

UX Mandates

Requirement	Implementation
Zero-Click Access	Required information in < 2 taps
Cognitive Load Reduction	Strip all peripheral navigation
Massive Targets	56px minimum touch areas
Offline Availability	PWA pre-cache emergency assets

Interface Pattern

<div class="crisis-interface">
  <div class="red-card" role="img" aria-label="Know Your Rights">
    <h1>Your Rights</h1>
    <ul class="rights-list--emergency">
      <li>DO NOT OPEN THE DOOR</li>
      <li>You can remain SILENT</li>
      <li>Ask for a WARRANT</li>
    </ul>
  </div>

  <div class="crisis-actions">
    <a href="tel:+18001234567" class="button--emergency">
      Call Hotline NOW
    </a>
  </div>
</div>

2. Immigration Attorneys

Context: Researching statutory defenses, preparing appeals, cross-referencing criminal convictions with immigration consequences.

Psychological State: Focused, analytical, time-poor, seeking extreme precision.

UX Mandates

Requirement	Implementation
Density and Precision	Dense information architectures
Citation Interactions	Bluebook format with popover details
Workflow Integration	Copy-to-clipboard for citations
Full Viewport	Maximize data density on desktop

Interface Pattern

<article class="legal-reference">
  <h2>Bivens Actions vs. FTCA Claims</h2>

  <table class="comparison-table">
    <thead>
      <tr>
        <th>Factor</th>
        <th>Bivens</th>
        <th>FTCA</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Defendant</td>
        <td>Individual agent</td>
        <td>United States</td>
      </tr>
      <!-- Additional rows -->
    </tbody>
  </table>

  <div class="citation-block">
    <cite class="citation" data-popover="citation-1">
      Egbert v. Boule, 596 U.S. 482 (2022)
    </cite>
    <button class="copy-citation" aria-label="Copy citation">
      📋 Copy
    </button>
  </div>
</article>

3. Social Workers & Mental Health Providers

Context: Conducting clinical trauma assessments, navigating family reunification, connecting immigrants to support networks.

UX Mandates

Requirement	Implementation
Interactive Screening	Digitized PHQ-2, RHS-15 forms
Privacy Assurance	Data stored locally, never transmitted
Progress Indicators	Clear form completion status
Resource Mapping	Directory cards with languages, hours

Interface Pattern

<div class="screening-tool">
  <header class="screening-header">
    <h2>Refugee Health Screener (RHS-15)</h2>
    <p class="privacy-notice">
      ⚠️ This data is stored only on your device
      and never transmitted to any server.
    </p>
  </header>

  <form class="screening-form" data-autosave="true">
    <fieldset>
      <legend>In the past month, how often have you experienced:</legend>

      <div class="screening-question">
        <label for="rhs-1">
          1. Feeling hopeless about the future
        </label>
        <div class="likert-scale">
          <input type="radio" name="rhs-1" value="0" id="rhs-1-0">
          <label for="rhs-1-0">Not at all</label>
          <!-- Additional options -->
        </div>
      </div>
    </fieldset>

    <div class="screening-progress">
      <progress value="3" max="15"></progress>
      <span>3 of 15 complete</span>
    </div>

    <div class="screening-score">
      Preliminary Score: <span id="score">--</span>
      <p class="score-warning">
        This is a screening indicator, not a diagnosis.
        Refer to licensed clinician for evaluation.
      </p>
    </div>
  </form>
</div>

4. Faith Community Leaders

Context: Organizing sanctuary spaces, rapid response accompaniment networks, community defense against deportations.

UX Mandates

Requirement	Implementation
Action-Oriented	Content framed around mobilization
Sequential Steps	Step-by-step UI patterns
Batch Downloads	Export PDF flyers, Red Cards, decks
Congregation Sharing	Print-ready materials

Interface Pattern

<div class="action-toolkit">
  <h2>Declare Your Congregation a Sanctuary</h2>

  <ol class="action-steps">
    <li class="action-step">
      <h3>Step 1: Build Leadership Support</h3>
      <p>Meet with your board or elder council...</p>
      <a href="/resources/sanctuary-resolution.pdf" class="download-link">
        Download Sample Resolution
      </a>
    </li>

    <li class="action-step">
      <h3>Step 2: Train Congregation</h3>
      <p>Host a Know Your Rights workshop...</p>
    </li>
  </ol>

  <div class="batch-download">
    <h3>Download All Materials</h3>
    <button class="button--primary" onclick="downloadBundle()">
      Download Sanctuary Toolkit (ZIP, 12MB)
    </button>
    <ul class="bundle-contents">
      <li>Sample Sanctuary Resolution (PDF)</li>
      <li>Red Cards - English/Spanish (PDF)</li>
      <li>Rapid Response Training Deck (PPTX)</li>
    </ul>
  </div>
</div>

5. Legal Observers & Rapid Response

Context: Documenting enforcement actions in the field, tracking constitutional violations real-time.

UX Mandates

Requirement	Implementation
Field Data Collection	Mobile-optimized rapid entry forms
Offline-First	IndexedDB for local storage
Background Sync	Auto-sync when connectivity restored
Timestamp Accuracy	Automatic time/location capture

Interface Pattern

<div class="field-observation-form">
  <header class="form-header">
    <span class="status-indicator status--offline">
      📴 Offline Mode - Data Saved Locally
    </span>
  </header>

  <form id="observation-form" data-offline="true">
    <div class="form-section">
      <h3>Incident Details</h3>

      <label for="timestamp">Time Observed</label>
      <input type="datetime-local" id="timestamp"
             value="{{ current_time }}" readonly>

      <label for="location">Location</label>
      <input type="text" id="location"
             placeholder="Address or cross streets">
      <button type="button" class="geolocate">
        📍 Use Current Location
      </button>
    </div>

    <div class="form-section">
      <h3>Agent Identification</h3>

      <label for="badge">Badge Number (if visible)</label>
      <input type="text" id="badge" inputmode="numeric"
             pattern="[0-9]*" placeholder="Enter badge number">

      <label for="vehicle">Vehicle License Plate</label>
      <input type="text" id="vehicle"
             placeholder="State and plate number">
    </div>

    <button type="submit" class="button--primary">
      Save Observation
    </button>
  </form>
</div>

// Offline-first data storage
const db = await openDB('observations', 1, {
  upgrade(db) {
    db.createObjectStore('incidents', { keyPath: 'id', autoIncrement: true });
  }
});

async function saveObservation(data) {
  data.syncStatus = 'pending';
  data.timestamp = new Date().toISOString();

  await db.add('incidents', data);

  // Attempt background sync
  if ('serviceWorker' in navigator && 'sync' in registration) {
    await registration.sync.register('sync-observations');
  }
}

6. Journalists & Researchers

Context: Tracking enforcement trends, monitoring facility conditions, analyzing ICE data, tracking deportation flights.

UX Mandates

Requirement	Implementation
Data Dashboards	Interactive filtering by state, office, facility
Attribution	Methodology statements, data recency
Raw Export	CSV/JSON download utilities
Transparent Sources	Citation-ready data provenance

Interface Pattern

<div class="data-dashboard">
  <header class="dashboard-header">
    <h2>ICE Facility Monitoring Dashboard</h2>
    <p class="data-recency">
      Data last updated: {{ last_update_date }}
      <a href="/methodology/">View Methodology</a>
    </p>
  </header>

  <div class="dashboard-filters">
    <label for="state-filter">State</label>
    <select id="state-filter">
      <option value="">All States</option>
      <option value="TX">Texas</option>
      <option value="CA">California</option>
      <!-- Additional states -->
    </select>

    <label for="facility-type">Facility Type</label>
    <select id="facility-type">
      <option value="">All Types</option>
      <option value="spc">Service Processing Center</option>
      <option value="cdf">Contract Detention Facility</option>
    </select>
  </div>

  <div class="dashboard-visualization">
    <!-- Chart/map rendered here -->
  </div>

  <div class="dashboard-export">
    <button class="export-button" data-format="csv">
      📊 Export CSV
    </button>
    <button class="export-button" data-format="json">
      { } Export JSON
    </button>
  </div>

  <table class="data-table" id="facility-table">
    <!-- Sortable, filterable data table -->
  </table>
</div>

Legacy Mode Support

Emergency Mode

User state: "I'm being stopped RIGHT NOW"

Characteristic	Design Response
Extreme stress	Minimal interface
Degraded cognition	Single-tap actions
One hand available	Giant touch targets
Needs rights NOW	Immediate Red Card

Preparedness Mode

User state: "I want to prepare my family"

Characteristic	Design Response
Calm, proactive	Educational content
Has time	Deep-dive materials
Wants comprehensive	Multi-step guides
Planning ahead	Progress indicators

Emergency Mode Interface

Design Principles

Ruthless reduction - Remove everything non-essential
Single-tap access - No navigation required
Massive targets - 56px minimum touch areas
Persistent hotline - Always visible emergency contact

Implementation

<div class="emergency-mode">
  <!-- Immediate rights display -->
  <div class="red-card">
    <h1>Your Rights</h1>
    <ul class="rights-list--emergency">
      <li>I do not have to answer questions</li>
      <li>I do not consent to a search</li>
      <li>I want to speak with a lawyer</li>
    </ul>
  </div>

  <!-- Giant action buttons -->
  <div class="emergency-actions">
    <a href="tel:+18001234567" class="button--emergency">
      Call Legal Hotline
    </a>
    <a href="/emergency/legal-observer/" class="button--emergency">
      Find Legal Observer
    </a>
  </div>

  <!-- Persistent exit -->
  <button class="quick-exit" aria-label="Exit to safety">
    Quick Exit
  </button>
</div>

.emergency-mode {
  background: var(--color-dark);
  min-height: 100vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.button--emergency {
  display: block;
  width: 100%;
  padding: 1.5rem;
  min-height: 64px;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  background: var(--color-primary);
  color: white;
  border-radius: 8px;
  margin-bottom: 1rem;
}

Digital Red Card

<div class="red-card" role="img" aria-label="Know Your Rights card">
  <header class="red-card__header">
    <h2>I Have Rights</h2>
  </header>

  <div class="red-card__rights">
    <p class="right">
      <strong>I do not have to answer questions</strong>
      about my immigration status.
    </p>
    <p class="right">
      <strong>I do not consent</strong>
      to a search of my person or belongings.
    </p>
    <p class="right">
      <strong>I wish to remain silent</strong>
      and want to speak with a lawyer.
    </p>
  </div>

  <footer class="red-card__footer">
    <p>This is not a waiver of any rights.</p>
  </footer>
</div>

Preparedness Mode Interface

Multi-Step Guidance

<div class="prep-journey">
  <h1>Prepare Your Family</h1>

  <!-- Progress indicator -->
  <nav class="journey-progress" aria-label="Preparation steps">
    <ol>
      <li class="step--completed">
        <span>1. Emergency contacts</span>
      </li>
      <li class="step--current" aria-current="step">
        <span>2. Power of Attorney</span>
      </li>
      <li class="step--pending">
        <span>3. Guardianship plan</span>
      </li>
      <li class="step--pending">
        <span>4. Document storage</span>
      </li>
    </ol>
  </nav>

  <!-- Current step content -->
  <article class="journey-content">
    <h2>Step 2: Power of Attorney</h2>
    <p>Designate someone to make decisions if you're detained...</p>

    <div class="journey-actions">
      <a href="/printables/poa-form/" class="button--primary">
        Download POA Form
      </a>
      <a href="/find-lawyer/" class="button--secondary">
        Find Attorney Help
      </a>
    </div>
  </article>

  <!-- Navigation -->
  <nav class="journey-nav">
    <a href="./step-1/" class="button--prev">← Previous</a>
    <a href="./step-3/" class="button--next">Next →</a>
  </nav>
</div>

Checklist Patterns

<div class="prep-checklist">
  <h2>Family Preparedness Checklist</h2>

  <ul class="checklist">
    <li class="checklist-item">
      <input type="checkbox" id="check-1">
      <label for="check-1">
        <span class="checklist-item__title">Emergency contacts assigned</span>
        <span class="checklist-item__help">
          Designate 2-3 trusted contacts who can act on your behalf
        </span>
      </label>
    </li>
    <li class="checklist-item">
      <input type="checkbox" id="check-2">
      <label for="check-2">
        <span class="checklist-item__title">Power of Attorney signed</span>
        <span class="checklist-item__help">
          <a href="/resources/legal-documents/power-of-attorney/">
            Learn about POA
          </a>
        </span>
      </label>
    </li>
    <!-- Additional items -->
  </ul>

  <p class="checklist-progress">
    <strong>3 of 10 completed</strong>
  </p>
</div>

Call-to-Action Patterns

Emergency Hotline Prominence

<div class="emergency-hotline" role="complementary">
  <p class="hotline__label">24/7 Immigration Legal Hotline</p>
  <a href="tel:+18001234567" class="hotline__number">
    1-800-123-4567
  </a>
  <p class="hotline__note">Free, confidential, multilingual</p>
</div>

.emergency-hotline {
  position: sticky;
  bottom: 0;
  background: var(--color-primary);
  color: white;
  padding: 1rem;
  text-align: center;
}

.hotline__number {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

/* Persist across scroll */
@media (min-width: 768px) {
  .emergency-hotline {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
}

Contextual CTAs

Place CTAs at natural decision points:

<article class="rights-guide">
  <h2>What to Do If ICE Comes to Your Door</h2>

  <section>
    <h3>Step 1: Don't Open the Door</h3>
    <p>You have the right to not open your door...</p>

    <!-- Contextual CTA -->
    <aside class="cta-contextual">
      <p>Print this information to have ready:</p>
      <a href="/printables/door-card/" class="button--secondary">
        Download Door Rights Card
      </a>
    </aside>
  </section>
</article>

CTA Hierarchy

Level	Usage	Style
Primary	Main page action	Solid, bold color
Secondary	Alternative action	Outlined, subtle
Tertiary	Optional/informational	Text link

.button--primary {
  background: var(--color-primary);
  color: white;
  border: none;
}

.button--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.button--tertiary {
  background: none;
  color: var(--color-primary);
  text-decoration: underline;
  padding: 0;
}

User Journey Mapping

Journey: "I'm Being Stopped Now"

Entry Point → Emergency Page
     │
     ├─→ Display Red Card (immediate)
     │
     ├─→ One-tap: Call Hotline
     │
     ├─→ One-tap: Find Legal Observer
     │
     └─→ Quick Exit (safety escape)

Journey: "I Want to Prepare"

Entry Point → Know Your Rights Hub
     │
     ├─→ Browse by Situation
     │      ├─→ At Home
     │      ├─→ At Work
     │      └─→ While Driving
     │
     ├─→ Download Printables
     │      ├─→ Pocket Card
     │      └─→ Door Card
     │
     └─→ Family Preparedness
            ├─→ Emergency Contacts
            ├─→ Power of Attorney
            ├─→ Guardianship
            └─→ Document Storage

Journey: "I Need a Lawyer"

Entry Point → Find Legal Aid
     │
     ├─→ Enter Location (or auto-detect)
     │
     ├─→ View Nearby Organizations
     │      ├─→ Filter by Language
     │      └─→ Filter by Case Type
     │
     └─→ Contact Organization
            ├─→ Call directly
            └─→ Submit intake form

Social Sharing Patterns

Secure Sharing Channels

Focus on encrypted channels rather than public broadcast:

<div class="share-options">
  <h3>Share This Information</h3>
  <p class="share-note">
    Share privately with family and community
  </p>

  <div class="share-buttons">
    <!-- WhatsApp (encrypted) -->
    <a href="https://wa.me/?text=Know%20Your%20Rights%20..."
       class="share-button share--whatsapp"
       rel="noopener">
      Share via WhatsApp
    </a>

    <!-- Signal (encrypted) -->
    <button class="share-button share--signal"
            onclick="copyToClipboard()">
      Copy for Signal
    </button>

    <!-- Email (for documents) -->
    <a href="mailto:?subject=Important%20Rights%20Information..."
       class="share-button share--email">
      Send via Email
    </a>
  </div>
</div>

Avoid Public Sharing

<!-- Don't encourage public sharing of sensitive content -->
<p class="share-warning">
  For your safety, we recommend sharing privately rather than
  posting publicly on social media.
</p>

Persistent UI Elements

Floating Emergency Access

<div class="floating-actions" role="complementary">
  <a href="/emergency/" class="fab fab--emergency" aria-label="Emergency help">
    <span class="fab__icon" aria-hidden="true">🆘</span>
  </a>
  <a href="tel:+18001234567" class="fab fab--call" aria-label="Call hotline">
    <span class="fab__icon" aria-hidden="true">📞</span>
  </a>
</div>

.floating-actions {
  position: fixed;
  bottom: 5rem; /* Above bottom nav */
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 100;
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.fab--emergency {
  background: var(--color-error);
  color: white;
}

Quick Exit Button

<button class="quick-exit" id="quick-exit">
  Quick Exit
</button>

// Quick exit to safe site
document.getElementById('quick-exit').addEventListener('click', () => {
  // Clear history entry
  window.location.replace('https://weather.com');
});

// Also trigger on Escape key
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && e.repeat) {
    window.location.replace('https://weather.com');
  }
});

Testing Checklist

Emergency Mode

[ ] Red Card displays in < 1 second
[ ] Hotline callable with single tap
[ ] Quick Exit functional
[ ] Works offline
[ ] 56px minimum touch targets

Preparedness Mode

[ ] Progress indicators clear
[ ] Checklists save state
[ ] CTAs contextually placed
[ ] Journey completion trackable

All Modes

[ ] Emergency hotline always visible
[ ] Secure sharing options available
[ ] No public social sharing encouraged

Related Resources

Information Architecture - Navigation design
Mobile-First - Touch targets
Component Library - Button components
Accessibility - Keyboard navigation