Redesign Navigation
Spendflo's top navigation hit a ceiling as features multiplied within each module. Audited, tested, and validated a left-nav information architecture that cut rage clicks 45% and quick backs 86%.
- Role
- Product Designer
- Timeline
- 5 days
- Tools
Context
A navigation pattern that hit a ceiling.
Spendflo is an AI-native procurement and SaaS spend management platform designed to automate and optimize B2B software purchasing. It centralizes contracts, tracks renewals, and provides AI-driven negotiation and vendor management.
About Spendflo's navigation
The top navigation housed four core modules. It worked early on, but as features multiplied within each one, the pattern hit a ceiling. I took up the initiative to solve it.
Requests
Raise and track purchases
Vendors
Every supplier, one record
Contracts
Agreements and renewals
Insights
Spend analytics
Audit: The Problem
The top nav was cluttered, brittle, and out of room.
Cluttered“There's so much in the nav, I can never find what I need without hunting.”
Procurement managerNot responsive“On my tablet the navbar buttons slide off-screen, so I can't reach key actions.”
Finance approverDeep nesting“Settings are layers deep, and some pages hold just one setting.”
Workspace adminNo room to search“There's no global search, so I click through every module to find things.”
IT leadThe old top nav had no room left for global search.
Settings: a flat hub hiding deeper, single-setting subpages.
Research
Watching users hunt for features they should've found instantly.
Usability testing
I conducted task-based testing with users, covering tasks like accessing Requests and switching between modules. I tracked two things: time to locate features, and confusion or drop-off points.
trial and error,
no clear path
needed guiding
no global search,
flagged by users
on their own
Behavioral data
To cross-check what testing surfaced, I filtered for power users and sessions with high navigation changes, then reviewed recordings, click patterns, and heatmaps in Microsoft Clarity.
45% struggled
to find menu items,
paused, backtracked
rage clicks 20%,
quick backs 35%,
all around the nav
Information Architecture
Mapping the current IA before designing the next one.
I mapped the existing IA to get a clear picture of what was there: every feature, where it lived, and how it was grouped.
I explored multiple IA directions to check what fits best. One thing became clear early: left nav was the industry standard for a reason. It solved for scalability, hierarchy, and screen real estate in ways the top nav simply couldn't.
Visual Directions
Three directions, evaluated.
The first two weren't dead ends, they were learnings: each one ruled out a failure mode and narrowed what the real answer had to do. That's how I arrived at Direction 3.
03A nav that gets out of the wayShipped
Instead of collapsing to icons, remove the rail entirely on demand. Full focus, and the smaller-screen problem disappeared as a side effect.
Solution
Left nav, grouped by intent, one click into settings.
Direction 3 shipped: a left nav, grouped by intent, that can hide when you need to focus.
Why Direction 3 was the best fit
- Focus mode: hiding the nav gives the page back its screen space.
- Smaller screens, solved for free by that same hidden state.
- Room to grow: new modules slot in, where the top nav had run out.
What changed, and why
- 1Requests & Home Most-visited destinations, kept separate and accessible.
- 2Grouped by intent Related actions sit closer together.
- 3Accordions Focus on one section at a time.
- 4One-click settings Rare settings, consolidated and out of the way.
- 5Contextual top nav Only page-level actions remain, no structural nav.
Settings, consolidated into a single view
- 1One click back A single exit point back to the main product, not buried settings-within-settings.
- 2Every setting, one list No more dedicated pages for a single toggle, everything lives in one scrollable sidebar.
- 3Contextual help Ask Flo is available right where configuration gets confusing.
Global search, finally given room to exist
- 1Search trigger Lives in the header now, not squeezed into the old top nav.
- 2Scoped filters Narrow results by Requests, Vendors, Contracts, Settings, or Users.
- 3Recent searches Picks up where you left off, no retyping.
Notifications, opened from the header
- 1Notification bell One click from anywhere in the product.
- 2Filter by relevance All, mentioned, or assigned to you.
- 3Mentions & tasks Surfaces overdue work and direct mentions first.
Using AI tools to move faster
Claude
A design review agent weighed pros and cons on each iteration and built a prototype for PMs, cutting the back-and-forth.
GPT
A copy-review pass on the nav menu labels.
Result and Impact
Shipped, measured, and it worked.
I handed off the designs to developers and guided them with prototypes. The impact post-development was immediate.
- One extra click removed across all navigation layers.
- No more menu-item clutter: everything moved to the left nav, and it operated well on smaller screens.
- Easier to find menu items with grouping by intent.
- Scales well with new feature additions like global search and the Chat with Us experience.
After a week's observation, users backed out of screens far less often, the clearest signal the new IA matched how they actually looked for things.