Story 3.3: Material Submission Wizard - Wireframe
Story: Epic 3, Story 3.3
Last updated:
October 22, 2025
Reading time:
15 minutes
File size:
32.34 KB
Material Submission Wizard (Multi-Step)
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ ← Back to Dashboard Submit Speaker Materials [Save Draft]│
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Spring Conference 2025 - Kubernetes Best Practices │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────────────┐ │
│ │ Step 1 Step 2 Step 3 Step 4 Step 5 Review │ │
│ │ ●━━━━━━━━━━━━━○━━━━━━━━━━━━━○━━━━━━━━━━━━━○━━━━━━━━━━━━━○━━━━━━━━━━○ │ │
│ │ Basic Info Abstract Biography Photo Presentation │ │
│ └─────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──── STEP 1: BASIC INFORMATION ─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Presentation Title * (max 100 characters) │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Kubernetes Best Practices for Production Environments │ 58/100 │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Presentation Language * │ │
│ │ ● English ○ German ○ German with English slides │ │
│ │ │ │
│ │ Session Format Preference │ │
│ │ ● Presentation only (45 min) │ │
│ │ ○ Presentation (30 min) + Demo (15 min) │ │
│ │ ○ Workshop style (interactive) │ │
│ │ │ │
│ │ Special Requirements (optional) │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Live demo planned - will need internet connection and backup │ │ │
│ │ │ plan. May require audience participation. │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [← Previous] [Save Draft] [Next Step →] │ │
│ └─────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──── PROGRESS & TIPS ────────────────────────────────────────────────────────────┐ │
│ │ ✓ Auto-saved 30 seconds ago │ │
│ │ 💡 Tip: Clear titles help attendees choose the right sessions │ │
│ │ 📊 20% complete │ │
│ └─────────────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘
[STEP 2: ABSTRACT]
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ ┌──── STEP 2: PRESENTATION ABSTRACT ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ Abstract * (max 1000 characters) │ │
│ │ Your abstract should include: │ │
│ │ • What attendees will learn │ │
│ │ • Key takeaways │ │
│ │ • ⚠️ Must include "Lessons Learned" from real experience │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ This talk explores production-ready Kubernetes practices based │ │ │
│ │ │ on 3 years of managing 50+ clusters at scale. │ │ │
│ │ │ │ │ │
│ │ │ You'll learn: │ │ │
│ │ │ • Cluster architecture patterns that scale │ │ │
│ │ │ • Security hardening beyond defaults │ │ │
│ │ │ • Monitoring strategies that actually work │ │ │
│ │ │ • Cost optimization techniques │ │ │
│ │ │ │ │ │
│ │ │ Lessons learned: We'll share real failures including our │ │ │
│ │ │ 2-hour production outage, DNS mysteries, and how we reduced │ │ │
│ │ │ our cloud costs by 40% while improving reliability. │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ 789/1000 │ │
│ │ │ │
│ │ ✓ Length requirement met │ │
│ │ ✓ Lessons learned included │ │
│ │ ⚠️ Consider adding specific technologies/tools │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
[STEP 3: BIOGRAPHY]
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ ┌──── STEP 3: SPEAKER BIOGRAPHY ─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Professional Bio * (max 500 characters) │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Peter Muller is a Principal Cloud Architect at TechCorp with │ │ │
│ │ │ 10+ years in cloud native technologies. He leads the platform │ │ │
│ │ │ team managing Kubernetes infrastructure for 500+ microservices. │ │ │
│ │ │ Peter is a CNCF contributor and speaks regularly at DevOps │ │ │
│ │ │ conferences across Europe. He holds certifications in CKA, │ │ │
│ │ │ CKAD, and AWS Solutions Architect Professional. │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ 420/500 │ │
│ │ │ │
│ │ Company/Organization * Job Title * │ │
│ │ ┌──────────────────────┐ ┌──────────────────────┐ │ │
│ │ │ TechCorp AG │ │ Principal Architect │ │ │
│ │ └──────────────────────┘ └──────────────────────┘ │ │
│ │ │ │
│ │ Social/Professional Links (optional) │ │
│ │ LinkedIn: [linkedin.com/in/pmuller_____________________________] │ │
│ │ Twitter/X: [@pmuller_devops_____________________________________] │ │
│ │ GitHub: [github.com/pmuller__________________________________] │ │
│ │ Website: [https://pmuller.tech________________________________] │ │
│ │ │ │
│ │ Previous Speaking Experience │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ • KubeCon EU 2024 - "Scaling Kubernetes" │ │ │
│ │ │ • DevOps Days Zurich 2023 - "GitOps Best Practices" │ │ │
│ │ │ • BATbern Spring 2023 - "Container Security" (Rating: 4.8/5) │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
[STEP 4: PHOTO UPLOAD]
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ ┌──── STEP 4: SPEAKER PHOTO ─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Upload Professional Photo * │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ ┌─────────────────┐ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ 📷 Drop │ │ │ │
│ │ │ │ Photo Here │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ or Browse │ │ │ │
│ │ │ └─────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ [Browse Files] or drag and drop │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Requirements: Current Photo: │ │
│ │ • Minimum 400x400px ┌──────────┐ │ │
│ │ • Maximum 5MB │ [Photo │ │ │
│ │ • JPG or PNG format │ Preview │ │ │
│ │ • Professional headshot │ Here] │ │ │
│ │ • Good lighting └──────────┘ │ │
│ │ • Recent (within 2 years) peter-muller.jpg │ │
│ │ 2.3MB • 800x800px │ │
│ │ [Remove] [Replace] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
Key Interactive Elements
- Progress indicator: Visual step-by-step wizard showing current position
- Auto-save: Every 30 seconds to prevent data loss
- Drag & drop: Upload photo and presentation files
- Real-time validation: Character counts, required field checking
- Smart tips: Contextual guidance for each step
- Step navigation: Previous/Next buttons with save draft option
- Progress estimation: Shows percentage complete and time remaining
Functional Requirements Met
- FR3: Speaker self-service capabilities for content submission
- Multi-step wizard reduces cognitive load
- Auto-save prevents data loss
- Clear validation and feedback
- Support for all required speaker materials
User Interactions
- Step 1 - Basic Info: Enter presentation title, language, format preferences, special requirements
- Step 2 - Abstract: Provide detailed abstract with lessons learned
- Step 3 - Biography: Professional bio, company info, social links, speaking experience
- Step 4 - Photo: Upload professional headshot with requirements guidance
- Step 5 - Presentation: Upload presentation slides and supplementary materials
- Review: Final review before submission
Technical Notes
- React Hook Form for form state management
- Resumable file uploads with progress tracking
- IndexedDB for auto-save and offline support
- Validation engine with real-time feedback
- Component hierarchy: MaterialWizard.tsx → StepComponents (BasicInfo, Abstract, Biography, PhotoUpload, Presentation)
- Support for drag-and-drop file uploads
- Image preview with crop/resize functionality
API Requirements
APIs needed to load and display data for this screen:
Initial Load
-
GET /api/v1/speakers/{speakerId}/events/{eventId}?include=materials,checklist
- Consolidated API: Replaces
/materials/draftendpoint - Retrieve event details with materials and checklist
- Response includes:
- Draft/submitted materials with all form data
- File metadata and submission status
- Event-specific requirements and checklist
- Used for: Pre-populating form fields with saved/existing data
- Auto-recovery: If session interrupted, resume from last saved state
- Consolidation benefit: Single call for event context and materials
- Consolidated API: Replaces
-
GET /api/v1/speakers/{speakerId}?include=profile
- Consolidated API: Uses standard speaker endpoint with profile inclusion
- Retrieve speaker profile data
- Response includes: bio, photo, company, social links, speaking history
- Used for: Pre-filling biography step (Step 3) with existing profile data
- Optimization: Reduce duplicate data entry
- Consolidation benefit: Consistent profile data access pattern
-
GET /api/v1/events/{eventId}/submission-requirements
- Retrieve event-specific submission requirements and guidelines
- Response includes: required fields, optional fields, format specifications, deadlines
- Used for: Dynamic form validation and requirement display
- Context: Different events may have different requirements
Reference Data
- GET /api/v1/reference/languages
- Retrieve supported presentation languages
- Response: Array of language options
- Used for: Language selection (Step 1)
Action APIs
APIs called by user interactions and actions:
Auto-Save
- PATCH /api/v1/speakers/{speakerId}/events/{eventId}/materials
- Consolidated API: Uses PATCH for draft auto-save
- Triggered by: Auto-save (every 30 seconds) or field blur
- Payload: Partial material data (current step + all previous steps)
- Response: Draft saved timestamp, draft ID
- Debounced: 30-second interval to reduce API calls
- Offline support: Queue in IndexedDB, sync when online
- Consolidation benefit: Standard PATCH pattern for partial updates
Step Navigation
- POST /api/v1/speakers/{speakerId}/events/{eventId}/materials/validate-step
- Triggered by: [Next Step →] button
- Payload:
{ step: number, data: object } - Response: Validation result, errors if any
- Used for: Server-side validation before allowing progression
- Returns:
{ valid: boolean, errors: [], warnings: [] }
File Uploads
-
POST /api/v1/speakers/{speakerId}/upload/photo
- Triggered by: Photo file drop or browse (Step 4)
- Payload: Multipart form-data with image file
- Response: File URL, CDN path, image dimensions, file size
- Integration: AWS S3 with presigned upload URL
- Processing: Server-side image optimization and validation
- Max size: 5MB
-
POST /api/v1/speakers/{speakerId}/events/{eventId}/materials
- Consolidated API: Uses unified materials endpoint
- Triggered by: Presentation file drop or browse (Step 5)
- Payload: Multipart form-data with presentation file +
{ type: "presentation" } - Response: File URL, CDN path, page count (for PDFs), file size
- Integration: AWS S3 with resumable upload support
- Supported formats: PDF, PPTX, KEY, Google Slides link
- Max size: 50MB
- Chunked upload: For large files, support resume capability
- Consolidation benefit: Single materials endpoint handles all material types
-
DELETE /api/v1/speakers/{speakerId}/events/{eventId}/materials/{materialId}
- Consolidated API: Uses nested materials endpoint
- Triggered by: [Remove] or [Replace] button on uploaded files
- Response: File deleted confirmation
- Side effect: Remove file from S3 storage
- Consolidation benefit: Consistent material deletion pattern
Submission
- POST /api/v1/speakers/{speakerId}/events/{eventId}/materials/submit
- Triggered by: [Submit Materials] button on Review step
- Payload: Complete material submission data (all steps)
- Response: Submission confirmation, submission ID, next steps
- Side effects:
- Notifies organizer of submission
- Updates speaker dashboard task status
- Triggers quality review workflow (if configured)
- State change: Material status → “submitted”, speaker task → “completed”
Draft Management
-
GET /api/v1/speakers/{speakerId}/events/{eventId}?include=materials
- Consolidated API: Uses event endpoint with materials inclusion
- Triggered by: Optional “View Previous Versions” link
- Response: Event data with material versions and timestamps
- Used for: Viewing submission history, reverting to previous versions
- Consolidation benefit: Materials history is part of event resource
-
POST /api/v1/speakers/{speakerId}/events/{eventId}/materials/{materialId}/restore
- Consolidated API: Uses materials restore endpoint
- Triggered by: “Revert to Version” action
- Payload:
{ versionId } - Response: Reverted material data
- Used for: Recovering from mistakes or changes
Profile Integration
- PATCH /api/v1/speakers/{speakerId}
- Consolidated API: Uses speaker PATCH for profile updates
- Triggered by: Checkbox “Save bio to my profile” (Step 3)
- Payload:
{ bio, photo, company, socialLinks } - Response: Profile updated confirmation
- Optimization: Allow speakers to update profile while submitting materials
- Consolidation benefit: Standard PATCH pattern, no special endpoint needed
Validation & Feedback
- POST /api/v1/materials/check-quality
- Triggered by: Real-time as user types in abstract field
- Payload:
{ abstract } - Response: Quality score, suggestions, requirement check
- Used for: Real-time feedback on abstract quality
- Returns:
{ score: number, suggestions: [], requirementsMet: {} }
Navigation Map
Screen transitions triggered by actions and events:
Primary Navigation
-
← Back to Dashboard
- Target: Speaker Dashboard (Story 3.3)
- Context: Exit wizard, return to dashboard
- Warning: If unsaved changes, show “Save draft?” confirmation dialog
-
[Save Draft] (top-right button)
- Action: Saves current progress
- No Navigation: Remains on current step
- Feedback: “Draft saved” toast notification
- Update: Last saved timestamp displayed
Step Navigation
-
[Next Step →]
- Target: Next wizard step (Step 2, 3, 4, 5, or Review)
- Validation: Validates current step before progression
- Error Handling: If validation fails, show errors inline, don’t progress
- Auto-save: Triggers auto-save before moving to next step
-
[← Previous]
- Target: Previous wizard step
- No Validation: Allow backward navigation without validation
- Context: Review or edit previous step data
-
Progress Indicator Click (Step circles at top)
- Target: Clicked step (if already visited)
- Restriction: Can’t skip ahead to unvisited steps
- Use case: Quick navigation to previously completed steps
Submission Flow
-
[Submit Materials] (on Review step)
- Action: POST final submission
- Target: Submission Confirmation page
- Feedback: Success message with next steps
- Navigation Options:
- “Return to Dashboard” button
- “View Event Details” button → Event Timeline (Story 3.5)
- Notification: Organizer notified of submission
-
On Submission Success
- Target: Submission Success page
- Content: Confirmation message, what happens next, timeline
- Actions:
- [Return to Dashboard] → Speaker Dashboard (Story 3.3)
- [View Event] → Event Timeline (Story 3.5)
- [Update Materials] → Returns to wizard in edit mode
File Upload Navigation
-
Photo Upload - Browse Files
- Target: System file picker dialog
- Return: Remains on Step 4 after file selection
- Feedback: Image preview, upload progress, validation status
-
Photo Upload - Drag & Drop
- No Navigation: Inline file processing
- Feedback: Drop zone highlight, upload progress, preview
-
[Remove] or [Replace] File
- Action: Deletes file, optionally opens file picker
- No Navigation: Remains on current step
- Feedback: Confirmation dialog before deletion
Error States & Recovery
-
On Upload Failure
- No Navigation: Remains on current step
- Feedback: Error message with retry option
- Action: [Retry Upload] button or drag file again
-
On Validation Error
- No Navigation: Remains on current step
- Feedback: Inline error messages on invalid fields
- Focus: Auto-scroll to first error field
-
On Session Timeout
- Target: Login page
- Protection: Draft saved to IndexedDB before redirect
- Recovery: After re-login, prompt “Resume previous submission?”
-
On Network Error
- No Navigation: Remains on current step
- Feedback: “Offline mode” banner
- Auto-save: Queued locally, sync when connection restored
Auto-Save & Recovery
-
On Page Refresh/Close with Unsaved Changes
- Browser Warning: “You have unsaved changes. Are you sure?”
- Recovery: On return, load from IndexedDB or last server draft
- Prompt: “Would you like to continue your previous submission?”
-
On Auto-Save Success
- No Navigation: Remains on current step
- Feedback: Small checkmark icon, “Saved 5 seconds ago” text
-
On Auto-Save Failure
- No Navigation: Remains on current step
- Feedback: Warning icon, “Unable to auto-save” message
- Action: [Save Now] button to retry
Profile Integration
-
“Use Profile Data” Button (Step 3)
- Action: GET profile data and populate bio fields
- No Navigation: Remains on Step 3
- Feedback: Fields auto-filled with profile data
- Option: “Save to profile” checkbox to update profile with changes
-
“View My Profile” Link (Step 3)
- Target: Speaker Profile Management (Story 7.1)
- Type: Open in new tab/window
- Context: Review current profile without losing wizard progress
Contextual Help
-
💡 Tip Links
- Target: Help modal or tooltip expansion
- Type: Inline modal overlay
- Content: Expanded guidance and examples
- Close: Remains on current step after reading
-
“See Example” Link (on Abstract step)
- Target: Example abstract modal
- Type: Modal overlay
- Content: Sample high-quality abstracts
- Inspiration: Helps speakers improve their content
Event-Driven Navigation
-
On Deadline Approaching (< 7 days)
- Feedback: Warning banner “Submission due in 5 days”
- Urgency: Red deadline indicator in progress section
-
On Deadline Passed
- Feedback: Error banner “Submission overdue”
- Action: Prompt to contact organizer
- Option: “Request Extension” button
-
On Organizer Revision Request
- Entry: Link from dashboard notification or email
- Target: Wizard opens to relevant step needing revision
- Context: Organizer feedback displayed inline
- Mode: Edit mode with feedback visible
Mobile-Specific
-
Mobile Step Navigation
- UI: Bottom sticky navigation buttons
- Steps: One step fully visible at a time
- Progress: Compact progress indicator at top
-
Mobile File Upload
- Options: Camera, Photo Library, or Files
- Native: Use device file picker/camera
- Optimization: Image compression before upload on mobile