Quick Summary (TL;DR)
➡️ Problem: PortX Cloud's growing product suite (Integration Manager, Payment Manager, Data Manager) lacked a unified navigation, causing inconsistency and user friction.
➡️ Problem: PortX Cloud's growing product suite (Integration Manager, Payment Manager, Data Manager) lacked a unified navigation, causing inconsistency and user friction.
➡️ Role: I led UX/UI design, creating a scalable framework and design system.
➡️ Solution: Developed a unified global navigation and consistent patterns across all products.
➡️ Impact: Reduced onboarding confusion, improved cross-product navigation, and established a scalable system for future growth.
This summary highlights the key outcomes. The sections below walk through the design process step by step.
Intro/Background
PortX is building a digital banking platform called PortX Cloud, home to three flagship products: Integration Manager, Payment Manager, and Data Manager. Each product has its own layers — for example, Payment Manager supports Wires, ACH, and FedNow, while Integration Manager includes Design, Development, and Deployment tools.
The challenge? These products were growing quickly, but navigation between them wasn’t keeping pace.
This UX case study focuses on unifying navigation across PortX Cloud’s product suite: How can one consistent framework make switching between tools seamless, reduce friction, and improve overall productivity?
The Problem
PortX lacked a unified way for users to move between its core products. Instead, each product team implemented — or planned to implement — its own local navigation system. This created a fragmented, inconsistent experience across the suite.
PortX lacked a unified way for users to move between its core products. Instead, each product team implemented — or planned to implement — its own local navigation system. This created a fragmented, inconsistent experience across the suite.
Early attempts at a fix included placing all products inside a top-left dropdown, tree view, or accordion menu. But usability testing revealed a problem. These menus felt hidden and inconvenient, especially when the cursor wasn’t already in that corner of the screen.
From a business standpoint, the CEO worried that the product suite wasn’t visible enough — particularly during sales demos and stakeholder presentations. Hiding key apps behind a 9-dot or hamburger menu reduced both discoverability and perceived value. Here is what we were facing:
❌ Inconsistent navigation: Different products followed different patterns
❌ Low discoverability: Menus were hidden, requiring extra clicks
❌ Poor visibility in demos: The suite’s breadth wasn’t immediately obvious
The goal was clear. That was to create a single, scalable navigation system that worked across all products, balanced business needs with usability, and could grow with the platform.
Research Goals + Methodologies
Although this wasn’t a heavy research project, I still needed to understand user behaviors and pain points across products. I focused on quick, targeted methods:
Although this wasn’t a heavy research project, I still needed to understand user behaviors and pain points across products. I focused on quick, targeted methods:
➡ Identify navigation inconsistencies across the suite
➡ Understand how users move between products during real workflows
➡ Validate potential solutions through rapid A/B testing and short user surveys
➡ Understand how users move between products during real workflows
➡ Validate potential solutions through rapid A/B testing and short user surveys
My Role
➡ Sole UX/UI designer
➡ Conduct internal interviews and gather input from product, engineering, and C-level leaders
➡ Map the current navigation inconsistencies across product teams
➡ Design a scalable navigation system for cross-product switching and future growth
➡ Create Figma prototypes and presented proposals for feedback and iteration
➡ Lead A/B and usability testing, along with user surveys, to guide and refine the final navigation approach
➡ Tools used: Figma, Miro, Jira, PowerPoint, Zoom
➡ Sole UX/UI designer
➡ Conduct internal interviews and gather input from product, engineering, and C-level leaders
➡ Map the current navigation inconsistencies across product teams
➡ Design a scalable navigation system for cross-product switching and future growth
➡ Create Figma prototypes and presented proposals for feedback and iteration
➡ Lead A/B and usability testing, along with user surveys, to guide and refine the final navigation approach
➡ Tools used: Figma, Miro, Jira, PowerPoint, Zoom
Challenges + Learnings
Supporting all three flagship product teams as the only designer meant balancing multiple sprint schedules, design reviews, and implementation cycles. Without a dedicated design system for navigation, consistency relied on constant coordination.
The solution required thinking modularly by creating patterns that could flex for new features and sub-products without requiring a redesign. This reinforced one of my strengths: Keeping the big picture in view while solving for immediate needs.
Grounding the design in usability heuristics was critical:
➡ The 3-column layout improved recognition over recall by showing all product tiers at a glance.
➡ A consistent structure supported predictability, especially for enterprise users navigating multiple tools.
➡ Icon/text combinations and interaction patterns were tested and refined to speed up navigation without adding visual noise.
Of course, pragmatism played a role. My ideal hover-triggered, dynamic sliding menu was cut due to engineering constraints and timelines. This was a reminder that great UX often means balancing ambition with feasibility — pushing where it matters most, but adapting when needed.
Impact/Results
✅ Improved discoverability across the suite with a unified navigation system
✅ Improved discoverability across the suite with a unified navigation system
✅ Created a shared model adopted by all product teams for future releases
✅ Reduced navigation time for switching between products
✅ Strong internal adoption — dev teams made my system the default for all new products!
