Sidebar Redesign
Redesign of a collapsible sidebar from a floating action bar — rethinking how navigation should coexist with content as a product scales.
The Challenge
The app's original navigation lived in a floating action bar fixed to the top of the screen. While it kept navigation accessible, it created persistent tension with the content below — overlapping key UI elements, interrupting scroll behavior, and making the layout feel cluttered as the product matured.
The floating pattern that once felt lightweight had become a liability. My goal was to rethink navigation from the ground up — moving away from the floating bar and toward a collapsible sidebar that integrates cleanly into the layout, scales with the product, and gives users control over how much space navigation takes up at any given moment.
The shift from a floating bar to a collapsible sidebar wasn't just a layout change — it was a fundamental rethink of how navigation should coexist with content.
Understanding the Problem
Discovery started by understanding why the floating action bar had stopped working. Through session recordings and user interviews, a clear pattern emerged — users were frequently scrolling past the bar, accidentally triggering it, or losing track of it entirely when deep in content-heavy views. It wasn't an obvious failure; it was a slow erosion of usability as the app grew around a navigation pattern that hadn't scaled with it.
We also conducted a competitive analysis across tools like Notion, Linear, and Figma to understand how leading products handle persistent navigation — what patterns users have come to expect, how sidebar collapse is communicated, and how navigation state is preserved across sessions.
Existing UI — floating action bar overlapping content, cluttered as the product scaled
Expanded sidebar
Collapsed sidebar — icon rail
The Solution
The redesign moved navigation off the floating layer and into a fixed sidebar anchored to the left of the screen. A persistent collapse toggle at the top gives users direct control over their layout — reducing the sidebar to an icon-only rail when space is needed, and expanding it fully when context matters. An edge handle in the collapsed state offers a low-friction re-entry point without requiring users to hunt for a button.
Collapse state is persisted per session — so the app remembers the layout each user prefers, eliminating the repetitive setup that plagued the floating bar experience.
Flyout menu on hover in collapsed state
Testing & Validation
A clickable prototype was built early to validate the collapse interaction before investing in high-fidelity design. The prototype focused specifically on the trigger mechanics — where users expected to click, how the transition felt, and whether the icon rail was sufficient for navigation in the collapsed state.
Stakeholder walkthroughs with PMs and engineering surfaced early feasibility questions around animation performance and state management. These conversations shaped the handoff spec and helped us align on interaction behavior before a single line of production code was written.
Anatomy and documentation of the sidebar
Iteration & Polish
Testing surfaced a few friction points worth addressing. Some users missed the collapse toggle on first scan — leading us to increase its visual weight and add a subtle tooltip on hover. Others found the transition jarring at the default duration, which we smoothed out through easing adjustments validated in a follow-up round.
We also iterated on the collapsed icon rail itself — early versions relied on icons alone, which caused confusion for less-familiar users. Adding tooltips on hover resolved this without breaking the minimal aesthetic of the collapsed state.
The Outcome
Moving from a floating action bar to a collapsible sidebar resolved the core tension users had been experiencing — navigation no longer competed with content for space. The collapse feature saw strong adoption post-launch, and users consistently noted feeling more in control of their workspace layout.
The icon rail approach proved especially effective in the collapsed state, preserving navigational awareness without the visual noise of the original floating bar. The design also leaned heavily on the existing design system — reusing tokens, motion values, and component patterns — keeping the build lightweight and the experience consistent with the broader product.