Proposed Navigation Structure
This document proposes an improved navigation structure for the SCORM API website, addressing issues identified in the navigation analysis.
Design Principles
- Explicit Categorization: Group features by function (Content, Analytics, Integrations, Account)
- Progressive Disclosure: Show primary features, hide secondary in sub-menus
- Visual Hierarchy: Distinguish primary vs. secondary actions
- Context Awareness: Clear indicators of current context
- Consistency: Uniform patterns across all contexts
Proposed Public Navigation
Desktop Navigation
Top-Level Links:
- Features →
/features - Pricing →
/pricing - Docs →
/docs(direct link, not dropdown) - API Reference →
/api/docs(direct link)
Right Side:
- Sign In →
/sign-in?redirect_url=/dashboard - Get Started →
/sign-up?redirect_url=/onboarding/checkout
Changes from Current
- Docs as Direct Link: Move Documentation to top-level (not in dropdown)
- API Reference as Direct Link: Important for developers, should be prominent
- Simplified Structure: Fewer items, clearer hierarchy
Proposed Customer Navigation
Option A: Mega Menu (Recommended)
Structure: Top-level categories with mega menu dropdowns
Top-Level Categories:
- Dashboard →
/dashboard(direct link, not dropdown) - Content → Mega menu
- Analytics → Mega menu
- Integrations → Mega menu
- Account → Mega menu
- Docs →
/docs(direct link)
Mega Menu: Content
┌─────────────────────────────────────┐
│ Content │
├─────────────────────────────────────┤
│ 📦 Packages │
│ Manage SCORM packages │
│ → /dashboard/packages │
│ │
│ 🚀 Dispatch │
│ Create dispatch packages │
│ → /dashboard/dispatch │
│ │
│ 📚 My Learning │
│ View enrolled packages │
│ → /learner/dashboard │
└─────────────────────────────────────┘
Mega Menu: Analytics
┌─────────────────────────────────────┐
│ Analytics │
├─────────────────────────────────────┤
│ 📊 Reports │
│ Learner progress & analytics │
│ → /dashboard/reports │
│ │
│ 📈 Usage │
│ Quota metrics & API usage │
│ → /dashboard/usage │
│ │
│ 📝 xAPI Statements │
│ View xAPI learning records │
│ → /dashboard/xapi │
└─────────────────────────────────────┘
Mega Menu: Integrations
┌─────────────────────────────────────┐
│ Integrations │
├─────────────────────────────────────┤
│ 🔑 API Keys │
│ Manage API keys │
│ → /dashboard/api-keys │
│ │
│ 🔔 Webhooks │
│ Configure webhook notifications │
│ → /dashboard/webhooks │
│ │
│ 🔐 Credentials │
│ Unified credentials management │
│ → /dashboard/credentials │
└─────────────────────────────────────┘
Mega Menu: Account
┌─────────────────────────────────────┐
│ Account │
├─────────────────────────────────────┤
│ 💳 Billing │
│ Plans, invoices, payment │
│ → /dashboard/billing │
│ │
│ 📊 Usage Quotas │
│ View usage against limits │
│ → /dashboard/usage │
│ │
│ ⚙️ Settings │
│ Account settings & preferences │
│ → /dashboard/settings │
└─────────────────────────────────────┘
Option B: Sidebar Navigation (Alternative)
Structure: Persistent sidebar with collapsible sections
Sidebar Layout:
┌─────────────────────┐
│ 🏠 Dashboard │
│ │
│ 📦 CONTENT │
│ Packages │
│ Dispatch │
│ My Learning │
│ │
│ 📊 ANALYTICS │
│ Reports │
│ Usage │
│ xAPI │
│ │
│ 🔌 INTEGRATIONS │
│ API Keys │
│ Webhooks │
│ Credentials │
│ │
│ 👤 ACCOUNT │
│ Billing │
│ Settings │
└─────────────────────┘
Pros:
- Always visible
- Clear hierarchy
- Easy to scan
Cons:
- Takes horizontal space
- May not work well on mobile
Recommended: Option A (Mega Menu)
Rationale:
- Maintains top navigation (familiar pattern)
- Provides grouping without taking space
- Works well on desktop and mobile
- Allows for descriptions and icons
Proposed Admin Navigation
Structure: Simplified with Grouping
Top-Level:
- Admin Dashboard →
/admin(direct link) - Data → Mega menu
- Analytics → Mega menu
- System → Mega menu
- Docs →
/docs(direct link)
Mega Menu: Data
┌─────────────────────────────────────┐
│ Data Management │
├─────────────────────────────────────┤
│ 📦 Packages │
│ All tenant packages │
│ → /admin/packages │
│ │
│ 👥 Tenants │
│ Tenant management │
│ → /admin/tenants │
│ │
│ 🔑 API Keys │
│ All tenant API keys │
│ → /admin/api-keys │
│ │
│ 🔔 Webhooks │
│ All tenant webhooks │
│ → /admin/webhooks │
└─────────────────────────────────────┘
Mega Menu: Analytics
┌─────────────────────────────────────┐
│ Analytics │
├─────────────────────────────────────┤
│ 📊 Learner Progress │
│ Progress across all tenants │
│ → /admin/reports/learner-progress │
│ │
│ 📈 Custom Reports │
│ Build custom reports │
│ → /admin/reports/custom │
└─────────────────────────────────────┘
Mega Menu: System
┌─────────────────────────────────────┐
│ System │
├─────────────────────────────────────┤
│ 🏥 Health │
│ System health monitoring │
│ → /admin (health section) │
│ │
│ ⚙️ Settings │
│ System settings │
│ → /admin/settings │
│ │
│ 📋 Audit Logs │
│ System activity logs │
│ → /admin/audit-logs │
└─────────────────────────────────────┘
Changes from Current
- Remove "(All Tenants)" Suffix: Redundant in admin context
- Group Related Features: Data, Analytics, System
- Direct Dashboard Link: "Admin Dashboard" is direct link, not in dropdown
- Clearer Categories: Data Management, Analytics, System
Navigation Component Structure
Proposed UnifiedNav Updates
New Props:
interface UnifiedNavProps {
context?: 'public' | 'customer' | 'admin';
showAuthButtons?: boolean;
forceShow?: boolean;
isAdmin?: boolean;
// New props
userType?: 'unknown' | 'scorm_api' | 'xapi' | 'scorm_dispatch' | 'mixed';
favoriteFeatures?: string[]; // For personalization
}
New Components:
- MegaMenu: Dropdown with sections, icons, descriptions
- NavCategory: Category header with collapsible items
- Breadcrumbs: Show navigation path (on detail pages)
- QuickActions: Command palette or quick access menu
Mobile Navigation Improvements
Proposed Mobile Menu
Structure: Collapsible sections with search
Layout:
┌─────────────────────────┐
│ [Search Features...] │
├─────────────────────────┤
│ 🏠 Dashboard │
├─────────────────────────┤
│ ▼ CONTENT │
│ 📦 Packages │
│ 🚀 Dispatch │
│ 📚 My Learning │
├─────────────────────────┤
│ ▼ ANALYTICS │
│ 📊 Reports │
│ 📈 Usage │
│ 📝 xAPI │
├─────────────────────────┤
│ ▼ INTEGRATIONS │
│ 🔑 API Keys │
│ 🔔 Webhooks │
│ 🔐 Credentials │
├─────────────────────────┤
│ ▼ ACCOUNT │
│ 💳 Billing │
│ ⚙️ Settings │
└─────────────────────────┘
Features:
- Collapsible sections (▼ expands, ▶ collapses)
- Search at top (filter features)
- Icons for visual scanning
- Clear hierarchy
Context Indicators
Proposed Context Badges
Visual Indicators:
- Public: No badge (default)
- Customer: Badge showing user type (e.g., "SCORM API User", "xAPI User")
- Admin: Badge showing "System Admin"
Location: Next to user menu or in navigation
Implementation:
{userType && (
<span className="badge">
{getUserTypeDisplayName(userType)}
</span>
)}
Breadcrumbs Implementation
Proposed Breadcrumb Component
Location: Below navigation, above page content
Structure:
Dashboard > Content > Packages > Package Details
Implementation:
- Auto-generated from route structure
- Clickable (navigate back)
- Shows full path
- Responsive (collapses on mobile)
Example Routes:
/dashboard/packages/[id]→Dashboard > Content > Packages > [Package Title]/dashboard/reports/custom→Dashboard > Analytics > Reports > Custom/admin/packages/[id]/distribution→Admin > Data > Packages > [Title] > Distribution
Quick Actions / Command Palette
Proposed Command Palette
Trigger: Cmd+K (Mac) or Ctrl+K (Windows/Linux)
Features:
- Search all features
- Quick navigation
- Recent items
- Keyboard shortcuts
Implementation:
<CommandPalette>
<CommandInput placeholder="Search features..." />
<CommandList>
<CommandGroup heading="Content">
<CommandItem>Packages</CommandItem>
<CommandItem>Dispatch</CommandItem>
</CommandGroup>
<CommandGroup heading="Analytics">
<CommandItem>Reports</CommandItem>
<CommandItem>Usage</CommandItem>
</CommandGroup>
// ... more groups
</CommandList>
</CommandPalette>
Progressive Disclosure
Proposed Feature Hiding
Primary Features (Always Visible):
- Dashboard
- Content (Packages, Dispatch)
- Analytics (Reports)
- Integrations (API Keys)
- Account (Billing)
Secondary Features (Hidden by Default, Show on Hover/Click):
- My Learning (if not learner-focused user)
- Usage (if not approaching limits)
- xAPI (if not xAPI user)
- Credentials (unified view)
- Settings (if not configured)
Implementation:
- Use user type to show/hide features
- "Show More" link to reveal secondary features
- Remember user preference
Visual Hierarchy Improvements
Proposed Styling
Primary Actions (Bold, Larger):
- Dashboard
- Main category items (Content, Analytics, etc.)
Secondary Actions (Regular, Smaller):
- Sub-items in mega menus
- Less-used features
Icons:
- Category icons (Content, Analytics, etc.)
- Feature icons (Packages, Reports, etc.)
- Consistent icon set (Lucide)
Colors:
- Primary actions: White/primary color
- Secondary actions: White/70 opacity
- Hover states: Clear visual feedback
Navigation Personalization
Proposed Features
Favorites:
- Pin frequently used features
- Show at top of navigation
- Persist across sessions
Recent Items:
- Track recently visited pages
- Show in "Recent" section
- Limit to 5-10 items
Custom Ordering:
- Allow users to reorder categories
- Remember preferences
- Default order for new users
Implementation Phases
Phase 1: Quick Wins (Week 1)
- Add missing navigation links (Credentials, xAPI)
- Add breadcrumbs to detail pages
- Remove "(All Tenants)" suffix from admin nav
- Add context indicators (user type badges)
Phase 2: Reorganization (Week 2-3)
- Implement mega menu structure
- Group features by category
- Add icons and descriptions
- Update mobile navigation
Phase 3: Enhancements (Week 4+)
- Add command palette
- Implement progressive disclosure
- Add personalization (favorites, recent)
- Add contextual help (tooltips)
Migration Considerations
Backward Compatibility
Route Preservation:
- All existing routes remain valid
- No breaking changes to URLs
- Redirects not needed
Navigation Updates:
- Update
UnifiedNavcomponent - Add new mega menu components
- Update mobile menu
- Add breadcrumb component
User Impact
Positive:
- Easier to find features
- Clearer organization
- Reduced cognitive load
Potential Issues:
- Users familiar with old navigation need to learn new structure
- Some features moved to different locations
Mitigation:
- Announce changes
- Provide migration guide
- Keep old routes working
- Add tooltips/help text
Success Metrics
Measurable Improvements
Navigation Efficiency:
- Time to find feature (target: <10 seconds)
- Clicks to reach feature (target: ≤2 clicks)
- Navigation errors (target: <5%)
Feature Discovery:
- Features found without help (target: >80%)
- Hidden features discovered (target: >50%)
- User satisfaction (target: >4/5)
Cognitive Load:
- Perceived complexity (target: reduced by 30%)
- Decision time (target: reduced by 20%)
- User confusion (target: <10%)
Summary
The proposed navigation structure addresses all identified issues:
- ✅ Explicit Categorization: Content, Analytics, Integrations, Account
- ✅ Reduced Cognitive Load: Grouping, progressive disclosure
- ✅ Missing Links Added: Credentials, xAPI in navigation
- ✅ Clear Hierarchy: Primary vs. secondary features
- ✅ Context Indicators: User type badges, breadcrumbs
- ✅ Better Mobile: Collapsible sections, search
- ✅ Progressive Disclosure: Hide less-used features
- ✅ Visual Hierarchy: Icons, typography, colors
- ✅ Personalization: Favorites, recent items
- ✅ Quick Actions: Command palette
This structure provides a clear, organized, and user-friendly navigation experience.