[ScopeStack.ai] —
Nav Redesign Proposals

Two structural options for the top navigation. Desktop + mobile treatment shown for each. CEO selects one before engineering implements.

Ticket: SCO-162 Author: Design Director Date: 2026-04-28 Status: Awaiting CEO Pick

Current State — Reference

Current Nav — What We Have

Four items anchoring to homepage sections only. No links to standalone pages (/gems, /pricing, /agents). A first-time visitor can't see the full site from the nav alone.

⚠ No link to /gems index ⚠ No link to /agents page ⚠ "Features" is vague — doesn't signal 24 AI tools ⚠ Doesn't surface standalone pages ⚠ Blog is the only external page exposed

Two Structural Proposals

Option A — Full Flat

All key destinations surfaced directly, no dropdowns

Option A

Desktop Preview

Mobile — Closed

Mobile — Drawer Open

Features Gems How It Works Pricing Blog Get Started →

Why this works

+Zero interaction cost — full site map visible at a glance, no hover required
+Gems becomes a first-class destination — links directly to /gems index, surfacing the 24 AI tools as a standalone page
+Brutalist aesthetic fits — wide flat nav strips are on-brand for ScopeStack's grid-forward style
+Best for mobile: all 5 items collapse cleanly into a drawer without hierarchy confusion
+Simplest engineering lift — no JS needed for desktop, same pattern as current nav
–5 items + CTA can feel crowded on mid-range laptops; may need smaller type or tighter padding
–No way to surface subcategories or sub-pages (individual gem pages, agents) without another nav level

Nav items: Features · Gems · How It Works · Pricing · Blog · [Get Started →]

Gems → links to /gems (full toolkit index)

Pricing → links to #pricing anchor (or /pricing)

Desktop width: ~760px minimum before wrapping

Option B — Grouped Flyout

Key items grouped under product + resources dropdowns

Option B

Desktop Preview — hover "Product" or "Resources" to expand

Mobile — Closed

Mobile — Drawer (expanded)

Product Features How It Works Agents Pricing Resources Blog Gems Index Get Started →

Why this works

+Surfaces all 6 gem categories directly inside the nav — the strongest product signal we can give first-time visitors
+Scales gracefully — as new pages/features ship, add them inside existing dropdowns without rebuilding the nav
+Industry-standard B2B SaaS pattern (Linear, Notion, Loom) — feels immediately navigable to an agency buyer
+Desktop stays clean — only 4 visible items; depth is opt-in via hover
–Requires JS for accessible keyboard + mobile drawer expand/collapse behaviour
–Content behind a hover is invisible on first glance — some visitors won't discover dropdown items
–Mobile hierarchy (grouped sections) adds reading complexity vs. flat drawer

Nav items: Product ▾ · Pricing · Resources ▾ · [Get Started →]

Product dropdown: Features / How It Works / Agents / [Gem Categories ×6]

Resources dropdown: Blog / Gems Index

Desktop width: ~460px minimum before wrapping

Information Architecture — Current Site

Option A — What's Exposed

[ ScopeStack.ai ] — nav items
Features → #features
Gems → /gems NEW
How It Works → #hiw
Pricing → #pricing
Blog → /blog

Not in nav (still discoverable)
/agents
/gems/[category] (6 pages)
/blog/[articles]

Option B — What's Exposed

[ ScopeStack.ai ] — nav items
Product ▾
→ Features (#features)
→ How It Works (#hiw)
→ Agents (/agents) NEW
→ Gem Categories ×6 NEW
Pricing → #pricing
Resources ▾
→ Blog (/blog)
→ Gems Index (/gems) NEW

Decision Guide — Pick One

Criterion Option A — Full Flat Option B — Grouped Flyout
Visitor scannability Everything visible without hovering. Max first-impression clarity. Pricing always visible; depth behind one hover for product details.
Product breadth signal Adds Gems as a top item — good. Gem categories still require /gems click. Shows all 6 gem categories inside dropdown — strongest "24 tools" signal at nav level.
Mobile experience Flat drawer, 5 taps, no nesting. Simplest. Grouped drawer — readable but more scroll. 2-level structure.
Engineering effort Minimal. CSS-only, same pattern as current nav. Moderate. Needs JS for a11y, keyboard nav, and mobile toggle.
Future scalability 6 items is likely the limit before it breaks visually. Dropdowns absorb new pages cleanly without touching visible nav structure.
Brand fit Very on-brand — raw, wide, exposed grid. True to the brutalist system. Clean and professional; feels more conventional SaaS than brutalist.
Recommendation Pick if: you want maximum speed-to-ship and the site structure stays roughly as-is. Pick if: you want to telegraph the full product depth (24 gems, categories) and plan more pages ahead.

Engineering Notes — Both Options