CS-02 Thermo Fisher Teaser — Resolved, Broken, and Over-Revealed

As of July 9, 2026, here's where CS-02 stands.

Resolved from prior issue: The page title is mandate-forward. The structural diagnosis (exceptions surfacing at the delivery gate, 3–5× costlier to fix than a week earlier) now lives in the hero section. Three of four key metrics sit in the hero right rail where a 10-second scan catches them.

Still open: The og:image returns 404. The 42% overhead reduction metric is absent from the entire page. The artifact grid carries enough design-system detail to risk undermining the gated case. And the page has zero <img> tags, which creates a craft-signal fragility that CS-01 and CS-03 don't share.

The title fix was the structural win. What remains is execution detail. But execution detail is what separates a teaser that earns the click from one that gets a respectful skim and a closed tab. And one of these items, the broken og:image, is actively damaging you right now.

The broken preview card

The declared og:image doesn't exist. Every time a recruiter drops this link into Slack, every time it gets pasted into a LinkedIn message, the preview card renders broken or empty. The twitter:card is set to summary_large_image, which makes the absence more visible, not less. CS-01's OG image resolves correctly (a 3840 × 16362 PNG, HTTP 200). CS-02 is the outlier.

First glance — what registers before reading starts

The browser title reads Thermo Fisher / mySupply — 0→1 Pharma Supply Chain, $20M+ Margin — Juno Chen. This passes. A CPO scanning browser tabs or bookmarks gets the company, the mandate shape, and the outcome scale in one line. The OG title drops the margin figure, which is a minor miss for previews, but the OG description compensates: "No platform existed. Six pharma partners, nine manufacturing sites, a $20M visibility gap. Designed from scratch. All six adopted it." Strong copy. Earns the click on its own.

The H1 is The supply chain six partners never had.

Evocative. Also a tagline. It tells me the work was novel. What's absent: the diagnostic insight, the thing you saw that nobody else did. Compare to CS-03's H1: Designing for the worst day of someone's life. That one works because it names the operating constraint. For CS-02, the diagnostic insight is the real headline. The hero intro carries it, but the H1 doesn't.

Recommended H1:

Three things the current H1 doesn't do: name the structural problem, quantify the cost of inaction, position you as the person who diagnosed the system failure. A CPO reading that sentence recognizes a design leader who finds the problem before opening Figma.

If that feels too operational for a headline:

Still diagnostic, still specific, still earns the next line.

10-second scan — do the metrics land?

The hero right rail lists Role (Product Design Director), Scale (12 months · 6 partners · 9 sites · EU + NA + AU), and Outcome ($20M margin opportunity · 100% partner adoption · 83% IRR). The hero uses min-height: calc(100vh - 200px) with a two-column desktop layout, so on most viewports these metrics sit above the fold. High confidence this passes the scroll test.

Two problems.

42% overhead reduction is missing from the page entirely. Not buried. Absent. $20M margin and 83% IRR speak to finance. 100% adoption speaks to product-market fit. 42% overhead reduction speaks to the daily reality of the people who used the system. It's the number that says this changed how work actually got done. Add it.

Recommended Outcome row:

I reordered deliberately. Dollar figure first (scale), operational proof second (overhead), adoption third (validation), IRR last (financial rigor). That sequence tells a compressed story: found the money, changed the work, everyone adopted it, the math confirmed it.

One more. Change "100% partner adoption" to "6/6 partner adoption." Percentages feel like marketing. Fractions feel like evidence. "100% adoption" could mean two out of two. "6/6" means you had six chances for someone to say no and nobody did. The reference facts for this case use "6/6," so this is alignment with how the work was actually measured. The hero intro already says "All six companies adopted it." Use the fraction.

30-second read — craft signal and density

This is where CS-02 diverges from its siblings in ways that create both a strength and a risk.

Craft signal. The page has zero <img> tags. CS-01 has 23. CS-03 has six. CS-02 relies on an embedded iframe (cs-02-sc-app.html rendering a live dashboard titled "mysupply Platform — Patheon by Thermo Fisher Scientific"), a static mobile mockup built in HTML/CSS, inline SVG data visualizations, and CSS-rendered component samples. The live dashboard embed is genuinely impressive when it loads. The mobile mockup shows real operational data: batch AB1234, manufacturing status, at-risk flag, $174K order total, 65% progress, stage checklist. A hiring manager who spends 30 seconds here sees real product thinking rendered in actual UI, with real data states.

When the embed loads, craft signal passes. When it doesn't, this section is empty. That's a binary. Iframes fail behind corporate proxies, on slow connections, in mobile browsers. CS-01's 23 images degrade gracefully. CS-02's iframe does not. Add a static fallback image inside the showcase container. One screenshot of the dashboard at a meaningful state. Fifteen-minute fix that eliminates a real failure mode and turns a conditional pass into an unconditional one.

Density. The artifact grid lists 13 labeled items: color tokens, status badges, buttons, type scale, KPI card components, seven analytics/data-viz panels, and a regulatory constraints section. The grid includes operational copy that belongs in the full case: "LATE and AT RISK are the two states that cost money." "Ferentino ST2 at 107%: that's the conversation that recovered $2M." "A visibility gap isn't a UX inconvenience — it's a compliance failure."

Compare to CS-03, which uses six act blocks organized by user role, each with an illustration and three cards. CS-03 gives you the system architecture without giving you the system. CS-02 gives you the system outright.

A teaser showing color tokens, type scale, and component anatomy is showing the design system outright. A hiring manager who sees the full component grid has less reason to request the gated case. And the Ferentino line is exactly the kind of high-signal detail that should reward someone for requesting access, not greet them in the preview.

Cut the artifact grid from 13 items to 4–5. Keep:

• KPI card component — product thinking
• One analytics panel (Partner Performance or Site Performance, not both)
• Exception Summary — ties to the diagnostic headline
• Regulatory constraints — domain sophistication

The mobile batch-detail mockup in the app showcase already provides additional craft signal outside the grid, so the grid doesn't need to carry the full burden. Drop color tokens, status badges, buttons, type scale. Those prove craft to other designers but don't move a CPO. Pull the Ferentino quote. Save it for the gated case.

CTA

"Request the full case study" appears in the hero and the closing block, both linking to cs-02-supply-chain.html. Matches CS-01 and CS-03's pattern. The closing block restates the diagnostic frame: "Five failure modes. Five modules. Zero spreadsheets." Clean close. The pillars underneath ("197 orders. Three that matter." / "Internal numbers. Customer numbers. Both." / "Warehouse floor. Planning room.") add texture without over-revealing.

No changes needed.

Priority-ordered action list

Fix today:

• Upload the og:image. The declared URL returns 404. Every share of this link is showing a broken preview card. Upload a single file to https://junochen.com/og-cs-02.jpg.
• Add 42% overhead reduction to the Outcome row. Recommended copy: $20M+ margin recovered · 42% overhead reduction · 6/6 partner adoption · 83% IRR

Fix this week:

• Add a static fallback image inside the app showcase container. One dashboard screenshot that renders when the iframe doesn't load. Without it, craft signal is conditional on an iframe that may not render for the exact audience you need it to reach.
• Trim the artifact grid from 13 items to 4–5. Keep KPI card, one analytics panel, Exception Summary, regulatory constraints. Cut design-system primitives. Pull the Ferentino quote and all operational copy that belongs behind the gate.

Positioning choice:

• Revise the H1. Current: "The supply chain six partners never had." Recommended: "Exceptions hit the delivery gate. By then they cost 3–5× more to fix." This is a positioning choice. The others above are bug fixes. But it determines whether the first line reads as design leadership or project description. The current H1 says you built something new. The recommended one says you saw what was broken and why it was expensive. At Director+ level, the second version earns the meeting.

The page is structurally sound. The prior issue's core problems are resolved. What remains is a broken preview image undermining every share, a missing metric leaving operational proof on the table, and a density calibration that leans toward showing the work rather than teasing it. The first two are afternoon fixes. The third is a judgment call about how much of the system to reveal before the gate.