Navigation overhaul on my AI search visibility tool — what I learned redesigning with an enterprise SEO

GEOlikeaPro shows brands how they appear across ChatGPT, Claude, Gemini, and Perplexity. Spent the last couple of weeks rebuilding the navigation surface side-by-side with a daily user — enterprise SEO, four years in.

Six things shipped:

1. Home = cockpit, not a welcome card.** KPI strip (latest audit SOV %, models cited, avg rank, GVI) plus a Next-Best-Action card driven by vital triage. If Authority is critical, the card says "Authority is critical (32) → Open Recommendations". If everything's stable, "re-run periodically".

2. 17 sidebar items → 14.** SOV / Models / Recommendations / Vitals were sibling tabs but they're really four cuts of one audit. Folded into a single "Audit" entry with an inner sub-nav strip — one workflow, not four destinations that happen to share data.

3. Cmd+K command palette.** Desktop only. Type "rec" + Enter to land in Recommendations. ~200 lines of vanilla JS, no library.

4. Mobile native share sheet. Two Export pill buttons collapse into one "↗ Share" on mobile. Tap → bottom sheet → CSV routes through navigator.share({files}) → Mail / WhatsApp / Drive / Save to Files in one OS sheet. PDF goes through the system print pipeline (which on iOS+Android already includes Save-as-PDF, AirPrint, share targets).

5. Sticky header + line-clamped descriptions on mobile.** Hamburger always reachable; long intro paragraphs truncate to 2 lines with an inline "more ▾" link. Cut roughly three phone viewports of chrome before users saw any actual data.

6. Visual idiom. Mono // audit comment-style section labels, unified geometric glyphs, accent-tint active states. Distinct from the ~500 other GEO/AI-search tools — no borrowed Linear/Notion grammar.

Live: https://geolikeapro.com/tool

Three things I'd repeat on any next surface:

- Watch a real user navigate before you touch anything. The global "Query Configuration" bar pinned above every tab was obviously wrong once I saw it on his daily workflow.

- Backticks inside HTML comments inside JS template literals are evil. Caught two production breakages this way before I got smarter about CI.

- Mobile-first isn't a slogan — design at 360px first, desktop falls into place after.

Happy to dig into any of it.