CS-01 Alibaba Teaser — What Ramp and Capital One Buyers See in 30 Seconds

Current state, June 30

Three things are resolved. The browser title reads mandate-forward: Alibaba.com — Redesigning B2B Trust at $50B+ GMV — Juno Chen. The hero brief delivers scale, role, team, and four outcome metrics before scroll. Both hero and closing sections carry a CTA linking to the gated full case study. Structural prerequisites are in place.

Three things are still open. The OG image is broken in a way that will damage every Slack and LinkedIn share. The hero H1 uses craft language where it needs mandate language. And a 16-row component rack is consuming roughly half the page's scroll depth on a teaser that needs to convert in 30 seconds. Fix those three, in that order, before the long weekend. Hiring managers clear browser tabs before holidays. If your link is sitting in someone's Slack right now, the unfurl is what determines whether they click before Friday.

One framing note before the walkthrough. The Ramp buyer is scanning for proof you've solved trust at transaction scale. The Capital One buyer is scanning for proof you change how design organizations operate. Two different pattern-matching processes running against the same page. Every layer of this teaser either feeds both or starves one.

Link preview — the five seconds before anyone visits

When a Ramp design director pastes your URL into a hiring channel, the OG title renders well. Alibaba.com — Redesigning B2B Trust at $50B+ GMV tells a fintech buyer: this person operated at real transaction scale on a real trust problem. That earns the click.

Then the image tries to render. Your OG image tag points to a PNG that is 3840 × 16,362 pixels. A full-page composite, not a preview card. You've declared it as 1200 × 630 in the HTML, but Slack and LinkedIn read the actual file. At that aspect ratio, the platform will either crop to a meaningless horizontal sliver or reject the image entirely. Both outcomes kill the visual credibility of the unfurl at the exact moment someone is deciding whether to open the link. In a fast-moving Ramp hiring channel, a broken image card gets scrolled past, not clicked. In a more deliberate Capital One Slack thread where someone is sharing candidates for evaluation, a broken preview reads as a craft-credibility problem: if the metadata is wrong, what else is wrong?

Second metadata problem: your OG description drops the −47% security-concern metric. Your Twitter description drops the +2.2pt NPS metric. Neither platform gets the full picture. Your meta description already carries three of the four outcome metrics and is missing +7% DAU. Add it, then copy the updated description into both OG and Twitter description fields verbatim so all four metrics appear in every unfurl context.

Browser tab — nothing to change

Alibaba.com — Redesigning B2B Trust at $50B+ GMV — Juno Chen does exactly what a tab title should do. When a hiring manager has fourteen tabs open and is scanning for the one they meant to come back to, this title competes on the right terms: company, mandate, scale, name. Four words of signal in a row of noise. Leave it.

First screen — the H1 is costing you

The hero brief is doing real work. Role, team composition, scale ($50B+ GMV, 200K+ suppliers, 25M+ desktop sessions), and four outcomes (+7% DAU, +20% daily transactions, +2.2pt NPS, −47% security concerns) all land before scroll. A Ramp buyer sees transaction-scale trust metrics and recognizes the problem domain. A Capital One buyer sees cross-functional team scope and executive mandate. The brief earns the scroll.

The H1 does not.

The signals before anyone touched a screen is a narrative hook for someone already invested in the story. A hiring manager on a 30-second scan hasn't decided to invest yet. That decision happens at the H1, and right now the H1 invites curiosity from a reader who hasn't earned enough context to be curious. Tell them what you did.

Replace the H1. Two options depending on which buyer room you're optimizing for this week:

For the Ramp buyer (trust architecture, transaction scale):

For the Capital One buyer (mandate ownership, org-level change):

That second line already exists in your closing section. It is the strongest single sentence on the page. Move it up. The closing section can use different language. The H1 cannot afford to be coy.

The eyebrow (Alibaba.com · B2B Platform Redesign · 2024) contextualizes without competing. Leave it.

Scroll depth — where the two buyers diverge

The three sprint sections (First Impression, Search Journey, Transaction Confidence) follow a clean pattern: diagnostic with a specific metric, before state, redesigned states. The diagnostics are sharp. "73% of sessions ended without engagement" is a number a Ramp buyer respects because it quantifies the trust failure in behavioral terms they use daily. "47% of buyers cited security fears at payment" tells a Capital One buyer this candidate knows how to find the structural problem before proposing the structural fix.

Nine before/after screenshots across three sprints provide craft signal without requiring the buyer to evaluate craft in detail. They work differently for each profile, though. The Ramp buyer reads the before/after pairs as transaction-flow evidence: anonymous state to authenticated state, undifferentiated search results to supplier-verified context, buried Trade Assurance to surfaced trust signals. They see the trust architecture changing. The Capital One buyer reads the same pairs as sprint-methodology evidence: a structured diagnostic-to-redesign process repeated three times across an enterprise surface area. They see an operating model. The screenshots carry both readings simultaneously.

Then the component rack.

Sixteen rows of token documentation. Orange #FF6A00. Spacing scale 2/4/6/8/12/16/20/24/32/40/48. Border-radius 3px for chips. This is roughly half the page's scroll depth, and it is working against you with both buyers.

For the Ramp buyer: token documentation signals IC depth, and it pushes away from the systems-level trust-architecture thinking they're hiring for. A fintech design director scanning this page will mentally reclassify you from "leader who redesigned trust at scale" to "designer who built a component library." Those are different candidates. The second one doesn't get the interview.

For the Capital One buyer: an enterprise AI-org-transformation leader is scanning for evidence that you change how design organizations operate. Component specs prove you do the work. That buyer is looking for evidence you change the conditions under which work gets done, and sixteen rows of token documentation won't give them that. Every row of the rack pushes you further from the org-transformation frame.

Remove the entire component rack from the teaser. The sprint sections already establish craft credibility through the before/after comparisons. If you want a single craft-depth signal, keep one row: the trust badge system, because it directly supports the trust-architecture narrative both buyers care about. Move everything else behind the password gate into the full case study, where a buyer who has already decided to evaluate you will appreciate the rigor.

Removing the rack transforms the page's pacing. Right now, a buyer who scrolls past the strong sprint sections hits a wall of implementation detail and loses momentum before reaching the closing CTA. Without the rack, the sprint sections build to the CTA at the moment of peak interest.

CTA — one refinement

The CTA copy (Request the full case study) is clear and correctly gated. It appears in the hero and repeats in the closing section. The closing section's three-pillar summary (Homepage Architecture, Search & Filter System, Product Detail & Transaction Confidence) previews what's behind the gate without giving away the depth. Placement is right.

The closing H2 (I named the gap. Secured the mandate. Redesigned the platform.) is the strongest positioning line on the page. If you move a version of it to the hero H1 as recommended above, rewrite the closing H2 to point forward into what's gated:

The Ramp buyer hears "design decisions" and "$50B+ in transactions" and expects trust-architecture depth. The Capital One buyer hears "executive alignment that funded the fix" and expects the org-leadership narrative. One sentence pulling two audiences forward, and it pulls harder than a table of contents.

Prioritized action list

Do items 1 and 2 today. They are metadata changes requiring no content restructuring.

1. Replace the OG image. Export a 1200 × 630 card with the before/after homepage comparison and text overlay. Update og:image and twitter:image paths. Verify actual file dimensions match declared dimensions.
2. Unify OG and Twitter descriptions. Add +7% DAU to the meta description, then copy it into both OG and Twitter description fields so all four metrics appear in every unfurl context.
3. Replace the hero H1. Swap The signals before anyone touched a screen for mandate-forward language. Exact options above.
4. Remove the component rack. Move all 16 rows behind the password gate. Keep the trust badge row if you want one craft-depth signal on the teaser. Nothing else.
5. Rewrite the closing H2 to avoid duplicating whatever you use for the new hero H1. Point it toward what's behind the gate with outcome language, not section labels.

The page is close. The sprint sections are earning their space. The metadata is almost right. Clear the three things working against you and this teaser converts the scan into the request. Hiring managers who come back Tuesday with clean inboxes and fresh tabs will re-encounter your link. Make sure what they see is the version that earns the click.