
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.
Strategy & Execution
-
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.
-
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).
-
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.