Current-state delta
Fetched the live page on July 10, 2026 UTC; the HTML was last modified July 9, 2026.
The metadata problems from the prior issue are resolved. The <title> tag now reads Alibaba.com — Redesigning B2B Trust at $50B+ GMV — Juno Chen. The meta description leads with role, surfaces research methodology, closes with outcomes: +20% daily transactions, +2.2pt NPS, −47% buyer-reported security concerns. The og:title matches. These are strong.
One gap: the og:description drops −47% buyer-reported security concerns while the standard meta description includes it. Add it back. That number is your most distinctive outcome because it proves you moved a trust metric, not just a usage metric. A CPO scanning a Slack unfurl should see it.
That's the resolved work. The open problem is structural, and it lives below the third sprint section.
The core finding
The first half of this page is one of the strongest enterprise teaser structures I've reviewed. Mandate, research signal, outcomes, and before/after proof across three sprint sections. A hiring manager scanning for thirty seconds gets altitude, craft, and results.
The second half turns the page into a spec document. Sixteen rows of component specifications, token tables, color primitives with hex values, a type scale, spacing documentation. Genuine system-level work on the wrong page.
The teaser has one job: generate enough signal to earn a full-case request. Everything on this page should be evaluated against that job and nothing else.
Page title
The title tag works. Alibaba.com — Redesigning B2B Trust at $50B+ GMV delivers company name, mandate framing, and scale in a browser tab, a Google result, and a link preview. No change needed.
The visible H1 is a different matter. The signals before anyone touched a screen. This is a writer's line. Evocative, research-forward, and it would work as a subhead. As the largest text on the page, it delays the information a scanner needs. The mandate paragraph directly below the H1 contains everything the H1 should say.
Replace with:
"Named the trust gap. Secured the mandate. Redesigned the platform at $50B+ GMV."
This mirrors your own closing copy almost exactly, which creates coherence across the page. Leadership verbs first (named, secured, redesigned), scale last. Keep the current H1 as a subhead or pull-quote if you want the editorial flavor. The largest text on the page should be the thing a recruiter copies into the intake note.
First screen
The hero section is well-structured. At a standard 1440×900 desktop viewport, the CSS places the hero at min-height: 75vh with case label, H1, mandate paragraph, CTA, and proof rows (Company, Project, Role, Team, Scale, Outcome) all within the first screen. Mandate, scale, and outcomes land before any scroll.
Two problems.
The proof list buries the outcome row at the bottom of six rows. A scanner reading top-down hits Company, Project, Role, Team, Scale, then Outcome. The first four rows are context. The last two change behavior. Reorder: Outcome first, then Scale, then Role. Company, Project, and Team follow. The person scanning already knows it's Alibaba from the title.
The hero CTA (Request the full case study) appears between the H1 and the proof rows. You're asking for the click before you've delivered the proof. Move it to directly after the outcome row. Or duplicate it: one after outcomes, one at page close.
The hero uses a two-column grid (grid-template-columns: 1fr 1fr) with no responsive override I could find collapsing this at narrow viewports. Verify on a real 390px device. A recruiter forwarding your link over iMessage sends the hiring manager to the mobile view.
Length and density
Sections I through III are excellent teaser material. Each sprint section delivers a diagnostic statement (what was broken), a before screenshot, and one or two after screenshots. The diagnostic copy is tight: 73% of sessions ended without engagement, 47% of buyers cited security fears at the point of payment, a 37-point sign-in gap sat below the app fold. Leadership-altitude observations backed by visible design proof. A scanner who gets through these three sections has everything they need to request the full case.
Then Section V. Labeled UI Components. Sixteen rows of component specifications: navigation bars, search-bar mode variants, filter panels, five product-card variants, supplier cards, PDP buybox components, onboarding flows, trust badges, button styles, pagination, breadcrumbs, color primitives with hex values, type scale with font weights, spacing scale, border-radius scale.
This material proves system thinking. It proves you built a design language, not a set of screens. I understand why it's here.
But the 30-second scanner is asking three questions: Did this person operate at the altitude I need? Do they have the judgment? Is there enough craft to believe the outcomes are real? Sections I through III answer all three. The component atlas answers a fourth question that belongs in the full case, where someone has already committed forty-five minutes and is evaluating depth.
Sixteen component rows on a teaser page read as a page that kept going past its natural close. The density dilutes the leadership signal the first half established.
Move to the full case: All sixteen rows and all token documentation to the gated full case.
Keep on the teaser: A single row or 2×2 grid showing three to four representative components at thumbnail scale, labeled something like Design System: ~40 components, 3 token layers, linking to the full case. (I counted sixteen atlas rows on the live page, many containing multiple variants; "~40" is an estimate from that count, and the three token layers map directly to Colors, Type Scale, and Space & Shape.) This signals system thinking without requiring the scanner to evaluate the system. The proof is that the system exists and has scale. The details belong in the deep read.
One structural note: the page jumps from Section III to Section V. No visible Section IV in the fetched HTML. A scanner who notices the gap may read the page as incomplete or wonder if content was removed. On a page whose entire thesis is trust architecture, a numbering seam is a small trust erosion. Either renumber the component section or add a one-line placeholder: Section IV — Research & Validation → available in the full case.
Craft signal
Strong. Before/after screenshots across three sprint sections are the right proof artifact for a teaser. Each sprint pairs one legacy screen against one or two redesigned states. The structural contrast is built into the layout: Legacy Homepage next to Anonymous State — Acquisition Mode and Authenticated State — Personalized Sourcing. Even without reading captions, the visual difference between a consumer-facing legacy page and a B2B-native redesign should register at scan speed. The diagnostic copy above each section adds the leadership layer: you named the problem before solving it.
I could not render the page visually in this review, so I can't confirm whether the before/after quality difference is legible at the actual image sizes served. If the screenshots are full-page captures scaled to fit the browser-frame component, fine detail may wash out. Worth checking whether the most distinctive UI changes (trust badges on cards, Trade Assurance surfacing on PDP, B2B filter architecture) are visible without zooming. If they require study, consider cropping to the highest-contrast region of each pair.
The og:image is set to home-logged-out.png at 1200×630. Confirm this renders well at social-card dimensions. If it's a full-page screenshot scaled down, the detail will be unreadable at card size. Consider a cropped version showing the most distinctive UI element at a size where craft is visible in a LinkedIn or Slack preview.
CTA
The page opens with a CTA in the hero and closes with the same CTA after a strong summary section. The closing copy works: I named the gap. Secured the mandate. Redesigned the platform. The three pillar summaries (Homepage Architecture, Search & Filter System, Product Detail & Transaction Confidence) are tight.
The gated structure is respected in intent but undermined by the component atlas. Someone who scrolls through sixteen rows of component specs has already received more detail than a teaser should provide. The CTA to "request the full case" feels odd after you've shown them the design system documentation. Remove the atlas and the CTA regains its logic: you've shown enough to prove the work is real, and now you're offering the depth.
Footer navigation links to ← Previous Equinox+ and Next → Red Cross. Ensure the full-case CTA is visually dominant over these prev/next links at page close.
Actions, ranked by impact
- Section V component atlas. Move all sixteen rows and all token documentation to the gated full case. Replace with a thumbnail grid and a system-scale label linking to the full case.
- H1. Replace with mandate-and-scale language that mirrors the closing copy. Current line becomes a subhead.
- Proof row order. Outcome first, then Scale, then Role. Context rows last.
- Hero CTA placement. After the outcome row, not before it.
og:description. Add−47% buyer-reported security concerns.- Section numbering gap. Renumber or add a placeholder for Section IV. Don't let a trust-architecture case have a structural seam.
og:image. Confirm readability at social-card dimensions; crop if needed.- Mobile layout. Verify the two-column hero grid and sidebar margin at 390px on a real device.
The first half of this page earns the click in thirty seconds. The second half spends three more minutes delivering material nobody has asked for yet. Move the atlas to the full case. Let the teaser close where the proof closes.
-
Equinox+ teaser metadata still generic: The browser title is still
Equinox+ · Teaser · Juno Cheneven though the page body contains Product Design Director, 600K+ members, 90 days, and 4.8 App Store proof — the same title-tag fix applied to Alibaba's teaser needs to happen here before any outreach drives traffic to it. -
Ramp's Director posting validates the trust-plus-agents frame: Ramp's current Director, Product Design listing explicitly says design is now building agents, designing memory, and defining how design works in an AI-native world, which maps directly to the Alibaba trust proof paired with the Trust essay.
-
Private essay still ships content before the gate: The TinyFish/pricing essay at junochen.com/what-do-you-count.html returns HTTP 200 and delivers full HTML behind a client-side password overlay, meaning crawlers and Slack unfurls can surface private portfolio content that should never be public.
-
Headway wants Claude Code fluency alongside clinical stakes: Headway's Design Director, Provider Experience posting asks designers to prototype with Claude Code, Cursor, and MagicPatterns while owning provider EHR strategy across billing, insurance verification, and AI-centered workflows — a role where the Thermo Fisher consequence proof should lead before the Trust essay layers in.