Neon: Console Navigation

Rebuilding developer trust through intuitive, contextual navigation

Overview

I led a redesign of Neon’s Console navigation to reduce developer friction, increase product clarity, and lay the foundation for scalable growth. By setting a long-term vision and executing iterative improvements, we improved orientation, raised feature adoption, and reduced support volume—strengthening Neon’s position as a modern, developer-first Postgres platform.

My Role

Head of Design @ Neon

Led the strategy, vision-setting, and execution of a multi-phase navigation redesign. Focused on reducing friction, increasing clarity, and enabling product scalability.

Key Responsibilities:

Set long-term navigation vision
Synthesized feedback into action plans
Built alignment across PM, Eng, and leadership
Delivered phased rollout to ship value quickly
Owned prototyping, QA, and design quality

The Challenge

Clear, intuitive navigation is foundational to Neon’s mission of becoming the go-to platform for modern, serverless Postgres. Without it, developers struggle to adopt key features—slowing activation, undermining confidence, and limiting growth.

0.1 - Original Screen -- Project Dashboard

Neon’s flat navigation structure exposed internal product structure rather than aligning with developer mental models.

“I just wanted to connect data and get started — this slowed me down.” — Neon user

Problems Identified: (Based on 60k sign-ups per week)

15%

Drop-off right after sign up

30%

Users engaged with key features (Auth, Monitoring, etc)

40%

Of tickets were nav-related

Why the IA wasn’t working

All features shown with equal weight — no hierarchy
Branches inconsistently surfaced or buried
Navigation exposed backend structure, not workflows

Result:

Users felt lost
Confusion around environments
Increased reliance on documentation

What customers saw

Organization / Personal Account
1. Project
  1. Dashboard
  2. Branch
  3. SQL Editor
    1. Default branch set
  4. Restore
  5. Integrations
  6. Monitoring
    1. Default branch set
  7. Authorize
  8. Identity
  9. Project Settings
  10. Quickstart
  11. Branch
    1. Overview
    2. Table editor
      1. default branch set
2. Org Billing
3. Org People management
4. Org settings

What the IA Should Have Been

To reduce friction and align with how developers think, we needed to:

✅ Separate global from contextual actions
✅ Structure navigation around Projects and Branches
✅ Surface environments (branches) consistently

Proposed Structure:

Org Level: Billing, People, Settings
Project Level: Overview, Branches, Roles
Branch Level: SQL, Tables, Logs, Restore

This ideal structure became the foundation for both Milestone 1 and the long-term vision.

What users need

Organization / Personal Account
1. Project
  1. Project Overview
  2. Branch
    1. All Branches
    2. Specific Branch
      1. Overview
      2. Table editor
      3. SQL editor
      4. Monitoring
    3. Integrations
    4. Neon Auth
      1. RLS
      2. Identity
    5. Restore
    6. Project Settings
2. Org Billing
3. Org People management
4. Org settings

What We Heard

Qualitative (from user feedback & HubSpot transcripts):

🗣 “Felt like a step backward in usability.”
🗣 “Why was a branch created with my name on it?”
🗣 “I had no idea where to go next.”

Themes:

Orientation breakdowns
Low branch adoption
High early churn

Goals & Alignment

User Goals

Know exactly where I am and what I can do, instantly.
Connect my data and start building without reading the docs.
Move between projects, branches, and tools without losing context.

Business Goals

Increase user activation by streamlining the path to value.
Reduce early abandonment by simplifying the console experience.
Raise the bar for developer UX and position Neon as a category leader.

Setting the Vision (Milestone 2)

Global Navigation System for Scalability

To future-proof the Console, I designed a scalable global navigation system that clearly distinguishes between organizational and contextual actions. This vision:

Introduces a top-level nav for org-wide tools and project switching
Pushes deep workflows (like SQL editing or restore) into contextual side panels
Maintains orientation and reduces decision fatigue

This long-term design sets the foundation for a more intuitive, extensible, and developer-first Console experience.

Execution: Milestone 1 – Contextual Branch Navigation

What We Shipped First

Persistent branch context in side panel
Clear entry points for branch switching/creation
Simplified project structure

How:

Validated side panel over breadcrumbs
Partnered with PM/Eng to scope and ship
Delivered in one quarter

This was the first phase of our long-term vision. By starting with the most friction-heavy workflows—branching—we were able to validate the new structure and gain momentum for future improvements.

Early Outcomes from Milestone 1

Milestone 1 released early May 2025, with early signals:

✅ +12% increase in branch switching
✅ –9% support tickets related to environment confusion

“It’s finally clear which branch I’m in and how to switch. Game changer.”
— User

This success created momentum and internal buy-in for the broader nav redesign.

Partnering for Success

Cross-Functional Alignment:

Collaborated with 4 PMs across Console pillars
Scoped roadmap with leadership
Built confidence with early wins

Design Leadership:

Defined success metrics and rollout plan
Maintained quality across milestones
Framed navigation as strategic UX foundation

Summary & Takeaways

This case study shows how I:

Set a vision rooted in user needs and business outcomes
Delivered impactful work in phases
Unified teams across orgs
Designed scalable, dev-first UX systems

Great design isn’t just UI—it’s aligning teams to shape a better product experience.