Challenge

The legacy navigation system had become cluttered and inconsistent as new features were added over time. Traditional layouts – vertical sidebars or horizontal top menus – both consumed valuable space and limited scalability.

The challenge I set out to solve was: How can we design a navigation system that feels modern, scalable, and space-efficient, while still helping users stay oriented in complex workflows?

Approach: Navigation Through Breadcrumbs

Instead of relying solely on vertical or horizontal navigation patterns, I experimented with combining primary navigation and breadcrumbs into a single system.
This approach created a hybrid model where the breadcrumb trail not only indicated the user’s location but also served as the main navigation path.

Key advantages of this approach:

• Space efficiency: Eliminating bulky sidebars or top menus freed up significant screen real estate for core workflows.
• Clarity & context: Users always saw where they were in the hierarchy and could easily move between sections.
• Scalability: The structure naturally adapted to deeper levels of the product without overwhelming the interface.
• Simplicity: A cleaner, more lightweight system that reduced cognitive load for both new and advanced users.

By merging navigation with orientation, I was able to create a system that felt both modern and intuitive — aligning well with SaaS usability standards.

Process

1. Research & Analysis

• Benchmarked navigation patterns from SaaS leaders like Notion, Figma, and Salesforce.
• Conducted a heuristic review of Interact’s existing platform.
• Synthesized insights from stakeholder listening sessions and prior beta testing.

Finding: Users needed quicker access to workflows, while the business needed a navigation model that could grow with the platform.

2. Ideation & Exploration

• Sketched multiple navigation patterns (sidebar, top bar, search-first).
• Explored hybrid systems combining breadcrumbs with navigation.
• Facilitated internal workshops to discuss trade-offs in discoverability, scalability, and space efficiency.

3. Concept Development

• Built high-fidelity prototypes of the breadcrumb-based navigation model.
• Designed adaptive interactions: clickable breadcrumb elements, hover previews, and shortcuts.
• Ensured consistency with the emerging design system.

4. Feedback & Iteration

• Shared prototypes with Product, Engineering, and Marketing stakeholders.
• Collected structured feedback and iterated on usability details (labels, spacing, hover states).
• Refined the breadcrumb navigation to handle deep hierarchies smoothly.

5. Alignment & Outcome

In the final decision-making process, the breadcrumb-based navigation was recognized as a scalable and space-saving approach. While the final platform design blended elements from all three concepts, my navigation model became a core foundation of the redesign direction.

Design System & Prototyping

Beyond navigation, I also ensured that the concept was fully prototyped and tokenized to demonstrate how it could scale consistently:

• Dark & Light Mode Support: The prototype works seamlessly in both modes, making the product more accessible and adaptable to user preferences.
• Design Tokens: Colors, typography, and spacing were tokenized, ensuring easy implementation and long-term maintainability.
• Interactive Prototype: Every interaction was built out, so stakeholders could experience the navigation and visual system in context.

You can explore the live prototype here:

Outcome

• Reduced interface clutter by eliminating bulky navigation panels.
• Improved orientation for users navigating complex workflows.
• Freed up screen space for the content that matters most.
• Set a scalable foundation for Interact’s evolving design system.
• Delivered a tokenized, mode-flexible prototype ready for implementation.

Reflection

This project taught me the value of challenging default patterns. Instead of choosing between vertical or horizontal navigation, I explored how navigation could work differently – by merging it with breadcrumbs. The result was a system that felt modern, intuitive, and efficient, and it directly influenced the final direction of the Interact SaaS redesign.