CS-03 Red Cross Teaser Page Audit — Mandate Before Mission

Current state, verified June 30, 2026

Live page returns HTTP 200. Roughly 520 words of stable visible text. Page title: "National Disaster Relief Platform · 0→1 Build — Juno Chen." H1: "Designing for the worst day of someone's life." Role line in the hero brief: "Product Design Director / GM · 0→1 Build." Six workflow sections spanning five user roles, each with three animated demo cards. Two CTAs linking to the gated full case study. No residual "Product Designer" framing anywhere on this page. Clean pass on the title-gap check.

The metadata layer is positioned correctly. The reading layer is working against it. That gap drives every recommendation below.

A healthcare-platform hiring manager scanning this page for evidence of regulated-environment platform leadership will categorize it as a nonprofit impact story before the professional signal arrives. The role line, the metrics, the multi-role workflow architecture are all present and strong. They are just buried under a humanitarian frame that fires first and files the case study in the wrong mental folder. Every fix below serves one objective: make the platform consolidation story register before the mission story.

1. Page title

Current: "National Disaster Relief Platform · 0→1 Build — Juno Chen."

Problem: Leads with a product category label. A buyer scanning browser tabs or search results reads "National Disaster Relief Platform" and thinks they are looking at a product page, not a candidate's platform leadership case. The mandate signal is absent: six systems consolidated, national deployment in six months, GM-level ownership.

Revised title:

No "Red Cross." No "disaster relief." Those belong in the body where they provide context. The title's job is to make the right buyer click. The right buyer clicks because they want to know how someone consolidated six systems and shipped nationally in six months.

2. First screen

Current: The H1 "Designing for the worst day of someone's life" is the first content signal. The hero paragraph opens with "Displaced families waiting in shelters. Six disconnected tools. A federal clock running." The role line and outcome metrics sit in the hero brief, below the hero paragraph and first CTA in source order. The hero section's CSS sets min-height: calc(100vh - 200px), which means the hero brief likely sits at or below the fold for most visitors on a standard laptop.

Problem: If the role line is below the fold, the H1 is the only professional signal that fires before scroll. And the H1 is a mission statement. It sets the frame before any platform evidence arrives. A healthcare-platform buyer reads it and categorizes: nonprofit, empathy-driven, probably small scale. The hero paragraph partially recovers with "Six disconnected tools," but recovery after a frame is set costs more than leading with the right frame.

The line doing the work the H1 should be doing is buried at the bottom of the page: "Six systems. Three roles. One source of truth."

Fix: Move the mandate to the H1. Relocate the current H1.

Revised H1:

"Designing for the worst day of someone's life" is a strong line. Cut it from the H1 position but don't delete it. Move it to the closing section as the lead-in above "Six systems. Three roles. One source of truth" (which is now vacated by the H1 swap). In that position it reframes the mission as the constraint that made the platform work hard, after the buyer has already absorbed eighteen screens of platform evidence. The line does more there. Up top it misfiled the case study. Down below it lands with the weight of everything the buyer just saw.

Revised hero paragraph opening (keep the rest as-is):

The buyer now reads consolidation scope, role authority, and deployment speed before humanitarian context. The mission registers as the constraint that shaped the platform.

3. Outcome proof

Current: Hero brief reads "$847K disbursed · 6→1 system switches · 1,689 cases in 2 weeks." Closing pillars add "10× volume. Zero retraining required." Demo card labels surface "$847K disbursed · 3 modules" and "98.7% FEMA compliant ✓" inside animated states.

Problem: The metrics are present and structurally placed. But they read as operational throughput, not design leadership outcomes. "$847K disbursed" sounds like a fundraising number to someone outside disaster services. "Disbursed" itself is government/nonprofit vocabulary. A healthcare-platform buyer reads "disbursed" and hears grants, not platform transactions. "1,689 cases in 2 weeks" sounds like a nonprofit impact report. What's missing: the design decision that produced the result.

The closing pillars actually make this connection. "Three fields on the intake form trigger eligibility checks, identity verification, and FEMA audit trail generation — automatically" links a specific design decision to a system outcome. But the hero brief, where the buyer first encounters the metrics, does not.

Fix: Reframe the hero brief outcome line. Change the verb.

Revised:

"Processed" reads as platform evidence. "Through a single payment workflow" and "with zero retraining" turn throughput stats into design decisions. The buyer now reads: this person designed a payment workflow that handled $847K, consolidated six systems into one, and the platform required no retraining at launch. Ten minutes of copy editing.

4. Craft signal

Current: Six workflow sections organized by user role: Field Volunteer (Intake), Caseworker (Case Detail), Caseworker (Verification), Finance Officer (Payments), Supervisor (Eligibility), Program Director (Command). Eighteen animated demo screens across six sections. Section headings are humanistic: "Three fields, not eight," "Seeing the whole family," "Every check before a dollar moves."

Problem: The role-based workflow organization is the strongest platform architecture signal on the page. Five distinct user roles, one shared data model, role-specific views. A healthcare-platform buyer should recognize multi-role platform design at scale immediately. The section headings frame each workflow as a user empathy insight. The buyer scanning for platform architecture evidence has to dig past the heading to find it. "Seeing the whole family" speaks to a caseworker's emotional need. "Unified household record across three role views" speaks to platform architecture. The buyer is scanning for architecture.

The animated demo cards show real state logic: "4/4 verified — pass," "Payment blocked — KBA required," "Smart Batch: 47 eligible." Strong craft evidence. But the page uses six <img> elements (one per workflow section, each cycling through three animated states via JavaScript), and all six carry empty alt attributes. The craft signal is entirely visual and entirely dependent on the buyer watching the animations cycle. Fast scanners get nothing.

Fix: Add a platform-architecture subtitle to each workflow section.

Example for Section 01:

Keep the humanistic heading. Add the architecture line above it. The scanning buyer gets the design decision without watching the animation or reading the closing pillars.

Add descriptive alt text to all six image elements. Six tags, not eighteen, so this is genuinely quick. Example: "Intake form showing 3-field smart form with automated case creation." Text-layer backup for fast scanners and accessibility.

5. Density

Current: Roughly 520 words. Six workflow sections with animated demos. Two CTAs. Hero brief with six labeled fields. Three closing pillars.

Problem: None. The page is appropriately scoped as a public teaser. It does not try to be the full case study. The workflow sections provide enough platform evidence to establish credibility without revealing the full design rationale.

Fix: No change. The fixes above add roughly 40–60 words. Stay under 600 total.

6. CTA

Current: "Request the full case study" appears twice, once after the hero paragraph and once after the closing pillars. Both link to cs-03-red-cross.html. No surrounding copy explains what the full case study contains or what the request process involves.

Problem: At the Director+ level, the buyer's implicit question before clicking a gated CTA is: "Will the full version show me decision-making process, org dynamics, and trade-offs, or just more screens?" The current CTA does not answer that. Ambiguity about what is behind the gate creates friction.

Fix: Add a single line of context to each CTA. Different content previews for different scroll depths.

Hero position:

Closing position:

The hero CTA signals architecture and compliance depth. The closing CTA signals stakeholder complexity and deployment strategy. Both tell the buyer the full version contains leadership-level decision content: architecture, trade-offs, stakeholder dynamics.

Priority stack

1. Revise the H1. Highest leverage. The H1 is actively misfiling the case study in the buyer's mental taxonomy. Everything else on the page is doing reasonable work. Relocate the current H1 to the closing section. Twenty minutes.
2. Reframe the outcome line. Swap "disbursed" for "processed." Connect metrics to design decisions. Ten minutes.
3. Revise the page title. Consolidation scope and deployment speed in the browser tab. Five minutes.
4. Add architecture subtitles to workflow sections. Thirty minutes if the CSS supports a subtitle element.
5. Revise CTA copy. Fifteen minutes.
6. Add image alt text to six elements. Low urgency, easy.

The page is structurally sound. The role line is correct. The workflow organization is genuinely strong multi-role platform evidence. One framing decision at the top tells the buyer this is a mission story before it tells them it is a platform story. Fix the frame. The evidence is already there, waiting to be read correctly.