Story 5.5: Content Review & Task System - UX Flow & Wireframes
Story: Speaker Content Submission, Quality Review & Configurable Task System
Last updated:
January 2, 2026
Reading time:
33 minutes
File size:
87.03 KB
Overview
This document describes the UX integration for three major feature areas:
- Speaker Content Submission - How organizers submit speaker materials (AC6-10)
- Quality Review Queue - How moderators review and approve content (AC11-15)
- Task Dashboard - How organizers manage event planning tasks (AC19-27)
Current UI State Analysis
Existing Pages (Story 5.4 Implementation)
┌─────────────────────────────────────────────────────────────┐
│ Organizer Dashboard │
│ Route: /organizer/events │
├─────────────────────────────────────────────────────────────┤
│ │
│ Event Cards Grid (Left) Quick Actions (Right) │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ Event #123 │ │ Critical Tasks │ │
│ │ Status: In Progress │ │ • Venue booking │ │
│ │ Progress Bar: 45% │ │ • Speaker outreach │ │
│ │ [View Details] │ │ [View All Tasks] │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ Event Detail (View Mode) │
│ Route: /organizer/events/:eventCode │
├─────────────────────────────────────────────────────────────┤
│ │
│ Event Info Theme Image │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Event #123 │ │ [Event Banner] │ │
│ │ Date: 2024-12-15 │ │ │ │
│ │ Venue: Kornhaus │ │ │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ Speaker Status Dashboard │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Status Summary Cards │ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │
│ │ │ 3 │ │ 5 │ │ 2 │ │ 4 │ │ 1 │ │ │
│ │ │ ID │ │ CTD │ │ RDY │ │ ACC │ │ SLT │ │ │
│ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │
│ │ │ │
│ │ Speaker Status Kanban Lanes (Drag & Drop) │ │
│ │ ┌──────┬──────┬──────┬──────┬──────┐ │ │
│ │ │ ID │ CTD │ RDY │ ACC │ SLT │ │ │
│ │ ├──────┼──────┼──────┼──────┼──────┤ │ │
│ │ │ John │ Mary │ Bob │ Lisa │ Tom │ │ │
│ │ │ Jane │ Sue │ │ Mike │ │ │ │
│ │ │ Alex │ │ │ Sara │ │ │ │
│ │ └──────┴──────┴──────┴──────┴──────┘ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ [Edit Event Details] │
│ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ Speaker Outreach Page │
│ Route: /organizer/events/:eventCode/speakers/outreach │
├─────────────────────────────────────────────────────────────┤
│ │
│ Filters: [All Organizers ▾] [All Statuses ▾] │
│ │
│ Speaker Table │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Name │ Company │ Status │ Assigned │ Actions │ │
│ ├─────────┼──────────┼─────────┼──────────┼───────────┤ │
│ │ John D. │ Tech AG │ READY │ Alice │ [Contact] │◄──┐│
│ │ Mary S. │ Dev GmbH │ CONTACTED│ Bob │ [Contact] │ ││
│ └─────────────────────────────────────────────────────┘ ││
│ ││
│ ┌──────────────────────────────────────────────────────┐ ││
│ │ Speaker Details Drawer (slides from right) │◄─┘│
│ │ │ │
│ │ John Doe - Tech AG │ │
│ │ │ │
│ │ Contact History Timeline: │ │
│ │ ○ 2024-12-10: Initial contact (Alice) │ │
│ │ ○ 2024-12-05: Status changed to READY │ │
│ │ │ │
│ │ [Mark as Contacted] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Finalized UX Flow (Simplified)
Based on stakeholder feedback, the implementation uses a streamlined integrated approach:
- Content Submission & Quality Review: Single drawer with context-aware tabs (Event Detail page)
- Task Dashboard: Widget integrated into main Organizer Dashboard
- Event Task Configuration: Tab in existing EventDetailEdit modal
┌─────────────────────────────────────────────────────────────────────┐
│ Event Detail (Enhanced) │
│ Route: /organizer/events/:eventCode │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Event Info + Theme Image │
│ │
│ Speaker Status Dashboard │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Status Summary Cards │ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │
│ │ │ 3 │ │ 5 │ │ 2 │ │ 4 │ │ 2 │ │ 3 │ │ 1 │ │ │
│ │ │ ID │ │ CTD │ │ RDY │ │ ACC │ │ SUB │ │ REV │ │ CNF │ ◄─NEW │
│ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │
│ │ │ │
│ │ Speaker Status Kanban Lanes (Enhanced with 7 lanes) │ │
│ │ ┌────┬────┬────┬────┬────┬────┬────┐ │ │
│ │ │ ID │CTD │RDY │ACC │SUB │REV │CNF │◄─ NEW LANES │ │
│ │ ├────┼────┼────┼────┼────┼────┼────┤ │ │
│ │ │John│Mary│Bob │Lisa│Tom │Eve │Max │ │ │
│ │ │Jane│Sue │ │Mike│ │Ann │ │ │ │
│ │ │ │ │ │ │⚠️ │ │ │◄─ Changes requested │ │
│ │ └────┴────┴────┴────┴────┴────┴────┘ │ │
│ │ │ │
│ │ SUB = Content Submitted (yellow, or red border if rejected)│ │
│ │ REV = Quality Reviewed (light green) │ │
│ │ CNF = Confirmed (dark green - both content + slot done) │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ Navigation Examples: │
│ • Click speaker in ACCEPTED → Content Submission Drawer │
│ • Click speaker in SUB/REV → Quality Review Drawer │
│ • Click speaker in any lane → Details + History always available │
│ │
└─────────────────────────────────────────────────────────────────────┘
A. Content Submission Drawer (Speaker Status = ACCEPTED)
┌──────────────────────────────────────────────────────────────┐
│ Speaker Drawer (slides from right, 600px wide) │
│ │
│ Lisa Thompson - Tech AG │
│ Event #123 | Status: ACCEPTED │
│ │
│ Tabs: [Details] [Content Submission ✓] [Contact History] │
│ ────────────────────────────────────────────────────────── │
│ │
│ Tab: Content Submission (Active) │
│ │
│ Speaker Information │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Search Speaker: [Lisa Thompson_____________] [Search] │ │
│ │ │ │
│ │ ✓ Found: Lisa Thompson (lisa@techag.ch) │ │
│ │ Company: Tech AG │ │
│ │ Role: SPEAKER │ │
│ │ │ │
│ │ [Edit Speaker Profile] [Create New Speaker] │ │
│ │ ↑ │ │
│ │ └─ Opens existing UserEditModal (includes portrait)│ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ Presentation Details │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Title: [Building Scalable Microservices_______________] │ │
│ │ (Required) │ │
│ │ │ │
│ │ Abstract: (Required) │ │
│ │ ┌──────────────────────────────────────────────────┐ │ │
│ │ │ In this talk, I'll share lessons learned from │ │ │
│ │ │ building distributed systems at Tech AG... │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └──────────────────────────────────────────────────┘ │ │
│ │ 145/1000 characters │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ [Cancel] [Submit Content] │
│ │
└──────────────────────────────────────────────────────────────┘
Flow:
- Click speaker card in “ACCEPTED” lane
- Drawer opens, “Content Submission” tab auto-selected
- Search/select speaker user (or create new via existing UserCreateModal)
- Fill title + abstract
- Click [Submit Content]
- Backend creates session + session_users junction
- Speaker moves to “SUB” lane (yellow background)
- Drawer closes
B. Quality Review Drawer (Speaker Status = CONTENT_SUBMITTED)
┌──────────────────────────────────────────────────────────────┐
│ Speaker Drawer (slides from right, 600px wide) │
│ │
│ Tom Brown - Dev Corp │
│ Event #123 | Status: CONTENT_SUBMITTED │
│ Submitted: 2 hours ago │
│ │
│ Tabs: [Details] [Quality Review ✓] [Contact History] │
│ ────────────────────────────────────────────────────────── │
│ │
│ Tab: Quality Review (Auto-selected for SUB status) │
│ │
│ Presentation Details │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Title: AI Ethics in Modern Software Development │ │
│ │ │ │
│ │ Abstract: │ │
│ │ This talk explores the ethical implications of AI in │ │
│ │ software development. Drawing from lessons learned at │ │
│ │ Dev Corp, we'll discuss bias detection, transparency, │ │
│ │ and responsible AI deployment strategies. │ │
│ │ │ │
│ │ 215 characters │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ Quality Checks │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ ✅ Length OK (215/1000) │ │
│ │ ✅ "Lessons learned" detected │ │
│ │ ✅ No product promotion detected │ │
│ │ ✅ Professional tone │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ Speaker Profile Preview │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ [📷 Portrait] Tom Brown │ │
│ │ Email: tom@devcorp.com │ │
│ │ Company: Dev Corp │ │
│ │ Bio: AI/ML specialist with 10+ years... │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ Reviewer Notes (Optional) │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Internal notes visible to organizers only... │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ [Request Changes] [Approve] │
│ │
└──────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────┐
│ Request Changes Modal (if [Request Changes] clicked) │
│ │
│ Request Changes │
│ ──────────────────────────────────────────────────────── │
│ │
│ Provide feedback for the organizer: │
│ ┌────────────────────────────────────────────────────────┐│
│ │ Please expand the lessons learned section with ││
│ │ specific examples. Add 1-2 concrete challenges faced ││
│ │ and how they were resolved. ││
│ │ ││
│ └────────────────────────────────────────────────────────┘│
│ 82/2000 characters │
│ │
│ ⚠️ Speaker will remain in "Content Submitted" status with │
│ changes requested badge. Organizer will be notified. │
│ │
│ [Cancel] [Send Feedback] │
│ │
└──────────────────────────────────────────────────────────────┘
Flow:
- Click speaker card in “SUB” lane
- Drawer opens, “Quality Review” tab auto-selected
- Reviewer sees content + auto quality checks
- Option A: Click [Approve]
- Speaker moves to “REV” lane (light green)
- If slot also assigned → auto-moves to “CNF” lane (dark green)
- Option B: Click [Request Changes]
- Modal opens for feedback
- Speaker stays in “SUB” lane with red border + ⚠️ badge
- Organizer receives notification
- Organizer updates content → resubmits → badge clears
Secondary Flow: Main Dashboard with Task Widget
┌─────────────────────────────────────────────────────────────────────┐
│ AppHeader Navigation (Enhanced) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ [Dashboard] [Events] [Content Review] [Tasks] [Team] ◄─ NEW │
│ ↑ │
│ └─ New top-level nav item │
│ │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ Content Review Queue │
│ Route: /organizer/content-review │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Filters: [All Events ▾] [All Statuses ▾] [Sort: Oldest First ▾] │
│ │
│ Review Queue (Kanban Style) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Pending Review (5) │ In Review (2) │ Approved (12) │ │
│ ├───────────────────────┼─────────────────┼────────────────────┤ │
│ │ ┌─────────────────┐ │ ┌─────────────┐ │ ┌─────────────┐ │ │
│ │ │ Lisa Thompson │ │ │ Tom Brown │ │ │ Max Weber │ │ │
│ │ │ Tech AG │ │ │ Dev Corp │ │ │ Code GmbH │ │
│ │ │ "Microservices" │ │ │ "AI Ethics" │ │ │ "Testing" │ │
│ │ │ Submitted: 2h │ │ │ Started: 1h │ │ │ Done: 1d │ │
│ │ │ [Review] │◄──┼─┼─Click opens │ │ │ │ │ │
│ │ └─────────────────┘ │ │ drawer ───┐ │ │ └─────────────┘ │ │
│ │ │ └─────────────┘ │ │ │
│ │ ┌─────────────────┐ │ │ │ │
│ │ │ Eve Davis │ │ │ │ │
│ │ │ Sys Inc │ │ │ │ │
│ │ │ "Security" │ │ │ │ │
│ │ │ Submitted: 5h │ │ │ │ │
│ │ │ [Review] │ │ │ │ │
│ │ └─────────────────┘ │ │ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Review Drawer (slides from right, 700px wide) │◄┘
│ │ │
│ │ Lisa Thompson - Tech AG │
│ │ Event #123 | Submitted: 2 hours ago │
│ │ │
│ │ Presentation Details │
│ │ ┌────────────────────────────────────────────────────────────┐│
│ │ │ Title: Building Scalable Microservices ││
│ │ │ ││
│ │ │ Abstract: ││
│ │ │ In this talk, I'll share lessons learned from building ││
│ │ │ distributed systems at Tech AG. We'll cover service ││
│ │ │ discovery, fault tolerance, and deployment strategies. ││
│ │ │ ││
│ │ │ 145/1000 characters ││
│ │ └────────────────────────────────────────────────────────────┘│
│ │ │
│ │ Quality Checks │
│ │ ┌────────────────────────────────────────────────────────────┐│
│ │ │ ✅ Length OK (145/1000) ││
│ │ │ ✅ "Lessons learned" detected ││
│ │ │ ✅ No product promotion detected ││
│ │ │ ✅ Professional tone ││
│ │ └────────────────────────────────────────────────────────────┘│
│ │ │
│ │ Speaker Profile │
│ │ ┌────────────────────────────────────────────────────────────┐│
│ │ │ [📷 Portrait] ││
│ │ │ Email: lisa@techag.ch ││
│ │ │ Bio: Expert in distributed systems... ││
│ │ └────────────────────────────────────────────────────────────┘│
│ │ │
│ │ Moderator Notes (Optional) │
│ │ ┌────────────────────────────────────────────────────────────┐│
│ │ │ ││
│ │ └────────────────────────────────────────────────────────────┘│
│ │ │
│ │ [Request Changes] [Approve] │
│ │ │
│ └──────────────────────────────────────────────────────────────────┘
│ │
└─────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ Request Changes Modal │
│ │
│ Provide Feedback │
│ ──────────────────────────────────────────────────────────── │
│ │
│ ┌────────────────────────────────────────────────────────────┐│
│ │ Please expand on the lessons learned section. Provide ││
│ │ specific examples of challenges and solutions. ││
│ │ ││
│ │ ││
│ │ ││
│ └────────────────────────────────────────────────────────────┘│
│ 0/2000 characters │
│ │
│ [Cancel] [Send Feedback] │
│ │
└──────────────────────────────────────────────────────────────────┘
Navigation Flow:
- Moderator clicks “Content Review” in top navigation
- Sees Kanban board with all pending reviews across all events
- Clicks [Review] button on a card
- Review drawer opens with content + quality checks
- Reviews abstract against criteria
- Either approves → moves to “Approved” lane
- Or requests changes → opens feedback modal → stays in “Pending Review”
- Organizer receives notification with feedback
- Updates abstract → resubmits → back to “Pending Review”
OPTION 3: Task Dashboard Integration
Concept: Content review as tasks in task dashboard
Pros:
- Unified task management
- Leverages existing task system
- Natural fit for workflow automation
- Organizers see all work in one place
Cons:
- Content review is special (needs rich preview)
- May clutter task dashboard
- Less specialized review UI
┌─────────────────────────────────────────────────────────────────────┐
│ Task Dashboard │
│ Route: /organizer/tasks │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Tabs: [My Tasks] [Team Tasks] [Content Reviews] ◄─ NEW TAB │
│ ────────────────────────────────────────────────────────────── │
│ │
│ Tab: Content Reviews (Active) │
│ │
│ Review Queue │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ To Review (5) │ Reviewed (12) │ │
│ ├──────────────────────┼───────────────────────────────────────┤ │
│ │ ┌──────────────────┐ │ ┌──────────────────┐ │ │
│ │ │ Lisa Thompson │ │ │ Max Weber │ │ │
│ │ │ Event #123 │ │ │ Event #123 │ │ │
│ │ │ "Microservices" │ │ │ "Testing" │ │ │
│ │ │ Due: Today │ │ │ ✅ Approved 1d │ │ │
│ │ │ [Review Now] │ │ │ │ │ │
│ │ └──────────────────┘ │ └──────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ Tab: My Tasks (Example) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ To Do (3) │ In Progress (1) │ Done (5) │ │
│ ├──────────────────────┼──────────────────┼────────────────────┤ │
│ │ ┌──────────────────┐ │ ┌──────────────┐ │ ┌──────────────┐ │ │
│ │ │ Venue Booking │ │ │ Newsletter │ │ │ Partner Mtg │ │ │
│ │ │ Event #123 │ │ │ Event #123 │ │ │ Event #122 │ │ │
│ │ │ Due: Dec 20 │ │ │ Due: Dec 18 │ │ │ Done: Dec 10 │ │ │
│ │ │ [Start] │ │ │ [Complete] │ │ │ │ │ │
│ │ └──────────────────┘ │ └──────────────┘ │ └──────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
Task Dashboard Wireframes (All Options)
Regardless of content review integration, the task dashboard is needed for AC19-27.
Task Dashboard - Main View
┌─────────────────────────────────────────────────────────────────────┐
│ Task Dashboard │
│ Route: /organizer/tasks │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Filters: [All Events ▾] [All Assignees ▾] [Sort: Due Date ▾] │
│ │
│ Task Kanban Board │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ To Do (8) │ In Progress (3) │ Completed (15) │ │
│ ├────────────────────────┼───────────────────┼──────────────────┤ │
│ │ ┌────────────────────┐ │ ┌───────────────┐ │ ┌──────────────┐│ │
│ │ │ 🏢 Venue Booking │ │ │ 📧 Newsletter │ │ │ 🤝 Partner ││ │
│ │ │ Event #123 │ │ │ Event #123 │ │ │ Meeting ││ │
│ │ │ Due: Dec 20 (2d) │ │ │ Due: Dec 18! │ │ │ Event #122 ││ │
│ │ │ Alice Johnson │ │ │ Bob Smith │ │ │ ✅ Done 1d ││ │
│ │ │ │ │ │ │ │ │ ││ │
│ │ │ [Start Task] │ │ │ [Complete] │ │ │ ││ │
│ │ └────────────────────┘ │ └───────────────┘ │ └──────────────┘│ │
│ │ │ │ │ │
│ │ ┌────────────────────┐ │ ┌───────────────┐ │ ┌──────────────┐│ │
│ │ │ 👤 Moderator │ │ │ 🍽️ Catering │ │ │ 📧 Newsletter││ │
│ │ │ Assignment │ │ │ Event #124 │ │ │ Event #121 ││ │
│ │ │ Event #123 │ │ │ Due: Dec 25 │ │ │ ✅ Done 3d ││ │
│ │ │ Due: Dec 22 (4d) │ │ │ Carol White │ │ │ ││ │
│ │ │ Alice Johnson │ │ │ │ │ │ ││ │
│ │ │ │ │ │ [Complete] │ │ │ ││ │
│ │ │ [Start Task] │ │ └───────────────┘ │ └──────────────┘│ │
│ │ └────────────────────┘ │ │ │ │
│ │ │ │ │ │
│ │ [+ Add Custom Task] │ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Legend: │
│ 🔴 Overdue 🟡 Due in <3 days 🟢 On track │
│ │
└─────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ Task Completion Modal (click [Complete]) │
│ │
│ Complete Task: Newsletter │
│ ──────────────────────────────────────────────────────────── │
│ │
│ Event: #123 - BATbern December 2024 │
│ Assigned: Bob Smith │
│ Due Date: December 18, 2024 │
│ │
│ Completion Notes │
│ ┌────────────────────────────────────────────────────────────┐│
│ │ Newsletter sent to 250 subscribers. ││
│ │ Open rate: 45% ││
│ │ 12 new registrations from newsletter. ││
│ └────────────────────────────────────────────────────────────┘│
│ │
│ [Cancel] [Mark Complete] │
│ │
└──────────────────────────────────────────────────────────────────┘
Task Templates Management
┌─────────────────────────────────────────────────────────────────────┐
│ Event Creation - Task Configuration Step │
│ Route: /organizer/events/create (Step 5 of 7) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Steps: [1. Info] [2. Venue] [3. Team] [4. Timeline] [5. Tasks] ... │
│ ────────────────────────────────────────────────────────── │
│ │
│ Configure Event Tasks │
│ │
│ Select which tasks to auto-create for this event. Tasks will be │
│ created automatically when the event reaches the trigger state. │
│ │
│ Default Templates (7) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ ☑ Venue Booking │ │
│ │ Trigger: Topic Selection | Due: 90 days before event │ │
│ │ Assign to: [Alice Johnson ▾] │ │
│ │ │ │
│ │ ☑ Partner Meeting Coordination │ │
│ │ Trigger: Topic Selection | Due: Same day as event │ │
│ │ Assign to: [Bob Smith ▾] │ │
│ │ │ │
│ │ ☑ Moderator Assignment │ │
│ │ Trigger: Topic Selection | Due: 14 days before event │ │
│ │ Assign to: [Alice Johnson ▾] │ │
│ │ │ │
│ │ ☑ Newsletter: Topic Announcement │ │
│ │ Trigger: Topic Selection | Due: Immediately │ │
│ │ Assign to: [Carol White ▾] │ │
│ │ │ │
│ │ ☑ Newsletter: Speaker Lineup │ │
│ │ Trigger: Agenda Published | Due: 30 days before event │ │
│ │ Assign to: [Carol White ▾] │ │
│ │ │ │
│ │ ☑ Newsletter: Final Agenda │ │
│ │ Trigger: Agenda Finalized | Due: 14 days before event │ │
│ │ Assign to: [Carol White ▾] │ │
│ │ │ │
│ │ ☑ Catering Coordination │ │
│ │ Trigger: Agenda Finalized | Due: 30 days before event │ │
│ │ Assign to: [Alice Johnson ▾] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ [+ Add Custom Task] │
│ │
│ [Back] [Next] │
│ │
└─────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ Add Custom Task Modal │
│ │
│ Create Custom Task Template │
│ ──────────────────────────────────────────────────────────── │
│ │
│ Task Name: [_______________________________________] * │
│ │
│ Trigger State: [Topic Selection ▾] * │
│ Options: Created, Topic Selection, Speaker Brainstorming, │
│ Agenda Published, Agenda Finalized, etc. │
│ │
│ Due Date Type: [⚫ Relative to Event] * │
│ ○ Immediate │
│ ○ Absolute Date │
│ │
│ Days Offset: [____] days [⚫ before] ○ after event │
│ │
│ Assign To: [Select Organizer ▾] │
│ │
│ ☑ Save as reusable template for future events │
│ │
│ [Cancel] [Add Task] │
│ │
└──────────────────────────────────────────────────────────────────┘
Recommended Approach: OPTION 1 (Integrated Drawer)
Why Option 1?
-
Natural Workflow Progression
- Speaker moves IDENTIFIED → CONTACTED → READY → ACCEPTED
- Natural next step: Submit content (same page, same context)
- No context switching required
-
Leverages Existing Patterns
- Already using drawers for SpeakerOutreach
- Users familiar with drawer interaction
- Consistent UX across organizer features
-
Minimal Navigation Overhead
- All speaker actions in one place
- No need to remember separate pages
- Reduces clicks from 5+ to 2
-
Visual Progress Tracking
- Kanban lanes show content submission status
- Easy to see which speakers need content
- Status badges indicate completion
-
Parallel Workflow Support
- Clear visual separation of SUB vs REV vs CNF lanes
- Easy to understand parallel progression
- Drag-drop still works for status changes
Implementation Plan
Phase 1: Extend Speaker Status Lanes
- Add 3 new lanes: CONTENT_SUBMITTED, QUALITY_REVIEWED, CONFIRMED
- Update status color mapping
- Add visual badges for parallel workflow states
Phase 2: Content Submission Drawer
- Add “Content Submission” tab to existing speaker drawer
- Reuse UserLookupAutocomplete component (already exists)
- Integrate portrait upload with S3 presigned URLs
- Form validation with character counter
Phase 3: Quality Review Queue (Separate Page)
- Create
/organizer/content-reviewroute (Option 2 for moderators) - Kanban board with review workflow
- Drawer with quality checks UI
- Approve/reject actions
Phase 4: Task Dashboard
- Create
/organizer/tasksroute - Kanban board for task management
- Task completion modal
- Auto-create tasks on workflow transitions
Navigation Map (Final)
┌─────────────────────────────────────────────────────────────────┐
│ AppHeader Navigation │
├─────────────────────────────────────────────────────────────────┤
│ │
│ [Dashboard] [Events] [Content Review] [Tasks] [Team] │
│ │ │ │ │ │
│ │ │ │ └─ /organizer/tasks │
│ │ │ └─ /organizer/content-review │
│ │ └─ /organizer/events │
│ └─ /organizer │
│ │
└──────────────────────────────────────────────────────────────────┘
/organizer/events (EventManagementDashboard)
└─ Click Event Card
↓
/organizer/events/:eventCode (EventDetail)
├─ Speaker Status Kanban Lanes (7 lanes)
│ └─ Click Speaker in ACCEPTED lane
│ ↓
│ Speaker Content Drawer (tabs: Details, Content Submission, History)
│ └─ Submit Content → Speaker moves to CONTENT_SUBMITTED lane
│
└─ [Edit Event Details] button
↓
/organizer/events/:eventCode/edit (EventDetailEdit)
└─ 7 sections including SpeakersSessionsTable
/organizer/content-review (QualityReviewQueue)
└─ Kanban: Pending | In Review | Approved
└─ Click [Review] button
↓
Review Drawer (content + quality checks)
├─ [Approve] → Speaker moves to QUALITY_REVIEWED
└─ [Request Changes] → Feedback modal → stays in CONTENT_SUBMITTED
/organizer/tasks (TaskDashboard)
└─ Kanban: To Do | In Progress | Completed
└─ Click [Start] or [Complete]
↓
Task Completion Modal (notes)
/organizer/events/create (Event Creation Wizard)
└─ Step 5: Task Configuration
├─ Select default templates (7 pre-checked)
└─ [+ Add Custom Task]
↓
Custom Task Modal (trigger, due date, assignee)
User Stories & Flows
Flow 1: Organizer Submits Speaker Content (AC6-10)
Actor: Alice (Organizer) Precondition: Speaker “Lisa Thompson” has accepted invitation (status=ACCEPTED)
- Alice navigates to
/organizer/events/123 - Views Speaker Status Dashboard with Kanban lanes
- Sees Lisa in “ACCEPTED” lane (green badge)
- Clicks Lisa’s card → Speaker Content Drawer opens
- Switches to “Content Submission” tab
- Searches “Lisa Thompson” in user autocomplete → found
- Fills presentation title: “Building Scalable Microservices”
- Fills abstract: “In this talk, I’ll share lessons learned…” (145 chars)
- Uploads portrait photo (optional)
- Clicks [Submit Content]
- Lisa’s card animates to “CONTENT_SUBMITTED” lane (yellow badge)
- Drawer closes, status summary updates: SUBMITTED count increases
- System creates session record + session_users junction
- SpeakerWorkflowStateChangeEvent published
Result: Lisa’s status = CONTENT_SUBMITTED, session created, ready for review
Flow 2: Moderator Reviews Content (AC11-15)
Actor: Bob (Moderator) Precondition: Lisa’s content submitted, status=CONTENT_SUBMITTED
- Bob navigates to
/organizer/content-review - Sees “Pending Review (5)” column with Lisa’s card
- Clicks [Review] on Lisa’s card → Review Drawer opens
- Reviews presentation details:
- Title: “Building Scalable Microservices”
- Abstract: 145 chars
- Quality checks auto-run:
- ✅ Length OK (145/1000)
- ✅ “Lessons learned” detected
- ✅ No product promotion
- ✅ Professional tone
- Bob approves → clicks [Approve]
- Lisa’s card moves to “Approved” column
- System updates speaker_pool.status = QUALITY_REVIEWED
- System checks: Does Lisa have slot assigned? (session.start_time != null)
- If YES → auto-update to CONFIRMED + session_users.is_confirmed = true
- If NO → stays in QUALITY_REVIEWED, waits for slot assignment
Result: Lisa’s content approved, status = QUALITY_REVIEWED (or CONFIRMED if slot assigned)
Flow 3: Organizer Creates Event with Tasks (AC19-27)
Actor: Carol (Organizer) Precondition: Creating new event
- Carol navigates to
/organizer/events/create - Completes Steps 1-4 (Event Info, Venue, Team, Timeline)
- Reaches Step 5: Task Configuration
- Sees 7 default templates pre-checked:
- ☑ Venue Booking (trigger: topic_selection, due: -90d)
- ☑ Partner Meeting (trigger: topic_selection, due: 0d)
- ☑ Moderator Assignment (trigger: topic_selection, due: -14d)
- ☑ Newsletter: Topic (trigger: topic_selection, due: immediate)
- ☑ Newsletter: Speakers (trigger: agenda_published, due: -30d)
- ☑ Newsletter: Final (trigger: agenda_finalized, due: -14d)
- ☑ Catering (trigger: agenda_finalized, due: -30d)
- Assigns each task to team members via dropdowns
- Clicks [+ Add Custom Task] → modal opens
- Creates custom task:
- Name: “Sponsor Outreach”
- Trigger: Topic Selection
- Due: 60 days before event
- Assign: Carol
- ☑ Save as template
- Clicks [Add Task] → task added to list
- Clicks [Next] → completes event creation
- Event transitions to TOPIC_SELECTION state
- EventTaskService listens to EventWorkflowTransitionEvent
- Auto-creates 4 tasks (venue, partner, moderator, newsletter:topic)
- Carol navigates to
/organizer/tasks - Sees “To Do (4)” with newly created tasks
Result: Event created with 8 tasks, 4 auto-created and ready for assignment
Design System Alignment
Colors (Material-UI Theme)
Speaker Status Colors:
- IDENTIFIED: Grey 500 (#9e9e9e)
- CONTACTED: Amber 500 (#ffc107)
- READY: Orange 500 (#ff9800)
- ACCEPTED: Green 500 (#4caf50)
- CONTENT_SUBMITTED: Yellow 700 (#fbc02d) ← NEW
- QUALITY_REVIEWED: Light Green 600 (#7cb342) ← NEW
- CONFIRMED: Green 800 (#2e7d32) ← NEW
- DECLINED: Red 500 (#f44336)
- WITHDREW: Grey 700 (#616161)
- OVERFLOW: Purple 500 (#9c27b0)
Task Priority Colors:
- Overdue: Red 600 (#e53935)
- Due <3 days: Orange 600 (#fb8c00)
- On track: Green 600 (#43a047)
Typography
- Headers: Roboto, 24px, 600 weight
- Body: Roboto, 14px, 400 weight
- Captions: Roboto, 12px, 400 weight
- Buttons: Roboto, 14px, 500 weight, uppercase
Spacing
- Card padding: 16px
- Section margin: 24px
- Drawer width: 600px (content submission), 700px (review)
- Modal max-width: 600px
UX Decisions (Finalized 2025-12-20)
1. Content Review Access Control
DECISION: Any ORGANIZER can review content (not restricted to MODERATOR role)
- Faster reviews, distributed workload
- Team can self-organize review assignments
2. Speaker Card Visual Design in New Lanes
DECISION: Same card design, different header color by status
┌─────────────────┐
│ Lisa Thompson │ ← Yellow background (SUBMITTED)
│ Tech AG │
│ "Microservices" │ ← Show presentation title
│ Submitted: 2h │ ← Relative timestamp
└─────────────────┘
3. Quality Review Rejection Flow
DECISION: Stay in CONTENT_SUBMITTED with “Changes Requested” visual indicator
- Speaker remains in CONTENT_SUBMITTED lane
- Red border + badge: “⚠️ Changes Requested”
- Organizer can see feedback in drawer
- Resubmit updates content, removes badge
4. Task Dashboard Location
DECISION: Integrate into main Organizer Dashboard (not separate page)
- Task widget on main dashboard showing critical/overdue tasks
- Quick view of all tasks across all events
- No dedicated
/organizer/taskspage needed
5. Task Creation Timing
DECISION: Create all tasks immediately at event creation
- Tasks created with status=“pending” until trigger state reached
- Then auto-transition to status=“todo”
- Organizer sees full task list upfront for planning
6. Portrait Upload Location (Additional Decision)
DECISION: Remove portrait upload from Content Submission drawer
- Portrait upload already exists in UserCreateModal/UserEditModal
- Keep Content Submission focused on presentation details only
- If organizer needs to update portrait, use “Edit Speaker Profile” button
7. Quality Review UI Pattern (Simplified)
DECISION: No dedicated review page - use drawer from Event Detail
- Click speaker in CONTENT_SUBMITTED lane → Quality Review drawer opens
- Same drawer pattern as Content Submission, different tab
- Streamlined UX, no context switching
8. Event Task Configuration (Integration)
DECISION: Task configuration as tab in EventDetailEdit modal (not separate step)
- Existing EventDetailEdit has tabs: Info, Venue, Team, etc.
- Add new “Tasks” tab for task template selection
- Inline with existing modal pattern
FINALIZED: Task Dashboard & Event Configuration
Based on stakeholder decisions, here are the finalized wireframes for task management:
Task Widget on Main Organizer Dashboard
┌─────────────────────────────────────────────────────────────────────┐
│ Organizer Dashboard (Enhanced with Tasks Widget) │
│ Route: /organizer/events │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────┐ ┌────────────────────────────────┐ │
│ │ Event Cards (Left 70%) │ │ Right Sidebar (30%) │ │
│ │ │ │ │ │
│ │ ┌──────────────────────┐│ │ Critical Tasks (NEW) │ │
│ │ │ Event #123 ││ │ ┌──────────────────────────────┐│ │
│ │ │ Dec 15, 2024 ││ │ │ 🔴 Overdue (2) ││ │
│ │ │ Progress: 45% ││ │ │ ┌──────────────────────────┐││ │
│ │ │ [View Details] ││ │ │ │ Newsletter: Topic │││ │
│ │ └──────────────────────┘│ │ │ │ Event #122 │││ │
│ │ │ │ │ │ Due: Yesterday │││ │
│ │ ┌──────────────────────┐│ │ │ │ [Complete Now] │││ │
│ │ │ Event #124 ││ │ │ └──────────────────────────┘││ │
│ │ │ Jan 20, 2025 ││ │ │ ││ │
│ │ │ Progress: 12% ││ │ │ ┌──────────────────────────┐││ │
│ │ │ [View Details] ││ │ │ │ Venue Booking │││ │
│ │ └──────────────────────┘│ │ │ │ Event #123 │││ │
│ │ │ │ │ │ Due: 2 days ago │││ │
│ │ │ │ │ │ [Complete Now] │││ │
│ │ │ │ │ └──────────────────────────┘││ │
│ │ │ │ └──────────────────────────────┘│ │
│ │ │ │ │ │
│ │ │ │ 🟡 Due Soon (5) │ │
│ │ │ │ ┌──────────────────────────────┐│ │
│ │ │ │ │ Moderator Assignment ││ │
│ │ │ │ │ Event #123 | Due in 2 days ││ │
│ │ │ │ │ [Start] ││ │
│ │ │ │ ├──────────────────────────────┤│ │
│ │ │ │ │ Catering ││ │
│ │ │ │ │ Event #124 | Due in 3 days ││ │
│ │ │ │ │ [Start] ││ │
│ │ │ │ └──────────────────────────────┘│ │
│ │ │ │ │ │
│ │ │ │ [View All Tasks (23)] │ │
│ └──────────────────────────┘ │ │ │
│ │ Team Activity │ │
│ │ ┌──────────────────────────────┐│ │
│ │ │ Alice completed Venue ││ │
│ │ │ Booking for Event #122 ││ │
│ │ │ 2h ago ││ │
│ │ └──────────────────────────────┘│ │
│ └────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
Click [View All Tasks] opens expanded modal:
┌────────────────────────────────────────────────────────────────┐
│ All Tasks (Modal, 90% viewport width) │
│ │
│ Filters: [All Events ▾] [My Tasks ▾] [Sort: Due Date ▾] │
│ │
│ Task Board (Kanban) │
│ ┌────────────────────────────────────────────────────────────┐│
│ │ Pending (8) │ To Do (5) │ Completed (12) ││
│ │ (not yet active) │ (ready to work) │ (done) ││
│ ├────────────────────┼───────────────────┼───────────────────┤│
│ │ ┌────────────────┐ │ ┌───────────────┐ │ ┌───────────────┐││
│ │ │ 🏢 Venue Book │ │ │ 📧 Newsletter │ │ │ 🤝 Partner │││
│ │ │ Event #125 │ │ │ Event #123 │ │ │ Meeting │││
│ │ │ Activates on: │ │ │ Due: Dec 18! │ │ │ Event #122 │││
│ │ │ Topic Select │ │ │ Bob S. │ │ │ ✅ Done 1d │││
│ │ │ (not started) │ │ │ [Complete] │ │ │ │││
│ │ └────────────────┘ │ └───────────────┘ │ └───────────────┘││
│ │ │ │ ││
│ │ ℹ️ These tasks will│ │ ││
│ │ activate when the │ │ ││
│ │ event reaches their│ │ ││
│ │ trigger state │ │ ││
│ └────────────────────────────────────────────────────────────┘│
│ │
│ Legend: │
│ • Pending: Created at event setup, waiting for trigger state │
│ • To Do: Trigger state reached, ready to work │
│ • Completed: Task finished with notes │
│ │
│ [+ Add Custom Task] [Close] │
│ │
└──────────────────────────────────────────────────────────────────┘
Key Design Points:
- Tasks created at event creation have status=“pending”
- When event reaches trigger state, task auto-transitions to status=“todo”
- This gives organizers visibility into upcoming tasks without clutter
- Critical widget shows only overdue + due soon (already “todo” status)
Event Task Configuration (EventDetailEdit Tab)
┌─────────────────────────────────────────────────────────────────────┐
│ Edit Event #123 (Modal) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Tabs: [Info] [Venue] [Team] [Timeline] [Tasks ✓] [Actions] │
│ ──────────────────────────────────────────────────────────────────│
│ │
│ Tab: Tasks (Active) │
│ │
│ Configure Event Tasks │
│ Select which tasks to auto-create for this event. Tasks will be │
│ created immediately with "pending" status until trigger reached. │
│ │
│ Default Templates (7) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ ☑ Venue Booking │ │
│ │ Trigger: Topic Selection | Due: 90 days before event │ │
│ │ Assign to: [Alice Johnson ▾] │ │
│ │ │ │
│ │ ☑ Partner Meeting Coordination │ │
│ │ Trigger: Topic Selection | Due: Same day as event │ │
│ │ Assign to: [Bob Smith ▾] │ │
│ │ │ │
│ │ ☑ Moderator Assignment │ │
│ │ Trigger: Topic Selection | Due: 14 days before event │ │
│ │ Assign to: [Alice Johnson ▾] │ │
│ │ │ │
│ │ ☑ Newsletter: Topic Announcement │ │
│ │ Trigger: Topic Selection | Due: Immediately │ │
│ │ Assign to: [Carol White ▾] │ │
│ │ │ │
│ │ ☑ Newsletter: Speaker Lineup │ │
│ │ Trigger: Agenda Published | Due: 30 days before event │ │
│ │ Assign to: [Carol White ▾] │ │
│ │ │ │
│ │ ☑ Newsletter: Final Agenda │ │
│ │ Trigger: Agenda Finalized | Due: 14 days before event │ │
│ │ Assign to: [Carol White ▾] │ │
│ │ │ │
│ │ ☑ Catering Coordination │ │
│ │ Trigger: Agenda Finalized | Due: 30 days before event │ │
│ │ Assign to: [Alice Johnson ▾] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ Custom Tasks for this Event (2) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ ☑ Sponsor Outreach │ │
│ │ Trigger: Topic Selection | Due: 60 days before event │ │
│ │ Assign to: [Carol White ▾] [Edit] [✕] │ │
│ │ │ │
│ │ ☑ AV Equipment Rental │ │
│ │ Trigger: Agenda Finalized | Due: 7 days before event │ │
│ │ Assign to: [Bob Smith ▾] [Edit] [✕] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ [+ Add Custom Task] │
│ │
│ [Cancel] [Save Event] │
│ │
└─────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ Add Custom Task (Modal) │
│ │
│ Create Custom Task │
│ ──────────────────────────────────────────────────────────── │
│ │
│ Task Name: [________________________________________] * │
│ │
│ Trigger State: [Topic Selection ▾] * │
│ Options: Created, Topic Selection, Speaker Brainstorming, │
│ Agenda Published, Agenda Finalized, Complete │
│ │
│ Due Date Type: [⚫ Relative to Event] * │
│ ○ Immediate (when trigger state reached) │
│ ○ Absolute Date │
│ │
│ Days Offset: [____] days [⚫ before] ○ after event │
│ (negative offset = before event date) │
│ │
│ Assign To: [Select Organizer ▾] │
│ │
│ ☐ Save as reusable template for future events │
│ │
│ [Cancel] [Add Task] │
│ │
└──────────────────────────────────────────────────────────────────┘
Key Integration Points:
- Tasks tab added to existing EventDetailEdit modal
- Matches existing tab pattern (Info, Venue, Team, etc.)
- All 7 default templates pre-checked
- Custom tasks can be added per-event
- Option to save custom task as reusable template
Finalized Navigation Map
/organizer/events (EventManagementDashboard)
├─ Right Sidebar: Task Widget (overdue + due soon)
│ └─ [View All Tasks] → Task Board Modal (pending/todo/completed)
│
└─ Click Event Card
↓
/organizer/events/:eventCode (EventDetail)
├─ Speaker Status Kanban Lanes (7 lanes: ID/CTD/RDY/ACC/SUB/REV/CNF)
│ ├─ Click speaker in ACCEPTED → Content Submission Drawer
│ │ └─ Submit → Speaker moves to SUB lane
│ │
│ └─ Click speaker in SUB/REV → Quality Review Drawer
│ ├─ [Approve] → Speaker moves to REV (or CNF if slot assigned)
│ └─ [Request Changes] → Feedback modal → stays in SUB with badge
│
└─ [Edit Event Details] button
↓
EventDetailEdit Modal
└─ Tabs: Info, Venue, Team, Timeline, [Tasks ✓], Actions
└─ Tasks Tab: Select default + custom task templates
Simplified from Original Proposal:
- ❌ No dedicated
/organizer/content-reviewpage - ❌ No dedicated
/organizer/taskspage - ✅ All features integrated into existing pages/modals
- ✅ Leverages existing patterns (drawers, modals, Kanban)
Implementation Summary
Components to Create/Modify
New Components:
ContentSubmissionDrawer.tsx- Content submission form (reuses UserLookupAutocomplete)QualityReviewDrawer.tsx- Quality review interface with auto-checksTaskWidget.tsx- Critical tasks widget for main dashboardTaskBoardModal.tsx- Expandable task Kanban boardEventTasksTab.tsx- Task configuration in EventDetailEdit modalCustomTaskModal.tsx- Add/edit custom tasks
Modified Components:
SpeakerStatusLanes.tsx- Add 3 new lanes (SUB, REV, CNF)SpeakerStatusDashboard.tsx- Update status counts for 7 lanesEventManagementDashboard.tsx- Add TaskWidget to right sidebarEventDetailEdit.tsx- Add Tasks tab to existing modal
Backend Services:
SpeakerContentSubmissionService- Handle content submissionQualityReviewService- Approve/reject workflowTaskTemplateService- CRUD for task templatesEventTaskService- Auto-create tasks, status transitions
Database:
- Migration V22: task_templates, event_tasks tables (already created)
- No changes to speaker_pool (session_id column already exists from V20)
Next Steps
- ✅ Wireframes Finalized - Stakeholder feedback incorporated
- Begin Implementation - Phase 3-6 from story implementation plan
- Phase 3: Content Submission (ContentSubmissionDrawer + backend)
- Phase 4: Quality Review (QualityReviewDrawer + backend)
- Phase 5: Task System Backend (auto-creation, transitions)
- Phase 6: Task System Frontend (widget + modal + EventDetailEdit tab)
- Write Tests - Integration tests for all workflows
- Update OpenAPI - Document new endpoints
- Type Generation - Regenerate frontend types from OpenAPI specs
Related Files
- Story Document:
docs/stories/5.5-speaker-content-quality-review-task-system.md - Epic 5 PRD:
docs/prd/epic-5-enhanced-organizer-workflows.md - Workflow State Machines:
docs/architecture/06a-workflow-state-machines.md - Existing Components:
web-frontend/src/components/organizer/SpeakerStatus/SpeakerStatusDashboard.tsxweb-frontend/src/components/organizer/SpeakerStatus/SpeakerStatusLanes.tsxweb-frontend/src/pages/organizer/SpeakerOutreachPage.tsxweb-frontend/src/components/organizer/SpeakerOutreach/SpeakerOutreachDetailsDrawer.tsx
Document Status: ✅ Finalized - Ready for Implementation Last Updated: 2025-12-20 Author: James (Dev Agent) Stakeholder Approval: 2025-12-20 (UX decisions incorporated)