Redesigned SaaS portal to reduce navigation friction, leading to 88% faster task flows and improved user satisfaction.
The Challenge
Our Customer Portal serves as the operational backbone for both internal teams and external stakeholders. However, recurring support tickets and qualitative feedback revealed significant friction in the user experience.
The Executive goal
Transform the portal from a functional tool into a high-efficiency engine by removing navigation hurdles and streamlining core workflows.
The Pain Points
Navigation is 3–4 levels deep and Hierarichal Dropdown
Users rely on memory instead of discoverability
Users take 7–10 minutes to complete frequent tasks
Role, Duration & Platform
Role
Lead UX Designer
Duration
6 Weeks
Platform
Web (SaaS Portal)
Findings in Usability Test
We have conducted Unmoderated remote test for few tasks with 5 existing users. Below are the average results based on test results.
Task
Discoverability
Time on Task
Total Clicks
Open Product Master Data
Easy
0m 20s
3
Open Planogram UPC Report
Difficult
4m 30s
11
Edit Scene Type Configuration Scene ID:4523455
Fail
10m
20+
Create Program Item
Difficult
5m 40s
10
Create a List Type Question from Question Library
Difficult
7m
10
With all new users the discoverability is mostly failed.
User Interviews
To know more about how users move across the portal in their daily day to day activity.
Some of the quotes from users.
The users are mostly power users and need an efficient way to switching the modules. Some wants a multi tab opening functionality which is available in old portal. Following is the screenshot how the users are currently using the portal for navigation.
Information Architecture
The existing information architecture is clearly distributed. The navigation used is Hierarchical Drill-Down. Originally this navigation is created for learning users and slow users. Once the workload and modules have increased it created too much of friction. So, I have collected all the modules and sub modules to redefine information architecture.
After thorough review of Roles & users using the portal we have reiterated the completed information architecture. We have used reversed card sorting to organize the whole architecure into 3 levels. There are certain user groups who will have access to different modules based on the permissions.
We have a collaborative excel sheet, where stakeholders can actually provide their input to make amendements.
After doing the research we have concluded with a Persistent Navigation with Accordions. With the IA that we have finalized, we have created basic wireframes to test with users.
Wireframes
When testing with users, it is understood that users are still facing difficulty in discovering their required module. So we have introduced search module functionality.
While search offers a faster alternative to manual navigation and improves overall efficiency, it still takes users over 10 seconds to discover the desired module. User behavior analysis revealed that most users enter a single character and scroll through the search results to locate the required module. This approach remains time-consuming, primarily because many modules share similar naming conventions, reducing the effectiveness of search.
Open Product Master Data
Discoverability
Easy
Finding from Drill Down
0m 5s
Search
0m 5s
Open Planogram UPC Report
Discoverability
Difficult
Finding from Drill Down
0m 50s
Search
0m 15s(Improved)
Open Upload Images Manually
Discoverability
Difficult
Finding from Drill Down
1m 10s
Search
0m 13s(Improved)
Trade-offs & Decisions
Speed vs Learning
We faced tension between optimizing for speed vs. learning. Product wanted to hide the navigation tree and make search primary (fastest for existing users), but Ops leadership insisted new hires needed to understand the information architecture.
My recommendation: Dual-mode navigation with search requiring 3 characters minimum. This forced some engagement with the tree structure while still enabling power users to be efficient. We validated this would add ~2 seconds to power user workflows but reduce new hire onboarding by 40%.
Stakeholder buy-in: I created a prototype showing both approaches and facilitated a working session where we tested with both user types. The data made the decision clear.
Screen Real Estate vs. Persistent Visibility
Engineering and Product debated whether persistent navigation was worth the screen real estate cost. On a 1920px screen, a 280px sidebar means 15% less space for data tables—significant for users working with complex datasets.
The discussion: Engineering proposed a collapsible sidebar (default collapsed). I pushed back with data showing users were already struggling with 20+ clicks per task—adding 2 more clicks to expand/collapse 50 times/day would compound the problem.
The compromise: We designed a 'slim mode' (64px icon-only sidebar) that users could toggle, giving them control. Analytics showed 73% kept it expanded, validating the default choice.
Business case: I quantified that the productivity gain (88% time reduction) outweighed the 15% screen space cost by ~$500K annually.
Timeline vs. Scope
Leadership wanted this shipped before Q4 when we'd onboard 20 new ops team members. Engineering estimated 6 weeks for core navigation, but 12 weeks to include power user features like favorites, recents, and keyboard shortcuts.
The constraint: We couldn't delay—poor portal UX was already impacting new hire ramp time.
My approach: I advocated for shipping V1 with just the improved IA and search, but negotiated for a committed V2 roadmap 6 weeks post-launch. I created a phased rollout plan showing:
V1: Solve 80% of the pain (navigation friction)
V2: Add 20% of delight (power user features)
Result: V1 shipped on time. V2 scope was informed by actual usage data, and we discovered users didn't actually want favorites—they wanted 'recently used modules' instead.
Hifidelity Mockups
The redesigned navigation looks like below with 3 level deep Persistent navigation with a search module functionality. The search module will start working once the user starts typing minimum 3 letters so that user can see less results. Each result item will show the complete path how user can move to using navigation.
In addition to that we have also added an illustration in landing page with supporting text.
The text is please select a module instead of please search a module because the team want the user to also learn the navigation first as it is easier to have them mentioned in tickets if required.
Components
Considering the better flows from wireframes, I have started working components required to create new sidebar including Icons, Logo, Search states, Menu states.
Menu(All States)
Though the existing users will be taking time to adoption of search, the navigation still increases the overall discoverability and easy navigation to the users.
⚖️ Key Trade-off: Real-time Search vs. 3-Character Minimum
Engineering advocated for real-time search to feel "modern,"but testing showed 1-2 characters returned 47+ results,causing scanning overhead.
Decision: 3-character minimum with smart messaging
Result: Search time reduced from 15s → 6s
Usability Testing -IA
After increasing the number of minimum characters to search the module to 3 letters and testing the search functionality. It is observed improvement of discoverability.
Open Survey Review
Discoverability
Easy
Finding from Drill Down
0m 20s
Search With Min 3 Character
0m 6s
Open Planogram UPC Report
Discoverability
Easy
Finding from Drill Down
0m 24s
Search With Min 3 Character
0m 4s
Open IR Self Quality Check
Discoverability
Easy
Finding from Drill Down
18s
Search With Min 3 Character
0m 7s
With this it is clearly observed the discoverability has been improved very much for legacy users and users with module name known. But for new users to portal, the discoverability is slightly difficult.
Metric
Time on Task
(reduced by >88%)
Key Benefit
Improved Employee Productivity & Higher System Adoption
Business Impact
The navigation redesign unlocked nearly $553K in annual value through combined productivity gains and support cost reduction. More importantly, it transformed how our operations team works: eliminating the need for workarounds, reducing cognitive burden, and enabling us to scale our headcount without proportionally increasing training costs. This project demonstrated how strategic UX investments directly impact the bottom line.
Adoption & Impact
Within 30 days of launch:
85% of users adopted search as their primary navigation method
Navigation-related support tickets dropped 67%
Portal satisfaction scores increased from 4.2 to 7.8/10