Skip to content

Sharpen homepage above-the-fold copy and CTA hierarchy#1028

Merged
AvdLee merged 2 commits into
masterfrom
docs/homepage-cro-quick-wins
May 27, 2026
Merged

Sharpen homepage above-the-fold copy and CTA hierarchy#1028
AvdLee merged 2 commits into
masterfrom
docs/homepage-cro-quick-wins

Conversation

@AvdLee
Copy link
Copy Markdown
Owner

@AvdLee AvdLee commented May 27, 2026

Summary

PR 1 of 2 applying page-cro + marketing-psychology to the homepage above-the-fold. Copy-only — no layout changes, no new components. The social-proof restructure ships in PR 2.

What changes above the fold

Slot Before After
H1 Script wordmark "RocketSim" (visual logo, already in nav) The iOS Simulator companion for developers and AI coding agents.
Visual H2 / paragraph subhead "Build, test, and automate iOS apps faster in the Simulator" + 4-verb subhead (H1 above) + "RocketSim lets you inspect, test, and debug your app in the Simulator — without breaking your flow in Xcode, Codex, or Cursor."
Primary CTA Download now Free download (Zero-Price Effect)
Hero nav links "For Teams →" + "Explore features →" "Explore features →" only (Hick's Law)
Microcopy above the CTAs "Scroll down to explore all features ↓" removed
Microcopy below the CTAs none "Get started for free, no signup. Works with Xcode 16+."

Mental models applied

  • Curse of Knowledge: H1 now names the audience and what the product is, not what it does in 4 verbs.
  • Zero-Price Effect: primary CTA leads with "Free".
  • Hick's Law / Paradox of Choice: one primary CTA + one secondary instead of three hero links.
  • Liking / Similarity Bias: subhead names the actual editors the audience uses (Xcode, Codex, Cursor).

Files

  • + "docs/src/old/components/Header.astro" + — drop + "logo" + / + "logoAlt" + / + "scrollText" + props, render + "title" + as a real + "

    " + .

  • + "docs/src/old/components/Navigation.astro" + — new optional + "microcopy" + prop, renders the existing (previously orphan) + ".navigation__microcopy" + class.
  • + "docs/src/pages/index.astro" + — all the homepage copy + CTA changes.
  • + "docs/src/pages/for-teams.astro" + , + "docs/src/pages/terms.astro" + , + "docs/src/pages/privacy.astro" + — drop the now-removed + "logo" + / + "logoAlt" + / + "scrollText" + props to keep the Header signature consistent. Copy on these pages is unchanged.

App Store install tracking (Plausible event names, UTM-rewrite script, + "rel="noopener"" + ) is untouched.

Test plan

  • Homepage hero reads top-to-bottom: H1 → bolded subhead → + "Free download" + + + "Explore features →" + → microcopy.
  • No script wordmark, no "Scroll down…" line, no "For Teams →" in the homepage hero nav.
  • + "/for-teams" + , + "/terms" + , + "/privacy" + render correctly with the new title-only Header (no wordmark, no scroll line).
  • + "Free download" + button still fires the + "App+Store+Install" + Plausible event and the UTM-rewriting script still rewrites + "#js-header-app-store-button" + on load.
  • CI quality gate: + "npm run lint && npm run format:check && npm run typecheck && npm run build" + all pass.

Out of scope (PR 2)

  • Restyle + "AppStore.astro" + into a slim authority strip with honest numbers (★4.8 · Apple Featured · 25K+ developers · 250+ teams).
  • Add the + "TrustedBrands" + logo strip to the homepage with an optional homepage-specific title.

PR 2 will target this branch so both can be tested locally in one go.

Apply page-cro + marketing-psychology to the homepage hero so the
value prop, audience and primary action are clear within 5 seconds.

- Header: drop the decorative script wordmark and the "Scroll down…"
  microline; promote the page title to a real <h1>. Apply across
  index, for-teams, terms and privacy for consistency.
- Homepage H1: "The iOS Simulator companion for developers and AI
  coding agents."
- Subhead: "RocketSim lets you inspect, test, and debug your app in
  the Simulator — without breaking your flow in Xcode, Codex, or
  Cursor." (bold mid-sentence, matches existing white emphasis).
- Primary CTA: "Free download" (leverages the Zero-Price Effect).
- Drop the "For Teams →" hero link to give one clear secondary CTA
  ("Explore features →") and reduce choice paralysis (Hick's Law).
- Add a value-prop microline under the CTAs via a new optional
  `microcopy` prop on Navigation: "Get started for free, no signup.
  Works with Xcode 16+."

This PR is copy-only: no layout changes, no new components, App
Store install tracking and UTM-rewrite script untouched. The
social-proof restructure (authority strip + trusted-brands logos)
ships in a follow-up PR.
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the docs-site homepage hero (above-the-fold) messaging and CTA hierarchy to better communicate RocketSim’s audience/value and reduce choice overload, with small supporting changes to the shared Header/Navigation components to match the new copy structure.

Changes:

  • Replaces the homepage hero title/subhead copy and updates the primary CTA text (“Free download”), removing the “For Teams” hero link.
  • Simplifies Header.astro by removing logo/logoAlt/scrollText props and rendering title as a real <h1>.
  • Adds an optional microcopy prop to Navigation.astro and uses it on the homepage hero.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
docs/src/pages/index.astro Updates hero copy, CTA label, removes extra hero link, and adds navigation microcopy.
docs/src/pages/for-teams.astro Updates Header usage to match the new signature (copy unchanged).
docs/src/pages/privacy.astro Updates Header usage to match the new signature (copy unchanged).
docs/src/pages/terms.astro Updates Header usage to match the new signature (copy unchanged).
docs/src/old/components/Navigation.astro Adds microcopy prop and renders it beneath/alongside hero nav links.
docs/src/old/components/Header.astro Removes logo/scroll text props and changes hero title to <h1>{title}</h1>.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 89 to 96
<slot />
</ul>
{microcopy && <p class="navigation__microcopy">{microcopy}</p>}
</nav>
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch on both points. Fixed in e5c0dfc:

  • The microcopy <p> now lives outside the <nav aria-label="Hero navigation"> landmark, so assistive tech navigating by landmark no longer surfaces non-navigation text alongside the CTA links.
  • Both the <nav> and the microcopy are wrapped in a new .navigation__primary container. The wrapper takes the grid-column: 1 / -2 placement and on (min-width: 800px) becomes flex-direction: column, so the microcopy stacks below the CTAs visually as intended.

Address Copilot review feedback on PR 1028: the microcopy paragraph was
rendered inside the <nav aria-label="Hero navigation"> landmark, so screen
readers navigating by landmark surfaced non-navigation text alongside the
CTA links. With (min-width: 800px) the nav was also a flex row, so the
paragraph sat beside the link list instead of beneath it.

Introduce a .navigation__primary wrapper around the <nav> and the
microcopy <p>. The wrapper now takes the grid-column placement and the
flex-column layout on desktop, so the microcopy stacks below the CTA
list visually, while the <nav> landmark only wraps the link list.
@AvdLee AvdLee merged commit 6a9d853 into master May 27, 2026
1 check passed
@AvdLee AvdLee deleted the docs/homepage-cro-quick-wins branch May 27, 2026 11:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants