Nav Wayfinder case study thumbnail

Nav Wayfinder

2024

Project Overview

As a staff product designer, I led an end-to-end redesign of the Nav with a design system, called Wayfinder. My role spanned , stakeholder management, writing code, and AI knowledge.

Context & Challenge

Nav’s fragmented UI—across web, iOS, Android and marketing—was slowing us down. Inconsistent layouts, ad-hoc colors and components forced designers into firefighting mode and engineers into endless bug fixes. We needed a design system that helped us move fast, not take six-month rebuild.

Problem Solved

  • Inconsistency & Technical Debt: Multiple ad-hoc implementations of the same UI patterns.
  • Slow Iterations: Every feature ship required manual QA of buttons, forms, modals.
  • Poor quality: No matter how many rounds of QA the designers did, it felt impossible to ship high-quality products we were proud of.
  • Stakeholder Friction: PMs, execs and engineers spent more time debating styles than building value.
Wayfinder design system documentation and UI patterns

Strategy & Execution

  1. RadixUI Foundations: Rebuilt core primitives; buttons, inputs, layout grids, etc, with RadixUI. Prioritized accessibility (WCAG AA) by baking it into the color system and working through best practices at the atomic level.

  2. Guidelines Over Components: Went beyond “click-and-drag” libraries. Documented usage patterns (“When to swap primary vs. secondary buttons”), tone & copy guidelines, and a clear maintenance process (bi-weekly backlog grooming for new tokens/components).

  3. Stakeholder Alignment:

    • Designers: Showed how constraints free mental bandwidth for bigger problems.
    • Engineers: Provided a lean, typed component library—cutting 50% of UI-related bugs.
    • PMs & Execs: Shared a demo calendar illustrating 40% faster feature delivery and a 30% lift in team satisfaction scores.

Impact Delivered

  • Single Source of Truth: Designers and developers now converge on Wayfinder for every prototype and sprint—no question.
  • Faster Iterations: Feature lead time dropped from 10 to 6 days.
  • Quality & Accessibility: Automated contrast tooling caught 100% of palette violations pre-merge; mobile usability complaints dropped to zero.
  • Culture Shift: Mentoring design-system literacy became a recruiting perk, not a drag.

What Could’ve Been Better / Learnings

  • Earlier Engineering Partnership: We underestimated the onboarding curve; embedding a front-end engineer in week 1 would’ve slashed initial friction.
  • Token Naming Rigor: Some early token names felt arbitrary—investing more in semantic naming upfront pays dividends.
  • Feedback Loops: More structured, cross-functional “system health” sprints (quarterly) could prevent token sprawl.

Wayfinder became our compass that guided us toward faster, higher quality product development and setting the stage for Nav’s next act.