Critical User Journeys

End-to-end user flows through QuickVote

← Back to Documentation

User Personas

QuickVote serves two primary user types with distinct goals and interaction patterns.

👨‍🏫

Admin (Session Creator)

Presenters, teachers, meeting facilitators who create and control voting sessions. They manage questions, control timing, and view results on a projected screen.

📱

Participant (Voter)

Audience members who join sessions via QR code or link on their mobile devices. They vote on questions and optionally provide reasons for their choices.

Journey 1: Create and Run a Live Session

🎯

Admin: Complete Session Lifecycle

From session creation to viewing final results
Critical Path
Step 1
Create Session
Home Page
Click "New Session" button
→
Step 2
Add Questions
Admin Dashboard
Create or import questions
→
Step 3
Open Lobby
Decision
Display QR code for joining
→
Step 4
Start Session
Admin Dashboard
Begin accepting votes
→
Step 5
Activate Question
Admin Dashboard
Push to participants
→
Step 6
Monitor Votes
Live Bar Chart
Watch real-time results
→
Step 7
Close Question
Admin Dashboard
Lock voting, show results
→
Step 8
End Session
Complete
Export or review results
~2 min
Setup Time
8
Steps to Complete
3
Page Transitions
Real-time
Vote Updates
Entry: Home Page
Primary Screen: Admin Dashboard
Exit: Session Review / Export
Alternative Paths
  • Import questions: Load from JSON template instead of manual creation
  • Clone session: Copy questions from a previous session
  • Batch voting: Group questions for carousel-style voting
  • On-the-fly question: Add questions mid-session
  • Presentation mode: Open separate projection window with slides between voting batches
Error Scenarios
  • Lost connection: Auto-reconnect with 10s grace period
  • No participants: Session continues, admin can wait
  • Browser refresh: State restored from Supabase

Journey 2: Join and Vote in a Session

📱

Participant: Mobile Voting Experience

From QR scan to submitting votes
Critical Path
Step 1
Scan QR Code
Phone Camera
Or tap shared link
→
Step 2
Auto Auth
Background
Anonymous JWT issued
→
Step 3
Join Lobby
Waiting Screen
Wait for session start
→
Step 4
Pick Team
Lobby
Select team if teams enabled
→
Step 5
Receive Question
WebSocket Push
Admin activates question
→
Step 6
Select Answer
Vote UI
Tap option + haptic
→
Step 7
Vote Confirmed
Complete
Wait for next question
<5 sec
Time to Join
1 tap
To Vote
0
Forms to Fill
0
Account Required
Alternative Paths
  • Add reason: Optional text explanation for vote choice
  • Change vote: Tap different option before question closes
  • Batch voting: Swipe through carousel of questions
  • Team selection: Choose a team in the lobby if the admin configured teams
Error Scenarios
  • Invalid session: "Session not found" message
  • Session ended: Redirect to results or home
  • Connection lost: Auto-reconnect, presence grace period
  • Vote after close: Rejected by RLS, UI shows closed state

Journey 3: Batch Question Voting

📋

Participant: Carousel Batch Experience

Answer multiple questions in sequence
Important Flow
Step 1
Batch Activated
Admin Push
Receive batch event
→
Step 2
View Carousel
Swipe UI
See first question
→
Step 3
Answer Q1
Tap Option
Select + auto-advance
→
Step 4
Swipe Through
Gesture Nav
Answer remaining Qs
→
Step 5
Review Answers
Summary
See all selections
→
Step 6
Submit All
Batch Complete
Parallel upserts
Alternative Paths
  • Skip question: Swipe past without selecting
  • Go back: Swipe backward to change previous answer
  • Progress dots: Tap dots to jump to specific question

Journey 4: Resume a Draft Session

📝

Admin: Continue Previous Work

Return to an unfinished session
Standard Flow
Step 1
View Past Sessions
Home Page
Click "Past Sessions"
→
Step 2
Find Draft
Session List
Filter by status
→
Step 3
Click Resume
Action Button
Load session state
→
Step 4
Admin Dashboard
Ready
Continue editing

Journey 5: Clone a Past Session

📄

Admin: Reuse Questions

Create new session from existing questions
Standard Flow
Step 1
Past Sessions
Home Page
Browse history
→
Step 2
Select Session
Session Card
Find source session
→
Step 3
Click Clone
Action Menu
Copy questions only
→
Step 4
New Session
Draft Ready
Edit and customize

Journey 6: Export and Import Sessions

💾

Admin: Template Management

Save and share session templates
Standard Flow

Export Flow

Step 1
Open Session
Admin Dashboard
→
Step 2
Click Export
Session Menu
→
Step 3
Download JSON
File Saved

Import Flow

Step 1
Create Session
Home Page
→
Step 2
Click Import
Admin Dashboard
→
Step 3
Select File
File Picker
→
Step 4
Validate JSON
Zod Schema
→
Step 5
Questions Added
Ready
v1.3+ Enhancements
  • Extended export schema: v1.3+ exports include slides, sequence order, and template references
  • Import validation: Import validates Storage image availability for slide references

Journey 7: Run a Presentation Session

🖥

Admin: Full Presentation Flow

Slides, batches, and keyboard-driven navigation on a projection screen
Important Flow
Step 1
Upload Slides
Admin Dashboard
Add slide images to session
->
Step 2
Arrange Sequence
Sequence Editor
Drag-and-drop slides + batches
->
Step 3
Open Lobby
Decision
Display QR code for joining
->
Step 4
Start Session
Admin Dashboard
Begin accepting participants
->
Step 5
Open Presentation
New Window
Projection-optimized view
->
Step 6
Navigate Sequence
Keyboard Nav
Arrows / Space to advance
->
Step 7
Show Slides / Activate Batches
Presentation Window
Cross-device sync via Realtime
->
Step 8
Reveal Results
Live Bar Chart
Show QR for latecomers
->
Step 9
End Session
Complete
Close presentation window
9
Steps (Full Flow)
Keyboard
Primary Navigation
Real-time
Cross-Device Sync
2 windows
Admin + Projection
Entry: Admin Dashboard
Control: Keyboard (Arrows / Space / B / F / ?)
Projection: Presentation Window
Alternative Paths
  • B key: Toggle black screen between sequence items
  • F key: Toggle fullscreen mode on presentation window
  • ? key: Show keyboard shortcut help overlay
  • Team filter: Filter results by team on the presentation display
Error Scenarios
  • Presentation window disconnected: Auto-reconnect via Supabase Realtime channel
  • Missing slide images: Placeholder shown with upload prompt

Journey 8: Save and Load Session Templates

📦

Admin: Session Template Reusability

Save session blueprints and load them into new sessions
Standard Flow

Save as Template

Step 1
Open Session
Admin Dashboard
Active or completed session
->
Step 2
Click Save as Template
Session Menu
Open save dialog
->
Step 3
Name Template
Modal Input
Enter descriptive name
->
Step 4
Template Saved
Complete
Available for future use

Load Template

Step 1
Create New Session
Home Page
Start fresh session
->
Step 2
Click Load Template
Admin Dashboard
Open template panel
->
Step 3
Select Template
Template List
Browse saved templates
->
Step 4
Review Items
Preview Panel
See questions and slides
->
Step 5
Confirm Action
Replace or Append
Choose merge strategy
->
Step 6
Session Populated
Ready
Edit and customize
3 clicks
To Save Template
4 clicks
To Load Template
Replace / Append
Merge Strategy
Alternative Paths
  • Rename template: Edit template name from the template list
  • Delete template: Remove with type-to-confirm safety dialog
  • Append instead of replace: Add template items to existing session content

Journey 9: Team-Based Voting

👥

Admin: Configure and Run Team Voting

Divide participants into teams and view filtered results
Important Flow
Step 1
Configure Teams
Admin Dashboard
Set up to 5 team names
→
Step 2
Open Lobby
Admin Dashboard
Display team QR grid
→
Step 3
Participants Join
Lobby Screen
Select team on join
→
Step 4
Run Voting
Admin Dashboard
Votes tagged with team_id
→
Step 5
Filter Results
Presentation
Toggle team filter tabs
5
Teams Max
Per-team
Filter
Team QR
Codes
Real-time
Vote Updates
Alternative Paths
  • Team QR grid: Scan per-team QR codes for direct team assignment
  • Switch team filter: Toggle team filter during presentation
  • Export includes team data: Exported results contain team information

Journey 10: Author a Session Template

✏️

Admin: Visual Template Editor

Build reusable session blueprints with drag-and-drop
Standard Flow
Step 1
Open Editor
Home Page
Click 'New Template'
→
Step 2
Add Batches
Editor Sidebar
Create and name batches
→
Step 3
Add Questions
Editor Main Area
Type questions, set options
→
Step 4
Arrange Sequence
Drag-and-Drop
Reorder batches and slides
→
Step 5
Preview
Preview Mode
Test all three views
→
Step 6
Save Template
Editor
Name and save blueprint
Drag-drop
Arrangement
3-view
Preview
Reusable
Blueprints

Journey Summary

Journey User Priority Steps Key Metric
Create & Run Session Admin Critical 8 Setup in <2 min
Join & Vote Participant Critical 7 Join in <5 sec
Batch Voting Participant Important 6 1 swipe per Q
Resume Draft Admin Standard 4 2 clicks to resume
Clone Session Admin Standard 4 Instant copy
Export/Import Admin Standard 3-5 JSON validated
Run Presentation Session Admin Important 9 Keyboard-driven
Save/Load Templates Admin Standard 4-6 3 clicks to save
Team-Based Voting Admin Important 5 Per-team filter
Author Template Admin Standard 6 Drag-and-drop

Key UI Touchpoints

Screen Role Primary Actions Critical For
Home Page Admin Create session, view past sessions Entry point
Admin Dashboard Admin Manage questions, control session flow, view results All admin journeys
QR Code Modal Admin Display join code for projection Participant onboarding
Participant Lobby Participant Wait for session, see status Pre-vote experience
Vote Screen Participant Select answer, add reason Core voting action
Batch Carousel Participant Swipe through questions Batch voting
Results Bar Chart Both View vote distribution Feedback loop
Presentation Window Admin (projected) Full-screen slides, batch results, QR overlay Presentation sessions
Sequence Editor Admin Drag-and-drop ordering of batches and slides Presentation setup
Session Template Panel Admin Save, load, rename, delete session templates Session reuse
Team Picker Participant Select team during lobby Team-based sessions
Team Filter Tabs Admin (projected) Toggle results by team Team result analysis
Template Editor Admin Visual drag-and-drop session builder Template authoring