Scaling to 223+ Pages
The expansion from 100 to 223+ pages across 23 specialized resource sections requires a permanent departure from flat directory structures in favor of a multidimensional, faceted taxonomy. Combining broad thematic silos with robust metadata tagging accommodates diverse user intents and search behaviors.
Validated Hierarchy Depth
For a 223-page corpus, a three-level hierarchy is optimal:
| Depth | Impact |
|---|---|
| 2-level | Creates overly dense, overwhelming landing pages |
| 3-level | Optimal balance of depth and discoverability |
| 4-level | Buries essential content, increases interaction cost |
Faceted Taxonomy System
A rigid organizational model cannot accommodate the necessary cross-pollination of legal theory, emergency protocols, and grassroots advocacy tools. Content resides at a single canonical URL while being dynamically surfaced across multiple navigational vectors.
Taxonomy Dimensions
| Dimension | Values | Purpose |
|---|---|---|
| Audience | General Public, Attorneys, Social Workers, Faith Leaders, Journalists, Observers | Filters search results, populates audience-specific hubs |
| Resource Type | Guide, Printable, Legal Brief, Screening Tool, Dataset, Toolkit | Enables format filtering for rapid response scenarios |
| Urgency Level | Emergency, Time-Sensitive, Preparedness, Reference | Surfaces crisis interventions above reference material |
| Legal Topic | Deportation Defense, DACA/TPS, Appeals, Criminal-Immigration, Asylum | Connects technical analysis with practical protections |
Implementation in Frontmatter
---
title: "Workplace Raid Response Guide"
audience:
- general-public
- advocates
resource_type: guide
urgency: emergency
legal_topic:
- workplace-enforcement
- fourth-amendment
---
Reference Platform Patterns
Analysis of leading immigration advocacy platforms reveals distinct strategies:
| Organization | IA Strategy | Structure |
|---|---|---|
| NILC | Work Areas + Resource Types | High-level categories with secondary filtering matrix |
| CLINIC | Audience-First | "For Legal Practitioners" vs "For Immigrants" bifurcation |
| ILRC | Issue-Based | Granular legal topics (Aggravated Felonies, CIMTs) |
Recommended Hybrid Approach
Combine:
- Audience-aware primary navigation
- Scenario-first situation categories
- Faceted secondary filtering
- Legal topic deep linking
Organizing Legal Information Under Stress
When individuals interact with legal advocacy resources during acute crisis events—such as a home raid, workplace enforcement, or traffic stop—their cognitive capacity is severely degraded. Dense, hierarchical legal information under these conditions causes panic and abandonment.
The conventional "three-click rule" is counterproductive for crisis users. A flat, scenario-based structure is required.
The Legal Help Website Funnel
Pioneered by the Stanford Legal Design Lab, this funnel categorizes content by immediate situation rather than abstract legal taxonomy.
| Funnel Stage | Component | Navigation Objective |
|---|---|---|
| Stage 1 | Homepage | Separate users by mode: Crisis, Returning, Expert |
| Stage 2 | Problem Area | Recognizable categories matching user mental models |
| Stage 3 | Scenario Page | "Payoff Node" - step-by-step guides, local services |
Implementation
{# Homepage with mode separation #}
<div class="entry-points">
<a href="/emergency/" class="entry--crisis">
I'm being stopped NOW
</a>
<a href="/know-your-rights/" class="entry--prepare">
I want to prepare
</a>
<a href="/resources/" class="entry--advocate">
I'm an advocate/attorney
</a>
</div>
Advocacy Organization IA Patterns
Analysis of leading organizations reveals distinct strategies:
| Organization | IA Strategy | Structure |
|---|---|---|
| ILRC | Matrix taxonomy | By legal issue × resource type × location |
| ACLU | Topical focus | Border Humanity, Deportation & Due Process |
| NILC | Thematic layers | Centralized "Know Your Rights" library |
Recommended Approach
For crisis-ready platforms, combine:
- Scenario-first primary navigation
- Geographic secondary filtering
- Legal topic deep linking
Content Categorization
Progressive Disclosure Pattern
Initial view presents high-level, actionable imperatives:
<div class="rights-summary">
<h2>Your Rights</h2>
<ul class="rights-list--primary">
<li>You have the right to remain silent</li>
<li>You can refuse warrantless entry</li>
<li>You can ask if you are free to leave</li>
</ul>
<details class="rights-details">
<summary>Legal basis and exceptions</summary>
<!-- Deep statutory content hidden by default -->
</details>
</div>
Taxonomy Structure
| Level | Content Type | Example |
|---|---|---|
| Category | Situation | "At Home", "At Work", "While Driving" |
| Subcategory | Specific scenario | "ICE at My Door", "Workplace Raid" |
| Content | Rights + actions | "Don't open the door", "Ask for warrant" |
| Deep link | Legal details | Constitutional basis, case law |
Sidebar Navigation
For long-form legal guides, sticky sidebar navigation maintains context:
.guide-sidebar {
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
}
.guide-sidebar__link {
display: block;
padding: 0.5rem 1rem;
border-left: 3px solid transparent;
}
.guide-sidebar__link--active {
border-left-color: var(--color-primary);
background: var(--color-highlight);
}
Implementation with 11ty
{# Auto-generate sidebar from headings #}
{% set headings = content | extractHeadings %}
<nav class="guide-sidebar" aria-label="Page sections">
{% for heading in headings %}
<a href="#{{ heading.id }}"
class="guide-sidebar__link">
{{ heading.text }}
</a>
{% endfor %}
</nav>
Cross-Linking Strategy
Related resources should be contextually linked within narrative flow, not isolated in "See Also" widgets.
Inline Contextual Links
If you're stopped at a checkpoint, you have specific rights
that differ from a [regular traffic stop](/know-your-rights/traffic-stops/).
For checkpoint locations by state, see our
[checkpoint map](/know-your-rights/checkpoint-locations/).
Related Resources Block
Place at natural decision points, not just page bottom:
<aside class="related-resources" aria-labelledby="related-heading">
<h3 id="related-heading">Prepare for This Situation</h3>
<ul>
<li><a href="/printables/pocket-card/">Download Pocket Rights Card</a></li>
<li><a href="/resources/legal-documents/">Find Local Legal Aid</a></li>
</ul>
</aside>
Search Implementation
Pagefind for Static Sites
Pagefind provides robust search without a server:
// eleventy.config.js
module.exports = function(eleventyConfig) {
eleventyConfig.on('eleventy.after', async () => {
const { createIndex } = await import('pagefind');
const { index } = await createIndex();
await index.addDirectory({
path: '_site'
});
await index.writeFiles({
outputPath: '_site/pagefind'
});
});
};
Multilingual Search
Pagefind automatically segments indices by lang attribute:
<!-- Spanish page -->
<html lang="es">
<!-- Searches on this page query Spanish index -->
</html>
Legal Term Normalization
Map colloquial terms to formal terminology:
// pagefind.config.js
export default {
processTerm: (term) => {
const synonyms = {
'deportation': 'removal',
'deported': 'removed',
'green card': 'lawful permanent resident',
'papers': 'documentation',
'la migra': 'ice',
'inmigración': 'immigration'
};
return synonyms[term.toLowerCase()] || term;
}
};
Autocomplete Suggestions
Populate with high-volume problem-area searches:
const topSearches = [
'ice at my door',
'workplace raid rights',
'checkpoint refuse search',
'daca renewal',
'find immigration lawyer'
];
searchInput.addEventListener('focus', () => {
showSuggestions(topSearches);
});
Navigation Depth Analysis
Crisis vs. Preparedness Paths
| User Mode | Optimal Depth | Rationale |
|---|---|---|
| Crisis | 1-2 clicks | Cognitive load severely impaired |
| Preparedness | 3-4 clicks | Educational exploration acceptable |
| Advocate | 4+ clicks | Deep technical resources expected |
Flat Structure for Crisis
Homepage
├── Emergency Help (1 click)
│ ├── Red Card (immediate display)
│ ├── Call Hotline (tel: link)
│ └── Find Legal Observer (location)
Deep Structure for Preparation
Homepage
├── Know Your Rights (1 click)
│ ├── At Home (2 clicks)
│ │ ├── ICE at Door (3 clicks)
│ │ │ └── Warrant Types (4 clicks)
Content Discovery Patterns
Browse vs. Search Preference
| User Context | Preferred Method |
|---|---|
| Crisis/immediate need | Search |
| Proactive preparation | Browse |
| Specific legal question | Search |
| General education | Browse |
| Returning user | Direct links/bookmarks |
Hybrid Approach
<div class="discovery-options">
<div class="discovery--browse">
<h2>Browse by Situation</h2>
<nav><!-- Category links --></nav>
</div>
<div class="discovery--search">
<h2>Search for Specific Help</h2>
<form action="/search/">
<input type="search"
placeholder="E.g., 'checkpoint rights'"
aria-label="Search legal resources">
</form>
</div>
</div>
Mental Model Alignment
User Mental Models
Users think in terms of situations, not legal categories:
| User Thinks | Legal Category |
|---|---|
| "ICE is at my door" | Fourth Amendment, Warrant Requirements |
| "Police pulled me over" | Traffic Stops, Miranda Rights |
| "Boss said ICE is coming" | Workplace Enforcement, AB 450 |
| "My kid's school" | Sensitive Locations Policy |
Category Naming
Use plain language matching user mental models:
| Avoid | Use |
|---|---|
| "Fourth Amendment Protections" | "Your Rights at Home" |
| "Workplace Enforcement Actions" | "ICE at Work" |
| "Border Zone Jurisdiction" | "100-Mile Zone" |
| "Removal Proceedings" | "Immigration Court" |
Landing Page Strategy
Hub pages for the 6 macro-categories must utilize progressive disclosure. Rather than massive link farms, hub pages should summarize 7-12 sub-pages through high-contrast components.
Hub Page Components
| Component | Purpose |
|---|---|
| Quick Links | High-priority, frequently accessed content |
| Featured Resources | Editorially selected key materials |
| Most Popular | Data-driven top accessed pages |
| By Audience | Filtered views for user types |
Implementation Pattern
{# Hub page with progressive disclosure #}
<section class="hub-quicklinks">
<h2>Quick Access</h2>
{% for item in quickLinks %}
<a href="{{ item.url }}" class="quicklink-card">
<span class="quicklink-icon">{{ item.icon }}</span>
<span class="quicklink-title">{{ item.title }}</span>
</a>
{% endfor %}
</section>
<section class="hub-sections">
{% for section in sections %}
<details class="hub-section">
<summary>{{ section.title }} ({{ section.pages | length }} guides)</summary>
<ul>
{% for page in section.pages %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
</details>
{% endfor %}
</section>
Cross-Linking Architecture
To prevent orphan pages within the 223-page architecture, contextual cross-linking is mandatory. Legal process pages must programmatically generate "Related Resources" based on shared taxonomy tags.
Tag-Based Related Content
// eleventy.config.js - Related content filter
eleventyConfig.addFilter('relatedContent', function(collection, page, limit = 3) {
const pageTags = page.data.legal_topic || [];
return collection
.filter(item => item.url !== page.url)
.map(item => {
const itemTags = item.data.legal_topic || [];
const overlap = pageTags.filter(tag => itemTags.includes(tag));
return { item, score: overlap.length };
})
.filter(({ score }) => score > 0)
.sort((a, b) => b.score - a.score)
.slice(0, limit)
.map(({ item }) => item);
});
Cross-Section Linking Rules
| Content Type | Links To |
|---|---|
| Legal Guide | Related printables, tools, case law |
| Printable | Parent guide, related scenarios |
| Dataset | Analysis guides, methodology pages |
| Screening Tool | Clinical protocols, referral resources |
Related Resources
- Search & Discovery - Pagefind configuration
- Mobile-First Design - Navigation for mobile
- Accessibility - Screen reader navigation
- Sitemap - Complete site structure
- SEO Strategy - Discoverability optimization