CS-03 Red Cross Teaser Audit — Scan-Speed Mandate Check

Verified current state as of July 9, 2026:

Resolved: Browser title is mandate-forward: "National Disaster Relief Platform · 0→1 Build — Juno Chen." Meta description frames the project as 0→1 platform design. Hero brief rows surface Product Design Director / GM, 0→1, six systems → one, six-month timeline, national deployment, $847K disbursed, 1,689 cases in two weeks. Role, scale, and outcome data are present above the fold.

Still open: Hero headline leads with emotional disaster-relief framing. Empty alt attributes on all six section illustrations. Section structure demonstrates multi-stakeholder platform architecture but never names it as a design leadership decision. No prior Red Cross-specific recommendation changelog exists, so this audit benchmarks against the live page and canonical case facts.

The metadata and brief rows have improved substantially. What remains is a framing problem concentrated in one element, and a handful of missed signals that cost you at scan speed.

The headline is anchoring the wrong read

The hero headline frames the work around "a person's worst day."

Accurate. And it's costing you the first fifteen seconds.

A hiring manager gives a portfolio teaser roughly fifteen seconds before deciding to read further or click away. The largest text element on the page sets the interpretive frame for everything downstream. Your brief rows contain excellent mandate data. But the headline has already told the reader's brain: this is a story about helping people during disasters. Every fact that follows gets filed under that frame. $847K disbursed becomes a program outcome. 1,689 cases becomes a humanitarian metric. The GM role becomes "she helped out at the Red Cross."

The brief rows cannot overcome the headline's anchor. They can only be interpreted through it.

This is the core problem on the page. Fix it and the rest of the teaser works. Leave it and everything downstream works against you.

Recommended headline:

Then let the intro paragraph carry the human context. The emotional weight hits harder when the reader already understands the operational scale. A person's worst day becomes the constraint that made the platform problem genuinely difficult. Let it do that work.

First screen: strong, with one sequencing fix

At standard laptop viewports, the first screen shows the eyebrow (American Red Cross / Disaster-Relief Platform / 2021), the hero headline, the intro paragraph, the CTA, and all six brief rows. Most of this real estate is well-used.

The brief rows are correctly structured: client, platform, role, team, scale, outcome. The role row names Product Design Director / GM and 0→1 build. The scale row names six months, national deployment, and replacement of six legacy systems. The outcome row names $847K disbursed, 6→1 system switches, and 1,689 cases in two weeks.

Strong. The headline is the only thing undermining it.

One additional fix: the intro paragraph currently front-loads "displaced families" and "six disconnected tools" before reaching Juno's name and role. Reverse that sequence. Your name and role should appear in the first sentence. The reader needs to know whose story this is before they process what the story is about.

Recommended first sentence of the revised intro:

Name, role, mandate scope, then mission context as operating environment. Everything after this sentence can expand on the human stakes, the untrained volunteers, the surge conditions. But the first sentence has already established who did what at what scale.

Outcome proof: add the mechanism

$847K disbursed. 1,689 cases in two weeks. Surge-ready at 10× volume, zero retraining.

Right numbers. Under the current humanitarian headline frame, they read as program metrics. A hiring manager scanning fast might think: "Great, the Red Cross disbursed money. What did the designer do?"

Your closing section's three pillars partially solve this. "Three intake fields trigger eligibility checks, identity verification, and FEMA audit-trail generation while the interface stays simple" is a design leadership statement. "10× volume required zero retraining" is a design leadership outcome. But those pillars appear at the bottom of the page. A hiring manager who bounced at the headline never sees them.

Pull one line into the hero brief's outcome row. Currently the outcome row reads as three metrics. Add the fourth:

$847K disbursed · 6→1 system switches · 1,689 cases in 2 weeks · 10× surge, zero retraining

The first three could belong to any program manager's report. The fourth is a design decision with a measurable operational consequence. The system scaled without breaking and without requiring the organization to retrain its workforce. That is a GM-level outcome, and it belongs where the hiring manager will actually see it.

Craft signal: name the architecture, fill the alt text

The six content sections are structured by user role: Field Volunteer, Caseworker, Finance Officer, Supervisor, Program Director. Each section has a design-decision headline ("3 fields, not 8," "checks before money moves," "queue, not case-by-case"), a short rationale quote, and three gallery cards showing platform screens.

The section headlines read as design leadership decisions. Good. "Queue, not case-by-case" is a systems-design choice with operational consequences. "Checks before money moves" is trust architecture.

Two issues:

The role-based architecture goes unnamed. You designed one platform serving three distinct roles with role-specific views sharing a single data model, and the page demonstrates it through six workflow sections. But the reader has to infer the pattern from the section labels. The closing section frames it correctly as "6 systems, 3 roles, 1 source of truth." That framing should appear earlier.

Recommended addition to the platform row in the brief:

Disaster-relief platform · 3 role-specific views, 1 shared record · Salesforce SLDS

That turns the platform row from a technology label into an architecture statement. The sections below then prove what the brief row has already claimed.

Empty alt attributes. Every section illustration has an empty alt tag. This matters beyond accessibility compliance because alt text is a second channel where the mandate signal registers. A screen reader user encounters it. A hiring manager on a slow connection sees it when images fail to load. A design-literate evaluator who inspects your markup sees it. Descriptive alt text reinforces the design-leadership narrative. Empty alt text reinforces nothing.

Fill these with text that does double duty. Skip generic labels like "Red Cross screenshot." Instead: "Field volunteer intake form showing three-field entry that triggers automated eligibility and identity checks." That alt text describes the image and restates the design decision in the same breath. Every illustration becomes another surface where the mandate registers.

Density

Six sections, three gallery cards each, eighteen screens total. Upper bound for a teaser, but the section headlines are tight, the quotes are short, and the gallery cards are visual. The density serves the mandate because it demonstrates scope. No cuts needed.

CTA

"Request the full case study" is direct. It links to cs-03-red-cross.html. The broader portfolio treats the full case page as gated content, which is a reasonable approach for client-sensitive work. Confirm that the request path requires nothing more than an email address. A hiring manager scanning five portfolios in thirty minutes will not fill out a multi-field form.

What to do

The page is close. Metadata is right. Brief rows are right. Section structure is right. Closing pillars are right.

Five fixes, in priority order:

1. Replace the headline. 6 systems → 1 platform. National deployment in 6 months. Zero retraining at 10× surge. Move the mandate to the largest text on the page. Let humanitarian context serve as evidence of constraint severity. The mandate is the story frame.
2. Rewrite the intro's first sentence. As Product Design Director / GM, Juno led design and delivery of a 0→1 national disaster-relief platform, replacing six disconnected legacy systems with one shared record serving field volunteers, caseworkers, and finance officers, while displaced families waited and a federal clock ran. Name and role first. Mission context as operating environment.
3. Add 10× surge to the outcome row. Transform the metrics from program outcomes to design leadership outcomes.
4. Name the multi-role architecture in the platform brief row. Disaster-relief platform · 3 role-specific views, 1 shared record · Salesforce SLDS.
5. Fill the alt attributes with mandate-reinforcing descriptions. Every illustration is another surface where the design-leadership read registers or doesn't.

After those changes, a hiring manager scanning this page for fifteen seconds will see: GM-level design leader, national platform, six months, extreme constraints, measurable outcomes. That is the read you need. Right now the page earns it at sixty seconds. You don't have sixty seconds.