Skip to main content

15. User Stories & Scenarios

Overview​

This document provides real-world user stories and interaction scenarios for Dashboard 2.0, organized by user persona. Each story includes success criteria, workflow steps, and UI requirements to guide implementation and validation testing.

User Personas:

  • Product Manager (Hal) - Monitors overall project health and sprint progress
  • Full-Stack Developer (Backend Team) - Tracks assigned tasks and blockers
  • QA Engineer - Identifies testing priorities and completion status
  • Executive/Stakeholder - Views high-level KPIs and budget tracking
  • External Contributor - Navigates documentation and finds open tasks

Example User Workflow: Monday Morning Sprint Review​

Workflow Duration: 5-7 minutes Key UI Components: Portfolio Overview → Filter Modal → Task Detail Modal Success Metric: PM identifies and triages all blockers before 9:15 AM standup

15.1 Product Manager Scenarios​

Story 1: Monday Morning Sprint Review​

As a Product Manager, I want to quickly see which projects are on track and which need attention, So I can prioritize my day and address blockers early.

Workflow:

  1. Open Dashboard 2.0 at 9:00 AM Monday
  2. Portfolio Overview loads automatically (default view)
  3. Scan 4-quadrant dashboard:
    • Overall Progress: 78% completion (530 tasks, 413 completed)
    • At Risk: 2 projects highlighted in red (coditect-license-manager, coditect-installer)
    • This Week: 12 tasks due by Friday
    • Priority Breakdown: 3 P0 tasks still pending
  4. Click on "At Risk Projects" card
  5. Filter modal opens with preset: status:at_risk
  6. View 2 projects with blockers:
    • coditect-license-manager: Database schema validation failing
    • coditect-installer: Cross-platform build issues
  7. Click on first project → Navigate to project detail
  8. Review blocked tasks, assign to team members
  9. Add comment: "Priority for today's standup"
  10. Return to dashboard

Success Criteria:

  • Portfolio Overview loads in <2 seconds
  • At-risk projects clearly highlighted (red indicator)
  • One-click filter to see blocked items
  • Task detail modal opens with full context
  • Comments persist to database

UI Requirements:

  • 4-quadrant Portfolio Overview (section 5)
  • Filter modal with presets (section 9)
  • Task detail modal (section 10)
  • Navigation breadcrumbs

Story 2: Creating Weekly Status Report​

As a Product Manager, I want to export a summary of this week's progress, So I can share it with stakeholders via email.

Workflow:

  1. Click "Analytics" in sidebar navigation
  2. Analytics Dashboard loads with 4 charts:
    • Completion Rate Gauge: 78%
    • Velocity Line Chart: 45 tasks/week average
    • Burndown Chart: On track (actual matches ideal)
    • Priority Distribution: 60% P1, 25% P2, 10% P0, 5% P3
  3. Click "Export Summary" button (top-right)
  4. Choose date range: "Last 7 Days"
  5. Choose format: "PDF Report"
  6. Dashboard generates PDF with:
    • Executive summary (1 paragraph)
    • 4 charts as images
    • Top 10 completed tasks
    • Top 5 blockers
  7. Download PDF: dashboard-report-2025-11-27.pdf
  8. Send via email to stakeholders

Success Criteria:

  • Analytics charts render correctly
  • Export generates within 10 seconds
  • PDF includes all 4 charts + summary
  • Date range filter works correctly

UI Requirements:

  • Analytics Dashboard (section 8)
  • Export button with format options
  • Date range picker
  • PDF generation library (jsPDF or server-side)

15.2 Developer Scenarios​

Story 3: Finding and Starting Next Task​

As a Full-Stack Developer, I want to see my assigned tasks sorted by priority, So I can work on the most important item next.

Workflow:

  1. Open Dashboard 2.0
  2. Click "My Tasks" quick filter (pre-configured in sidebar)
  3. Kanban Board loads with filter: assignee:me
  4. See 3 columns:
    • To Do: 8 tasks (3 P0, 5 P1)
    • In Progress: 2 tasks (both P1)
    • Done: 15 tasks this week
  5. Sort by priority (P0 first)
  6. Click on top task: "Implement JWT authentication middleware"
  7. Task Detail Modal opens (side drawer)
  8. Review task:
    • Priority: P0
    • Effort: 4 hours
    • Dependencies: Database schema (✅ completed)
    • Blocked by: None
  9. Click "Start Task" button
  10. Task moves to "In Progress" column
  11. Checkbox in TASKLIST.md auto-updates to [~]
  12. Modal shows timer: "Started at 10:15 AM"

Success Criteria:

  • "My Tasks" filter works correctly
  • Tasks sorted by priority automatically
  • Drag-and-drop updates status
  • TASKLIST.md syncs with database
  • Timer starts when task moves to In Progress

UI Requirements:

  • Kanban Board with swimlanes (section 6)
  • Filter presets (section 9)
  • Task Detail Modal (section 10)
  • Status update API

Story 4: Identifying Blocked Tasks Before Standup​

As a Developer, I want to quickly see which tasks are blocked, So I can bring them up in the daily standup meeting.

Workflow:

  1. Open Dashboard at 9:55 AM (5 min before standup)
  2. Click "Filter" button in top bar
  3. Filter Modal opens
  4. Select filters:
    • Status: Pending, In Progress
    • Tags: Contains "blocked"
    • Assignee: Me
  5. Click "Apply Filters"
  6. Kanban Board updates: 2 blocked tasks visible
    • Task 1: "Deploy backend to GKE" (blocked by database migration)
    • Task 2: "Add auth to API endpoints" (blocked by JWT library issue)
  7. Click on Task 1 → Review blocker details
  8. Add comment: "Waiting on DevOps for migration script"
  9. Return to dashboard
  10. Screenshot Kanban view
  11. Share in Slack: "2 blockers for standup"

Success Criteria:

  • Filter by "blocked" tag works
  • Blocked tasks show blocker reason
  • Comments persist for team visibility
  • Quick screenshot/export available

UI Requirements:

  • Filter Modal (section 9)
  • Task Detail Modal with comments (section 10)
  • Visual indicator for blocked status (icon or color)

15.3 QA Engineer Scenarios​

Story 5: Prioritizing Testing Based on Completion​

As a QA Engineer, I want to see which features were completed this week, So I can create a testing plan for Friday.

Workflow:

  1. Open Dashboard on Thursday 4 PM
  2. Click "Filter" → Date range: "Last 7 Days"
  3. Filter: status:completed
  4. Kanban Board shows "Done" column with 23 tasks
  5. Group by project:
    • coditect-cloud-backend: 12 completed tasks
    • coditect-frontend: 8 completed tasks
    • coditect-docs: 3 completed tasks
  6. Click on "coditect-cloud-backend" group
  7. Review completed tasks:
    • "JWT authentication middleware" ✅
    • "User registration API" ✅
    • "Password hashing" ✅
  8. Click "Export to Test Plan" button
  9. Generate test plan checklist:
    • Test JWT token generation
    • Test user registration flow
    • Test password security
  10. Download as Markdown: test-plan-week-48.md

Success Criteria:

  • Date range filter works
  • Group by project functional
  • Export generates Markdown checklist
  • All completed tasks included

UI Requirements:

  • Filter Modal with date picker (section 9)
  • Kanban Board with grouping (section 6)
  • Export to Markdown feature
  • Checkbox format for test plans

15.4 Executive/Stakeholder Scenarios​

Story 6: Reviewing Budget and Timeline at Board Meeting​

As an Executive, I want to see high-level project health and budget status, So I can report to the board on progress.

Workflow:

  1. Open Dashboard 2.0 on laptop (board meeting in 10 min)
  2. Portfolio Overview loads (default view)
  3. Review KPIs:
    • Overall Completion: 78% (530 tasks, 413 done)
    • Budget Utilization: $89K spent of $111K (80%)
    • Timeline: Phase 1 on schedule (ends Dec 10)
    • At Risk: 2 projects (see details)
  4. Click on "Timeline Chart" in sidebar
  5. Gantt chart shows:
    • Phase 0: 100% complete (green)
    • Phase 1: 78% complete (yellow, on track)
    • Phase 2: Not started (gray)
  6. Hover over Phase 1 bar → Tooltip: "78% complete, 12 days remaining"
  7. Click "Present Mode" button (top-right)
  8. Dashboard enters fullscreen, hides sidebar
  9. Charts enlarge for projector visibility
  10. Navigate with arrow keys between views
  11. After meeting: Click "Exit Present Mode"

Success Criteria:

  • Portfolio KPIs accurate and current
  • Timeline shows all phases
  • Present Mode hides non-essential UI
  • Charts readable on projector (large fonts)

UI Requirements:

  • Portfolio Overview with KPIs (section 5)
  • Timeline Chart (section 7)
  • Present Mode (fullscreen view)
  • Keyboard navigation (arrow keys)

15.5 External Contributor Scenarios​

Story 7: Finding Open Tasks for First Contribution​

As an External Contributor, I want to find beginner-friendly tasks I can contribute to, So I can make my first open-source contribution.

Workflow:

  1. Visit Dashboard 2.0 (public URL)
  2. No login required (read-only access)
  3. Click "Good First Issue" tag in sidebar
  4. Filter: tags:good-first-issue AND status:pending
  5. Kanban Board shows 8 beginner tasks across projects
  6. Click on task: "Add documentation for API endpoints"
  7. Task Detail Modal shows:
    • Project: coditect-cloud-backend
    • Effort: 2 hours
    • Skills: Markdown, API documentation
    • Instructions: "Document all /api/tasks endpoints"
    • Mentor: @backend-team
  8. Click "View on GitHub" link
  9. Opens GitHub issue with same task
  10. Comment on GitHub: "I'd like to work on this"
  11. Fork repo and start contribution

Success Criteria:

  • Public read-only access works
  • "Good First Issue" tag filters correctly
  • Task detail shows clear instructions
  • Link to GitHub issue works
  • Mentor contact visible

UI Requirements:

  • Public access (no auth)
  • Tag-based filtering (section 9)
  • Task Detail Modal (section 10)
  • External link to GitHub

15.6 Cross-Persona Scenarios​

Story 8: Collaborative Sprint Planning (PM + Developers)​

As a Product Manager and Development Team, We want to collaboratively prioritize next sprint's tasks, So everyone agrees on priorities before we start.

Workflow (Friday 2 PM - Sprint Planning):

PM (Hal):

  1. Opens Dashboard on screen share (Zoom call)
  2. Click "Filter" → Phase: Phase 2, Status: Pending
  3. 45 tasks visible for Phase 2
  4. Click "Sort by Priority" dropdown → Sort by "Estimated Effort (Low to High)"
  5. Drag 10 tasks from "Backlog" to "Next Sprint" column (custom column)
  6. Tasks auto-tagged with sprint:49

Developers (team): 7. Review dragged tasks in real-time (live update) 8. Developer 1: "Task 3 depends on database migration - move to later" 9. PM drags Task 3 back to Backlog 10. Developer 2: "I can finish Task 7 in 3 hours, not 8" 11. PM updates effort estimate → Task 7: 3h 12. Repeat for all 10 tasks 13. PM clicks "Finalize Sprint" button 14. Confirmation modal: "Lock these 10 tasks for Sprint 49?" 15. PM clicks "Confirm" 16. Tasks moved to "To Do" column, tagged with sprint number 17. Email sent to team: "Sprint 49 Plan Ready"

Success Criteria:

  • Live updates work for all viewers
  • Drag-and-drop across columns functional
  • Effort estimates editable inline
  • Sprint tagging automatic
  • Email notification sent

UI Requirements:

  • Kanban Board with custom columns (section 6)
  • Filter Modal for phase selection (section 9)
  • Live WebSocket updates (technical implementation)
  • Inline editing for task fields
  • Email integration

15.7 Edge Cases & Error Scenarios​

Story 9: Handling Offline Mode​

As any user, When my internet connection drops, I want to continue viewing cached data and receive a clear notification, So I know the dashboard is stale.

Workflow:

  1. User opens Dashboard with active internet
  2. Dashboard loads all data, caches in LocalStorage
  3. Internet connection drops (simulated or real)
  4. User navigates to Kanban Board
  5. Cached data loads from LocalStorage
  6. Yellow banner appears at top: "⚠️ Offline Mode - Data may be stale. Last synced: 2:34 PM"
  7. User can still:
    • View cached tasks
    • Filter cached data
    • Take screenshots
  8. User CANNOT:
    • Update task status (button disabled)
    • Add comments (input disabled)
    • Export reports (requires server)
  9. Internet reconnects
  10. Banner updates: "✅ Back Online - Syncing data..."
  11. Dashboard fetches latest data from API
  12. Banner disappears after 3 seconds

Success Criteria:

  • Offline detection works
  • Cached data loads successfully
  • Clear banner notification shown
  • Disabled actions explained (tooltips)
  • Auto-sync on reconnection

UI Requirements:

  • Offline detection (navigator.onLine)
  • LocalStorage caching
  • Banner notification component
  • Disabled state for write actions

15.8 Acceptance Testing Checklist​

Functional Requirements​

Navigation:

  • All sidebar links work
  • Breadcrumb navigation accurate
  • Skip links functional (keyboard)

Data Display:

  • Portfolio KPIs match database
  • Kanban tasks load correctly
  • Timeline chart shows all phases
  • Analytics charts render accurately

Filtering & Search:

  • Filter modal applies filters correctly
  • Global search returns relevant results
  • Recent searches save to LocalStorage
  • Filter presets work

Task Management:

  • Drag-and-drop updates status
  • Task detail modal opens with full data
  • Comments persist to database
  • Status history tracked

Responsive Design:

  • Desktop (1024px+) shows 3-panel layout
  • Tablet (768px) has collapsible sidebar
  • Mobile (320px) uses hamburger menu
  • Touch targets ≥44px

Accessibility:

  • Keyboard navigation 100% functional
  • Screen reader announces all updates
  • Focus indicators visible
  • WCAG 2.1 AA contrast ratios met

Next: 16. References & Research Previous: 14. Technical Implementation Index: Master Index