Navigation: Hierarchy, Product Visibility, and Use Cases
Evolved the nav from a flat list of 7 links to a focused hierarchy with a Product dropdown, a Use Cases dropdown, a live Status indicator, and a cleaner primary rail.
The existing nav has all the right links. The opportunity was in how they're organised. With everything at the same visual weight, there's no signal about what a first-time visitor should do first — and no way to answer the two questions a visitor actually has.
- -No hierarchy: Pricing and Docs sit at the same level as About, Blog, and Changelog. All useful links, but not all equally urgent. A little grouping goes a long way.
- -Product features are invisible: A visitor landing for the first time has no quick way to know what Unkey actually offers without scrolling. The nav could do that job before they even reach the hero. Most modern dev platforms — Vercel, Supabase, Clerk, Stripe — surface their features in a Product dropdown for exactly this reason.
- -Use cases are never surfaced: The nav answers 'what does Unkey do' if you know to look. It doesn't answer 'is Unkey for my specific problem'. A developer building an AI app with per-user credit budgets, or a SaaS team managing multi-tenant rate limits, has no way to recognise Unkey as the right tool from the nav alone.
- -No trust signal: A live status indicator is a small thing that communicates a lot. It tells a visitor this is monitored, production-grade infrastructure. There was room to add that without cluttering anything.
Navigation
Keeping all 7 links visible
With everything at the same weight, nothing stands out. The nav reads as a list rather than a guide, and primary destinations like Pricing get lost next to secondary ones like Changelog.
Flat list with visual weight differences
Making some links bolder or larger helped but didn't solve the underlying issue. Product features were still invisible, use cases were still absent, and there was no obvious grouping logic a visitor could follow.
Merging use cases into the Product dropdown
Product and Use Cases answer different questions. Product answers 'what does it do'. Use Cases answers 'is this for me'. Mixing them in one dropdown muddies both answers.
A Product dropdown surfacing all 5 features, a Use Cases dropdown for problem-first discovery, a Resources dropdown grouping secondary links, a live Status indicator, and a tighter primary rail of Pricing and Docs.
The nav now answers both questions a first-time visitor has. The Product dropdown lists API Keys, Rate Limiting, Analytics, Audit Logs, and Permissions with one-line descriptions — the feature story. The Use Cases dropdown lists AI Apps, SaaS APIs, Internal Tools, and Developer Platforms — the problem story. A developer who knows their problem but hasn't found the solution can self-qualify from the nav before reading a single line of the page. The pulsing green Status indicator signals production maturity. Templates moved to Resources since it's a learning resource, not a primary product surface.