TL;DR
Quick overview of the project impact and approach
Challenge
Major discoverability and workflow challenges in Yellow.ai's B2B SaaS platform navigation
Approach
Combined analytics, customer interviews, competitor analysis, and iterative testing
Solution
Introduced collapsible left-hand navigation with phased rollout approach
Impact
50% reduction in navigation time and gained founder-level leadership buy-in
Context & Problem
Yellow.ai is a B2B SaaS platform with multiple modules: Studio, Inbox, Engage, Insights, Channels & Integrations. Each module served a unique purpose but was often interdependent with others.
Unless users clicked on it they have no idea of what the platform provides
Once you click on any of these modules, each had its own internal structure
The Switcher (Primary Navigation- Before revamp)
Constraints
Why wasn't this simple?
Research & Validation
Analytics (Hotjar & Mixpanel)
I approached the problem with a data-driven lens to build credibility and gain buy-in.
Hotjar recordings & heatmaps
Heatmaps indicated that users often clicked on the switcher repeatedly in their day-to-day workflow.
Mixpanel funnels & journey tracking
Showed consistent drop-offs when navigation required multiple redundant steps.
Cross-module usage analysis
Highlighted that modules weren't being used in isolation. Users almost always jumped between them.
Customers & Stakeholders interviews
I interviewed customers directly to understand their painpoints. I also spoke to internal stakeholders: Designers, PMs and CSMs to get more insights.
5+ Customers:
Described the navigation as something they can't get used to without handholding.
6 PMs
4 CSMs
Highlighted that they always had to provide additional support via documentations or walkthroughs.
5 Designers
Agreed that they found the Information Architecture of their respective owned module confusing.
Exploring solutions
Analyzing Competitors
Studying how successful products structure navigation across complex workflows
Learned how collapsible states helped save workspace.
Observed how primary, secondary, and tertiary hierarchies were represented in successful products.
This gave me inspiration for scalable IA patterns we could adapt.
Structure Explorations
Navigation patterns and hierarchy
Main Goal
The current switcher pattern hid content hierarchy. Users needed to see primary, secondary, and tertiary navigation levels simultaneously to understand the full feature landscape without cognitive overhead.
1. Primary + Secondary on top, Tertiary on left
Cluttered, difficult to scale
Actions felt disconnected
2. Primary + Secondary on left, Tertiary on top
Elements too compressed → frequent misclicks
Reduced accessibility
3. Primary on left, Secondary wider on left, Tertiary on top
Clearer organization and scanability
Sections easier to read and distinguish
Took too much screen space
Final Solution: Hybrid Approach
I took the collapsible navigation feature from my competitor analysis and combined it with the best aspects of Option 3 to arrive at the final solution.
Color & Visual System Explorations
Creating clear visual hirerachy and module differentiation
Main Goal
Users needed immediate visual cues to distinguish between modules and their current location. Color coding had to be subtle enough to not overwhelm but distinct enough to aid quick recognition.
High Contrast: Bold dark side bar with strong contrast
Provided clear module separation
Felt too heavy and was grabing too much attention during the key workflows
Minimal Monochrome: Light neutral colors
Clear neutral approach
Elegant but lacked sufficient way-finding visual cues for highlighted modules
Light sidebar with subtle accent colors
Provided clear module separation
Perfect balance of clarity and visual hierarchy
Final Direction
Implemented a subtle accent system where each module has a gentle color hint on active states and icons, while maintaining a clean neutral base. This provided way-finding without visual noise.
Interaction Patterns Explorations
Defining how users navigate and discover content
Main Goal
The interaction model needed to support both focused work (collapsed sidebar for more workspace) and exploratory behavior (expanded view for feature discovery). Users should control their experience.
Auto-collapse on Action
Sidebar auto-hides when user selects feature - maximizes workspace
Progressive Disclosure
Click to expand sections, hover for quick previews
Final Direction: Persistent state memory
System remembers user's preferred expanded/collapsed sections. The navigation adapts to user behavior patterns rather than forcing a single interaction model.
Collaboration
Getting to the solution wasn't just about design decisions — it was about alignment
4
Designers | Engineers | PMs | Leadership
15+
Critques | Reviews | Presentations
Design Critiques
Ensured feature placement alignment with module teams
Fine tuned interaction timing and caught UX issues early
PM Alignment
Used data + research to shift from opinions to evidence
Driving Alignment
Storytelling with Data
Used insights from Mixpanel, Hotjar, and interviews to influence decisions and get engineers, PMs, and leadership on board.
Securing Buy-in
Earned founder-level support, elevating the project from a “nice-to-have” idea to a company-wide priority.
