2. Design Philosophy
2.1 Research Foundation​
This design is based on comprehensive research of industry best practices:
Multi-Project Management:
- Wrike: Multiple Project Dashboard - Filter customization, widget-based design
- Justinmind: Dashboard Design Best Practices - Minimalist interfaces, data clarity
- Teamhood: Project Portfolio Dashboard - KPI visualization, executive summaries
Kanban for Multiple Projects:
- Ones.com: Kanban Board for Multiple Projects in Jira - Swimlane patterns, project separation
- Kanban Multiple Projects Best Practices - Horizontal categorization, row-based organization
- Atlassian: Jira Boards Overview - Board navigation, sidebar patterns
Portfolio Management:
- Visor: Project Portfolio Dashboard Software - Filter logic (AND/OR), interactive widgets
- Smartsheet: Project Portfolio Dashboards - Multiple project tracking, resource allocation
- Monday.com: Portfolio Management Dashboard - Up to 200 project boards, automatic data retrieval
2.2 Key Insights from Research​
Navigation Patterns:
- Left sidebar with hierarchical tree navigation (most intuitive for 46 projects)
- Breadcrumbs for context awareness
- Global search with keyboard shortcut (Cmd+K standard)
Filtering Best Practices:
- Multi-select with AND/OR logic
- Save filter presets for common views
- Show task count next to each filter option
- Instant preview of filter results
Kanban Board Design:
- Swimlanes (horizontal rows) for project separation
- Collapsible rows to reduce visual clutter
- Lazy loading (10 projects initially, load on scroll)
- Drag-drop with visual feedback and validation
Accessibility Standards:
- WCAG 2.1 AA compliance (minimum 4.5:1 contrast ratio)
- Keyboard navigation with visible focus indicators
- ARIA labels for screen readers
- Semantic HTML structure
2.3 Design Constraints​
Technical Constraints:
- Pure JavaScript (no framework required for v1)
- Static JSON files (generated from knowledge.db)
- Browser-based rendering (no server-side runtime)
- Must work offline after initial load
Performance Constraints:
- Page load <2 seconds (including 14,321 messages + 530 tasks)
- Smooth 60fps animations (drag-drop, transitions)
- Memory usage <500MB (browser tab)
Browser Support:
- Chrome 120+ (latest 2 versions)
- Firefox 120+ (latest 2 versions)
- Safari 17+ (latest 2 versions)
- Edge 120+ (latest 2 versions)