101 KiB
101 KiB
Jury UI Redesign — Multi-Jury Member Experience
1. Overview
The Jury UI redesign transforms the jury member experience from a single-stage, single-jury model to a multi-jury, cross-round, document-aware system. Jury members can now belong to multiple jury groups (Jury 1, Jury 2, award juries), see documents from multiple submission windows, and manage evaluations across different rounds seamlessly.
Design Principles
- Multi-jury awareness — Jurors can be on multiple juries; UI must clearly separate contexts
- Cross-round document visibility — Jury 2 sees Round 1 + Round 2 docs; Jury 3 sees all
- Deadline-driven — Prominent countdowns, overdue warnings, grace period indicators
- Mobile-responsive live voting — Live finals must work on phones/tablets
- Zero cognitive load — Clear CTAs, guided workflows, no guessing what to do next
- Accessibility-first — WCAG AA compliance for scoring forms, keyboard nav, screen readers
Key User Journeys
| Journey | Pages Involved | Frequency |
|---|---|---|
| Onboarding | /jury/onboarding/[groupId] |
Once per jury group |
| Daily evaluation | Dashboard → Assignments → Evaluate | Daily during window |
| Live finals voting | Dashboard → Live voting interface | Once (ceremony day) |
| Winner confirmation | Dashboard → Confirmation review | Once (post-finals) |
| Award voting | Dashboard → Award evaluation | Once per award |
2. Current Jury UI Audit
Existing Pages (in src/app/(jury)/)
| File | Purpose | Issues/Limitations |
|---|---|---|
jury/page.tsx |
Jury dashboard | Single-stage view, no multi-jury support |
jury/stages/page.tsx |
Stage list | Uses old Stage/Track terminology |
jury/stages/[stageId]/assignments/page.tsx |
Assignment list | No jury group filtering, no cross-round docs |
jury/stages/[stageId]/projects/[projectId]/page.tsx |
Project detail | Single submission window only |
jury/stages/[stageId]/projects/[projectId]/evaluate/page.tsx |
Evaluation form | No multi-window doc access |
jury/stages/[stageId]/projects/[projectId]/evaluation/page.tsx |
Evaluation results | Unclear separation from evaluate |
jury/stages/[stageId]/live/page.tsx |
Live voting | Exists but needs enhancement |
jury/stages/[stageId]/compare/page.tsx |
Project comparison | Useful but no multi-doc support |
jury/awards/page.tsx |
Awards list | Basic list, no voting interface |
jury/awards/[id]/page.tsx |
Award detail | Basic detail, no evaluation form |
jury/learning/page.tsx |
Learning resources | Good — preserve as-is |
What's Missing
| Missing Feature | Impact |
|---|---|
| Multi-jury dashboard | Jurors on Jury 1 + Jury 2 have no way to switch context |
| Jury group switcher | All assignments shown together — confusing |
| Cross-round document viewer | Jury 2 can't see Round 1 + Round 2 docs side-by-side |
| Onboarding flow | No expertise selection, COI pre-declaration, preferences |
| Grace period indicators | Jurors don't know if they have extended deadline |
| Winner confirmation UI | No digital signature interface |
| Award evaluation form | Award voting is separate from main evaluation |
| Deadline countdown | No prominent timer showing time remaining |
| Next project CTA | No "Continue Next Evaluation" quick action |
| Assignment filters | Can't filter by status (pending/draft/done), category |
3. Jury Dashboard — Landing Page
Purpose
The jury dashboard is the mission control for all jury activities. It shows active jury groups, pending work, deadlines, and quick actions.
Route
/jury/dashboard
Data Requirements
// tRPC query
const { data: dashboardData } = trpc.jury.getDashboard.useQuery();
type DashboardData = {
juryGroups: {
id: string;
name: string; // "Jury 1", "Jury 2", "Innovation Award Jury"
description: string;
linkedRounds: {
id: string;
name: string; // "Round 3: Semi-finalist Selection"
status: RoundStatus;
windowCloseAt: Date | null;
daysRemaining: number | null;
}[];
stats: {
totalAssignments: number;
completed: number;
inDraft: number;
pending: number;
overdue: number;
};
nextAction: {
type: "continue_evaluation" | "start_live_voting" | "confirm_winners" | null;
projectId?: string;
roundId?: string;
url: string;
} | null;
}[];
upcomingDeadlines: {
roundId: string;
roundName: string;
juryGroupName: string;
deadline: Date;
daysRemaining: number;
isGracePeriod: boolean;
}[];
recentActivity: {
timestamp: Date;
type: "evaluation_submitted" | "live_vote_cast" | "coi_declared" | "confirmation_approved";
projectTitle: string;
roundName: string;
}[];
};
ASCII Mockup — Multi-Jury Dashboard
┌───────────────────────────────────────────────────────────────────────────┐
│ Jury Dashboard — Welcome, Dr. Alice Martin │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ 🔔 Upcoming Deadlines │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ ⏱ Jury 1 — Semi-finalist Selection │ April 30 │ ⚠️ 3 days left │ │
│ │ ⏱ Innovation Award Voting │ May 15 │ 18 days left │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ Your Jury Groups │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ Jury 1 — Semi-finalist Selection ACTIVE│ │
│ │ ────────────────────────────────────────────────────────────── │ │
│ │ Round 3: Jury 1 Evaluation │ │
│ │ ⏱ Closes April 30 (3 days remaining) │ │
│ │ │ │
│ │ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ │ │
│ │ │ 20 │ │ 12 │ │ 3 │ │ 5 │ │ │
│ │ │ Total │ │ Complete │ │ In Draft │ │ Pending │ │ │
│ │ └───────────┘ └───────────┘ └───────────┘ └───────────┘ │ │
│ │ │ │
│ │ Progress: ████████████████░░░░ 60% (12/20 complete) │ │
│ │ │ │
│ │ [ Continue Next Evaluation → ] [ View All Assignments ] │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ Innovation Award Jury DRAFT│ │
│ │ ────────────────────────────────────────────────────────────── │ │
│ │ Innovation Award Voting │ │
│ │ ⏱ Opens May 1 (not yet started) │ │
│ │ │ │
│ │ Awaiting assignment │ │
│ │ │ │
│ │ [ View Details ] │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ Recent Activity │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ ✅ Evaluation submitted — "OceanClean AI" (Jury 1) 2 hours ago │ │
│ │ ✅ Evaluation submitted — "DeepReef Monitor" (Jury 1) 1 day ago │ │
│ │ 🔒 COI declared — "WaveEnergy Solutions" (Jury 1) 3 days ago │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────────┘
Key Elements
- Deadline banner — Sorted by urgency, red for <5 days, orange for <10 days
- Jury group cards — One card per jury group the user belongs to
- Progress stats — Total, completed, in-draft, pending (with visual progress bar)
- Next action CTA — "Continue Next Evaluation" jumps to first pending project
- Grace period indicator — Shows if juror has extended deadline
- Recent activity feed — Last 5-10 actions (evaluations, COI, live votes)
Interactions
| Action | Behavior |
|---|---|
| Click "Continue Next Evaluation" | Navigate to first PENDING assignment's evaluation page |
| Click "View All Assignments" | Navigate to /jury/groups/[groupId]/assignments |
| Click jury group card header | Expand/collapse card (if multiple groups) |
| Click deadline item | Navigate to associated round's assignment page |
4. Jury Group Context — Switcher & Breadcrumbs
When a juror is on multiple juries, the UI must clearly show which jury context they're in.
Jury Group Switcher (Global Header)
┌───────────────────────────────────────────────────────────────────┐
│ [MOPC Logo] │ Jury: [ Jury 1 ▼ ] │ 🔔 3 │ Dr. Martin ▼ │
└───────────────────────────────────────────────────────────────────┘
↓ (dropdown)
┌─────────────────────────┐
│ ● Jury 1 (5 pending) │
│ ○ Innovation Award Jury │
│ ─────────────────────── │
│ Switch Jury Group │
└─────────────────────────┘
Breadcrumbs with Jury Context
Home > Jury 1 > Assignments > OceanClean AI > Evaluate
Home > Innovation Award Jury > Award Voting > Innovation Award
5. Onboarding Flow — First-Time Setup
When a juror is added to a new jury group, they must complete onboarding before evaluating.
Route
/jury/onboarding/[juryGroupId]
Onboarding Steps
Step 1: Welcome
Step 2: Your Expertise & Preferences
Step 3: Conflict of Interest Declaration
Step 4: Confirmation
Step 1: Welcome
┌──────────────────────────────────────────────────────────────────┐
│ Welcome to Jury 1 — Semi-finalist Selection │
│ │
│ You've been selected to evaluate projects for the │
│ Monaco Ocean Protection Challenge 2026. │
│ │
│ What to Expect: │
│ ──────────────────────────────────────────────────────────── │
│ • Evaluate up to 20 projects (Startups + Concepts) │
│ • Evaluation window: April 1 – April 30, 2026 │
│ • Scoring based on Innovation, Feasibility, Team, Relevance │
│ • Submit by the deadline to ensure your input counts │
│ │
│ Time Commitment: ~30 minutes per project │
│ Total estimated time: ~10 hours over 30 days │
│ │
│ [ Get Started → ] │
└──────────────────────────────────────────────────────────────────┘
Step 2: Expertise & Preferences
┌──────────────────────────────────────────────────────────────────┐
│ Your Expertise & Preferences │
│ ────────────────────────────────────────────────────────────── │
│ │
│ Select your areas of expertise (used for assignment matching): │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ☑ Marine Biology ☑ Ocean Technology │ │
│ │ ☐ Renewable Energy ☑ Environmental Policy │ │
│ │ ☐ Finance/Investment ☐ Social Impact │ │
│ │ ☐ Data Science ☐ Education │ │
│ │ ☐ Business Development ☐ Engineering │ │
│ │ │ │
│ │ Other: [____________________________] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Language preferences: │
│ ☑ English ☑ French ☐ Other: [________] │
│ │
│ Category preference (Startups vs Concepts): │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Startups [==========●========] Concepts │ │
│ │ 60% Startups / 40% Concepts │ │
│ │ │ │
│ │ This helps us assign projects that match your interests. │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Workload preference: │
│ ○ Standard (up to 20 projects) │
│ ● Reduced (up to 15 projects) — I have limited availability │
│ ○ Increased (up to 25 projects) — I can handle more │
│ │
│ [ ← Back ] [ Next Step → ] │
└──────────────────────────────────────────────────────────────────┘
Step 3: Conflict of Interest Declaration
┌──────────────────────────────────────────────────────────────────┐
│ Conflict of Interest Declaration │
│ ────────────────────────────────────────────────────────────── │
│ │
│ Please review the project list and declare any conflicts of │
│ interest. A COI exists if you have a personal, financial, or │
│ professional relationship with a project team. │
│ │
│ ┌────────────────────────────────────────────┬───────────────┐ │
│ │ Project │ COI? │ │
│ ├────────────────────────────────────────────┼───────────────┤ │
│ │ OceanClean AI (Startup) │ ○ None │ │
│ │ DeepReef Monitoring (Startup) │ ● Declare COI │ │
│ │ CoralGuard (Concept) │ ○ None │ │
│ │ WaveEnergy Solutions (Startup) │ ○ None │ │
│ │ BlueCarbonHub (Concept) │ ○ None │ │
│ │ ... (15 more) │ │ │
│ └────────────────────────────────────────────┴───────────────┘ │
│ │
│ COI Details for "DeepReef Monitoring": │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Type: [Professional ▼] │ │
│ │ Reason: │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Former colleague of team lead. Worked together at │ │ │
│ │ │ Marine Institute 2022-2023. No financial ties. │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ [ ✓ Save COI] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Note: You can declare additional conflicts later if needed. │
│ │
│ [ ← Back ] [ Next Step → ] │
└──────────────────────────────────────────────────────────────────┘
Step 4: Confirmation
┌──────────────────────────────────────────────────────────────────┐
│ Ready to Begin │
│ ────────────────────────────────────────────────────────────── │
│ │
│ Summary of Your Setup: │
│ ──────────────────────────────────────────────────────────── │
│ • Jury Group: Jury 1 — Semi-finalist Selection │
│ • Your expertise: Marine Biology, Ocean Tech, Env. Policy │
│ • Workload: Up to 15 projects (reduced load) │
│ • Category preference: 60% Startups / 40% Concepts │
│ • COI declared: 1 project (DeepReef Monitoring) │
│ │
│ By confirming, you agree to: │
│ ☑ Evaluate assigned projects fairly and impartially │
│ ☑ Complete evaluations by the deadline (April 30, 2026) │
│ ☑ Maintain confidentiality of all submissions │
│ ☑ Report any additional conflicts of interest as they arise │
│ │
│ Evaluation deadline: April 30, 2026 │
│ Grace period: +2 days if needed (request from admin) │
│ │
│ [ ← Back ] [ ✓ Confirm & Start ] │
└──────────────────────────────────────────────────────────────────┘
After confirmation, juror is redirected to /jury/groups/[juryGroupId]/assignments.
6. Assignment View — Project List
Route
/jury/groups/[juryGroupId]/assignments
Purpose
Show all assigned projects for a specific jury group, with filtering, sorting, and status tracking.
ASCII Mockup
┌──────────────────────────────────────────────────────────────────────┐
│ Jury 1 — Semi-finalist Selection │
│ Assignments │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ⏱ Evaluation Window: April 1 – April 30, 2026 (3 days remaining) │
│ │
│ Progress: 12/20 complete (60%) ████████████████░░░░ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐│
│ │ Filters: [All Statuses ▼] [All Categories ▼] 🔍 Search ││
│ │ Sort by: [Status ▼] ││
│ └─────────────────────────────────────────────────────────────────┘│
│ │
│ Pending (5) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ 📦 SeaWatch Monitor │ Startup │ ⬜ Pending │ │
│ │ Smart monitoring for reef health │ │
│ │ [Start Evaluation] │ │
│ ├──────────────────────────────────────────────────────────────┤ │
│ │ 📦 TidalEnergy Pro │ Startup │ ⬜ Pending │ │
│ │ Tidal energy harvesting system │ │
│ │ [Start Evaluation] │ │
│ ├──────────────────────────────────────────────────────────────┤ │
│ │ 📦 PlasticOcean Filter │ Concept │ ⬜ Pending │ │
│ │ Novel microplastic filtration concept │ │
│ │ [Start Evaluation] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ In Draft (3) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ 📦 BlueCarbon Hub │ Concept │ ⏳ Draft │ │
│ │ Carbon credit marketplace for ocean restoration │ │
│ │ Last saved 2 hours ago │ │
│ │ [Continue Evaluation] │ │
│ ├──────────────────────────────────────────────────────────────┤ │
│ │ 📦 CoralGuard AI │ Startup │ ⏳ Draft │ │
│ │ AI-powered coral reef protection │ │
│ │ Last saved 1 day ago │ │
│ │ [Continue Evaluation] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ Completed (12) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ 📦 OceanClean AI │ Startup │ ✅ Submitted │ │
│ │ AI-powered ocean debris collection robot │ │
│ │ Submitted 2 hours ago • Score: 4.2/5.0 │ │
│ │ [View Evaluation] │ │
│ ├──────────────────────────────────────────────────────────────┤ │
│ │ 📦 DeepReef Monitor │ Startup │ 🔒 COI Declared │ │
│ │ Deep-sea reef monitoring platform │ │
│ │ Not evaluated — conflict of interest │ │
│ │ [View COI Details] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ [ ← Back to Dashboard ] [ Export List (.csv) ] │
└──────────────────────────────────────────────────────────────────────┘
Filters & Sorting
| Filter | Options |
|---|---|
| Status | All, Pending, In Draft, Submitted, COI Declared |
| Category | All, Startup, Concept |
| Search | Text search on project title |
| Sort By | Options |
|---|---|
| Status (default) | Pending → Draft → Submitted |
| Deadline proximity | Projects needing evaluation first |
| Alphabetical | A-Z by project title |
| Category | Startup first, then Concept |
Card Elements
Each project card shows:
- Title with category badge
- Status indicator (⬜ Pending, ⏳ Draft, ✅ Submitted, 🔒 COI)
- Brief description (first 80 chars)
- Last action timestamp for drafts
- Score for submitted evaluations
- CTA button (Start / Continue / View)
7. Evaluation Interface — Core Workflow
Route
/jury/groups/[juryGroupId]/evaluate/[projectId]
Purpose
The heart of the jury experience. Jurors review project documents, score against criteria, and submit feedback.
Tab Structure
[📄 Documents] [📊 Scoring] [💬 Feedback] [ℹ️ Project Info]
ASCII Mockup — Documents Tab
┌──────────────────────────────────────────────────────────────────────┐
│ Evaluating: OceanClean AI (Startup) — Jury 1 │
│ ───────────────────────────────────────────────────────────────────│
│ [📄 Documents] [📊 Scoring] [💬 Feedback] [ℹ️ Project Info] │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ── Round 1 Application Documents ───────────────────────────────── │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 📄 Executive Summary.pdf [Download] [View] │ │
│ │ Uploaded: March 15, 2026 • 2.3 MB │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 📄 Business Plan.pdf [Download] [View] │ │
│ │ Uploaded: March 15, 2026 • 5.1 MB │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 📄 Technical Specifications.pdf [Download] [View] │ │
│ │ Uploaded: March 16, 2026 • 1.8 MB │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 🎥 Pitch Video.mp4 [Download] [Play] │ │
│ │ Uploaded: March 17, 2026 • 45 MB │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ (For Jury 2, this section would also show:) │
│ │
│ ── Round 2 Semi-finalist Documents ────────────────────────────────│
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 📄 Updated Business Plan.pdf [Download] [View] │ │
│ │ Uploaded: April 20, 2026 • 6.2 MB │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 🎥 Enhanced Pitch Video.mp4 [Download] [Play] │ │
│ │ Uploaded: April 21, 2026 • 52 MB │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Tip: Use browser's PDF viewer for inline review, or download to │
│ annotate locally. │
│ │
│ [ ← Previous Project ] [ Next Project → ] │
└──────────────────────────────────────────────────────────────────────┘
ASCII Mockup — Scoring Tab (Criteria Mode)
┌──────────────────────────────────────────────────────────────────────┐
│ Evaluating: OceanClean AI (Startup) — Jury 1 │
│ ───────────────────────────────────────────────────────────────────│
│ [📄 Documents] [📊 Scoring] [💬 Feedback] [ℹ️ Project Info] │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ Score each criterion on a scale of 1 (Poor) to 5 (Excellent) │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐│
│ │ Innovation & Impact (30%) ││
│ │ How novel is the solution? What is the potential ocean impact? ││
│ │ ││
│ │ 1 2 3 4 5 ││
│ │ ○ ○ ○ ● ○ ││
│ │ Poor Fair Good Very Excellent ││
│ │ Good ││
│ │ ││
│ │ Notes (optional): ││
│ │ ┌─────────────────────────────────────────────────────────────┐ ││
│ │ │ Strong use of AI for real-time debris detection. │ ││
│ │ │ Innovative approach but scalability uncertain. │ ││
│ │ └─────────────────────────────────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────────────────────────────────┐│
│ │ Feasibility & Execution (25%) ││
│ │ Is the plan realistic? Can the team execute? ││
│ │ ││
│ │ 1 2 3 4 5 ││
│ │ ○ ○ ● ○ ○ ││
│ │ ││
│ │ Notes: [_________________________________________________] ││
│ └─────────────────────────────────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────────────────────────────────┐│
│ │ Team & Expertise (25%) ││
│ │ Does the team have the right skills and experience? ││
│ │ ││
│ │ 1 2 3 4 5 ││
│ │ ○ ○ ○ ● ○ ││
│ └─────────────────────────────────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────────────────────────────────┐│
│ │ Ocean Relevance (20%) ││
│ │ How directly does this address ocean protection? ││
│ │ ││
│ │ 1 2 3 4 5 ││
│ │ ○ ○ ○ ○ ● ││
│ └─────────────────────────────────────────────────────────────────┘│
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ Overall Score: 3.8 / 5.0 (weighted average) │
│ │
│ Auto-saved 5 seconds ago │
│ │
│ [ ← Previous Project ] [💾 Save Draft] [ Next Project → ] │
└──────────────────────────────────────────────────────────────────────┘
ASCII Mockup — Feedback Tab
┌──────────────────────────────────────────────────────────────────────┐
│ Evaluating: OceanClean AI (Startup) — Jury 1 │
│ ───────────────────────────────────────────────────────────────────│
│ [📄 Documents] [📊 Scoring] [💬 Feedback] [ℹ️ Project Info] │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ Overall Feedback (Required) │
│ ────────────────────────────────────────────────────────────────── │
│ │
│ Provide constructive feedback on this project's strengths and │
│ areas for improvement. This will be shared with the team. │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Strengths: │ │
│ │ │ │
│ │ The AI-powered debris detection is innovative and addresses │ │
│ │ a critical ocean pollution challenge. The team has strong │ │
│ │ technical expertise in robotics and machine learning. │ │
│ │ │ │
│ │ Areas for Improvement: │ │
│ │ │ │
│ │ The business model lacks clarity on scalability and revenue │ │
│ │ streams. More detail needed on how the solution will be │ │
│ │ deployed at scale across different ocean environments. │ │
│ │ │ │
│ │ Recommendations: │ │
│ │ │ │
│ │ Consider partnerships with maritime authorities and port │ │
│ │ operators for pilot deployments. Explore subscription model │ │
│ │ for data insights. │ │
│ │ │ │
│ │ (Character count: 523 / 2000 recommended) │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Confidential Notes (Optional — NOT shared with team) │
│ ────────────────────────────────────────────────────────────────── │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Team lead seems overconfident. May need mentoring on market │ │
│ │ validation. │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Auto-saved 3 seconds ago │
│ │
│ [ ← Previous Project ] [💾 Save Draft] [✅ Submit Evaluation] │
└──────────────────────────────────────────────────────────────────────┘
Scoring Modes
| Mode | Interface | Use Case |
|---|---|---|
| Criteria | Multiple 1-5 scales with weights | Jury 1, Jury 2 (detailed evaluation) |
| Global | Single 1-10 score + feedback | Quick screening or award voting |
| Binary | Yes/No decision + justification | Fast filtering or pre-screening |
COI Declaration (Blocking Dialog)
If juror hasn't declared COI for this project yet:
┌──────────────────────────────────────────────────┐
│ Conflict of Interest Declaration Required │
│ │
│ Before evaluating "OceanClean AI", please confirm│
│ whether you have any conflict of interest. │
│ │
│ A COI exists if you have a personal, financial, │
│ or professional relationship with the team. │
│ │
│ ○ No conflict — I can evaluate fairly │
│ ○ Yes, I have a conflict: │
│ Type: [Financial ▼] │
│ Details: [_______________________________] │
│ │
│ [ Submit Declaration ] │
│ │
│ (Cannot proceed until COI is declared) │
└──────────────────────────────────────────────────┘
If COI is declared, juror is redirected back to assignment list and this project is marked "COI Declared" (no evaluation).
Auto-Save Behavior
- Trigger: Every 30 seconds while form has unsaved changes
- Indicator: "Auto-saved X seconds ago" in footer
- Status: Evaluation status remains
DRAFTuntil explicit "Submit Evaluation" - Recovery: If browser crashes, draft is restored on next visit
Submit Evaluation
When juror clicks "Submit Evaluation":
- Validation:
- All required criteria scored
- Feedback text provided (if
requireFeedback) - Window is open OR juror has grace period
- Confirmation dialog:
┌─────────────────────────────────────────┐ │ Submit Evaluation? │ │ │ │ Once submitted, you cannot edit this │ │ evaluation. Please review your scores │ │ and feedback before proceeding. │ │ │ │ Overall Score: 3.8 / 5.0 │ │ Feedback: 523 characters │ │ │ │ [ Cancel ] [ ✓ Confirm Submit ] │ └─────────────────────────────────────────┘ - On confirm:
- Set
Evaluation.status = SUBMITTED - Set
Evaluation.submittedAt = now() - Set
Assignment.isCompleted = true - Show success toast: "Evaluation submitted ✓"
- Navigate to next pending assignment OR back to assignment list
- Set
Navigation
| Action | Behavior |
|---|---|
| Previous Project | Jump to previous assignment in list (or disabled if first) |
| Next Project | Jump to next assignment in list (or disabled if last) |
| Save Draft | Explicit save (in addition to auto-save) |
| Submit Evaluation | Validate, confirm, submit, navigate to next |
| Close | Return to assignment list |
8. Live Finals Voting — Real-Time Interface
Route
/jury/live/[roundId]
Purpose
During the live finals ceremony, jury members vote in real-time as projects are presented.
Desktop Interface
┌──────────────────────────────────────────────────────────────────────┐
│ Live Finals — Monaco OPC 2026 │
│ Jury 3 Voting • Connected ● │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ NOW PRESENTING │ │
│ │ │ │
│ │ 🏆 Project 3 of 6 (Startups) │ │
│ │ │ │
│ │ OceanClean AI │ │
│ │ AI-powered ocean debris collection robot │ │
│ │ │ │
│ │ Team: Dr. Sarah Chen, Prof. Marc Dubois │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ ⏱ Voting Window: 2:30 remaining │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ YOUR SCORE │ │
│ │ │ │
│ │ Rate this presentation (1-10): │ │
│ │ │ │
│ │ [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] │ │
│ │ ● │ │
│ │ │ │
│ │ Quick Notes (optional): │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
│ │ │ Strong presentation. Clear value prop. Good Q&A. │ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [✓ Submit Vote] [Skip This Project] │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ Progress (Startups): │
│ [✓] Project 1 [✓] Project 2 [●] Project 3 [ ] Project 4 │
│ │
│ Up Next: TidalEnergy Pro │
│ │
│ [ Pause Voting ] [ View All Votes ] [ Connection: ● Live ] │
└──────────────────────────────────────────────────────────────────────┘
Mobile Interface
┌────────────────────────────────────────┐
│ Live Finals — Jury 3 │
│ ●Connected ⏱ 2:30 left │
├────────────────────────────────────────┤
│ │
│ NOW PRESENTING │
│ ──────────────────────────────────── │
│ OceanClean AI (Project 3/6) │
│ AI ocean debris collection │
│ │
│ ┌────────────────────────────────┐ │
│ │ Rate this presentation (1-10): │ │
│ │ │ │
│ │ [1] [2] [3] [4] [5] │ │
│ │ [6] [7] [8] [9] [10] │ │
│ │ ● │ │
│ │ │ │
│ │ Notes: │ │
│ │ [___________________________] │ │
│ │ │ │
│ │ [✓ Submit Vote] │ │
│ │ [Skip This Project] │ │
│ └────────────────────────────────┘ │
│ │
│ Progress: ██████░░░ 3/6 │
│ Up Next: TidalEnergy Pro │
│ │
└────────────────────────────────────────┘
Key Features
| Feature | Implementation |
|---|---|
| Real-time sync | WebSocket or server-sent events for cursor updates |
| Voting timer | Countdown clock, auto-closes voting window |
| Connection status | ●Live / ○Reconnecting / ✕Disconnected |
| Progress tracker | Visual indicator of which projects have been voted on |
| Skip option | Juror can skip if COI or missed presentation |
| Auto-save | Vote draft saved before submission in case of disconnect |
Voting States
type LiveVoteStatus =
| "not_started" // Ceremony hasn't begun
| "waiting_next" // Between presentations
| "voting_open" // Current project, voting window open
| "voting_closed" // Current project, window closed
| "ceremony_ended" // All projects presented
| "deliberation"; // Post-voting discussion period
Voting Submission Flow
1. Juror selects score (1-10)
2. (Optional) Adds quick notes
3. Clicks "Submit Vote"
4. Confirmation: "Vote submitted for OceanClean AI ✓"
5. UI shows "Vote Submitted — Waiting for next project"
6. When admin advances cursor → next project loads
Connection Loss Handling
┌────────────────────────────────────────┐
│ ⚠️ Connection Lost │
│ │
│ Attempting to reconnect... │
│ │
│ Your draft vote has been saved locally.│
│ It will sync when connection restores. │
│ │
│ [ Try Reconnect Now ] │
└────────────────────────────────────────┘
9. Winner Confirmation — Digital Signature
Route
/jury/confirmation/[proposalId]
Purpose
After live finals, jury members review and approve the proposed winner rankings.
ASCII Mockup
┌──────────────────────────────────────────────────────────────────────┐
│ Winner Confirmation — Monaco OPC 2026 │
│ Jury 3 Digital Signature │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ Please review the proposed finalist rankings and confirm. │
│ Your digital approval is required to finalize the results. │
│ │
│ ── STARTUP CATEGORY ───────────────────────────────────────────── │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 🥇 1st Place: OceanClean AI │ │
│ │ Avg Score: 8.6 / 10.0 │ │
│ │ Jury votes: 9, 8, 9, 8, 9 │ │
│ │ Audience vote: 8.4 (weight: 20%) │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 🥈 2nd Place: TidalEnergy Pro │ │
│ │ Avg Score: 8.2 / 10.0 │ │
│ │ Jury votes: 8, 8, 9, 7, 8 │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 🥉 3rd Place: SeaWatch Monitor │ │
│ │ Avg Score: 7.8 / 10.0 │ │
│ │ Jury votes: 8, 7, 8, 7, 9 │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ── CONCEPT CATEGORY ───────────────────────────────────────────── │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 🥇 1st Place: BlueCarbon Hub │ │
│ │ Avg Score: 8.4 / 10.0 │ │
│ │ Jury votes: 9, 8, 8, 8, 9 │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 🥈 2nd Place: CoralGuard AI │ │
│ │ Avg Score: 8.0 / 10.0 │ │
│ │ Jury votes: 8, 8, 7, 9, 8 │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 🥉 3rd Place: PlasticOcean Filter │ │
│ │ Avg Score: 7.6 / 10.0 │ │
│ │ Jury votes: 7, 8, 7, 8, 8 │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ Your Decision: │
│ ○ Approve these results │
│ ○ Request changes (provide feedback below) │
│ │
│ Comments (optional): │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ I agree with the rankings. The scores accurately reflect the │ │
│ │ quality of presentations. │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ☑ I certify that these rankings are fair and accurate based on │
│ the evaluation criteria. │
│ │
│ Digital Signature: Dr. Alice Martin │
│ Date: May 20, 2026 │
│ │
│ [ ← Back ] [ ✓ Submit Confirmation ] │
└──────────────────────────────────────────────────────────────────────┘
Confirmation States
type ConfirmationStatus =
| "pending" // Waiting for juror response
| "approved" // Juror approved rankings
| "rejected" // Juror requested changes
| "overridden"; // Admin overrode this juror's rejection
What Happens After Submission
If ALL jury members approve:
→ WinnerProposal.status = APPROVED
→ Admin can freeze results (makes them official)
If ANY jury member rejects:
→ WinnerProposal.status = REJECTED
→ Admin notified
→ Admin can either:
a) Adjust rankings and re-propose
b) Use override to force approval
If admin uses override:
→ WinnerProposal.status = OVERRIDDEN
→ WinnerProposal.overrideMode = "FORCE_MAJORITY" or "ADMIN_DECISION"
→ Results frozen with override logged in audit trail
10. Award Voting
Route
/jury/awards/[awardId]/vote
Purpose
For jurors on award juries (e.g., Innovation Award Jury), vote on award winners.
ASCII Mockup — Award Voting (PICK_WINNER Mode)
┌──────────────────────────────────────────────────────────────────────┐
│ Innovation Award — Voting │
│ Innovation Award Jury │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ Award Description: │
│ Recognizing the most innovative ocean technology solution with │
│ potential for global impact. │
│ │
│ Voting Window: May 1 – May 15, 2026 (5 days remaining) │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ Eligible Projects (AI-screened for innovation criteria): │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ ○ OceanClean AI (Startup) │ │
│ │ AI-powered ocean debris collection robot │ │
│ │ Innovation Score: 9.2 / 10.0 (AI assessment) │ │
│ │ [View Full Submission] │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ ● DeepReef Monitor (Startup) — YOUR SELECTION │ │
│ │ Autonomous deep-sea reef monitoring platform │ │
│ │ Innovation Score: 9.0 / 10.0 (AI assessment) │ │
│ │ [View Full Submission] │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ ○ CoralGuard AI (Concept) │ │
│ │ AI-powered coral reef protection system │ │
│ │ Innovation Score: 8.8 / 10.0 (AI assessment) │ │
│ │ [View Full Submission] │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ ○ SeaWatch Monitor (Startup) │ │
│ │ Smart monitoring for reef health │ │
│ │ Innovation Score: 8.5 / 10.0 (AI assessment) │ │
│ │ [View Full Submission] │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Justification (required): │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ DeepReef Monitor represents a breakthrough in autonomous │ │
│ │ deep-sea monitoring, enabling data collection in previously │ │
│ │ inaccessible environments. The innovation potential is highest.│ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Auto-saved 10 seconds ago │
│ │
│ [ ← Back to Awards ] [💾 Save Draft] [✅ Submit Vote] │
└──────────────────────────────────────────────────────────────────────┘
Award Voting Modes
| Mode | Interface | Description |
|---|---|---|
| PICK_WINNER | Radio buttons, pick one | Simple winner selection |
| RANKED | Drag-to-reorder list | Rank top N projects (e.g., top 3) |
| SCORED | 1-10 score per project | Score all eligible projects |
Award Vote Submission
1. Juror selects winner (or ranks/scores)
2. Provides justification text
3. Clicks "Submit Vote"
4. Confirmation: "Award vote submitted ✓"
5. Status: "Your vote has been recorded. Results will be announced after voting closes."
11. Navigation & Information Architecture
Full Sitemap
/jury/
├── dashboard (Multi-jury overview, landing page)
│
├── groups/[juryGroupId]/
│ ├── overview (Jury group details, progress)
│ ├── assignments (List of assigned projects)
│ ├── evaluate/[projectId] (Evaluation form)
│ └── settings (Juror preferences, COI management)
│
├── live/[roundId] (Live finals voting)
│
├── confirmation/[proposalId] (Winner confirmation)
│
├── awards/
│ ├── index (List of awards juror is on)
│ └── [awardId]/vote (Award voting form)
│
├── onboarding/[juryGroupId] (First-time setup per jury group)
│
├── profile (Juror profile, expertise, contact)
│
└── learning (Resources, guides, FAQs)
Breadcrumb Examples
Home > Jury Dashboard
Home > Jury 1 > Assignments
Home > Jury 1 > Assignments > OceanClean AI > Evaluate
Home > Live Finals > Round 7
Home > Winner Confirmation
Home > Awards > Innovation Award > Vote
Home > Onboarding > Jury 2
Global Navigation (Header)
┌─────────────────────────────────────────────────────────────────┐
│ [MOPC Logo] Jury: [Jury 1 ▼] | 🔔 3 | Dr. Martin ▼ │
└─────────────────────────────────────────────────────────────────┘
| Element | Description |
|---|---|
| MOPC Logo | Click → Dashboard |
| Jury Switcher | Dropdown to switch jury group context |
| Notifications | Bell icon with count → notification center |
| User Menu | Profile, settings, logout |
Footer Navigation (Minimal)
┌─────────────────────────────────────────────────────────────────┐
│ Help Center | Contact Support | Privacy | © MOPC 2026 │
└─────────────────────────────────────────────────────────────────┘
12. Responsive Design — Mobile Considerations
Mobile Breakpoints
| Breakpoint | Width | Adjustments |
|---|---|---|
| Desktop | ≥1024px | Full sidebar, multi-column layouts |
| Tablet | 768-1023px | Collapsed sidebar, single-column |
| Mobile | <768px | Bottom nav, stacked cards, simplified forms |
Mobile Dashboard
┌─────────────────────────────────┐
│ ☰ Jury Dashboard 🔔3 [👤] │
├─────────────────────────────────┤
│ │
│ Upcoming Deadlines │
│ ┌─────────────────────────────┐ │
│ │ ⏱ Jury 1 — 3 days left │ │
│ │ ⏱ Innovation — 18 days │ │
│ └─────────────────────────────┘ │
│ │
│ Your Jury Groups │
│ │
│ ┌─────────────────────────────┐ │
│ │ Jury 1 — Semi-finalist ⚡ │ │
│ │ ─────────────────────────── │ │
│ │ 12/20 complete (60%) │ │
│ │ ████████████░░░░ │ │
│ │ [Continue Evaluation →] │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Innovation Award Jury │ │
│ │ ─────────────────────────── │ │
│ │ Voting opens May 1 │ │
│ │ [View Details] │ │
│ └─────────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ [🏠] [📋] [🏆] [👤] │
└─────────────────────────────────┘
Mobile Evaluation Form
┌──────────────────────────────────┐
│ ← Evaluating: OceanClean AI │
├──────────────────────────────────┤
│ [📄 Docs] [📊 Score] [💬 Feed] │
├──────────────────────────────────┤
│ Innovation & Impact (30%) │
│ ──────────────────────────────── │
│ 1 2 3 4 5 │
│ ○ ○ ○ ● ○ │
│ │
│ Notes: │
│ ┌──────────────────────────────┐ │
│ │ Strong AI approach. │ │
│ │ Scalability concerns. │ │
│ └──────────────────────────────┘ │
│ │
│ Feasibility (25%) │
│ ──────────────────────────────── │
│ 1 2 3 4 5 │
│ ○ ○ ● ○ ○ │
│ │
│ (scroll for more criteria...) │
│ │
├──────────────────────────────────┤
│ Overall: 3.6/5.0 Auto-saved 5s │
├──────────────────────────────────┤
│ [💾 Save] [✅ Submit] [Next →] │
└──────────────────────────────────┘
Mobile Live Voting
┌────────────────────────────────┐
│ Live Finals — Jury 3 │
│ ● Connected ⏱ 2:15 left │
├────────────────────────────────┤
│ NOW PRESENTING │
│ ────────────────────────────── │
│ OceanClean AI (3/6) │
│ │
│ Rate (1-10): │
│ [1] [2] [3] [4] [5] │
│ [6] [7] [8] [9] [10] │
│ ● │
│ │
│ Notes: │
│ ┌────────────────────────────┐ │
│ │ Excellent presentation. │ │
│ └────────────────────────────┘ │
│ │
│ [✓ Submit Vote (8)] │
│ [Skip This Project] │
│ │
│ Progress: ██████░░░ 3/6 │
│ Up Next: TidalEnergy Pro │
└────────────────────────────────┘
13. Accessibility (WCAG AA Compliance)
Key Requirements
| Criterion | Implementation |
|---|---|
| Keyboard Navigation | All interactive elements focusable with Tab, activate with Enter/Space |
| Screen Reader Support | ARIA labels on all form controls, live regions for status updates |
| Color Contrast | 4.5:1 for text, 3:1 for UI components |
| Focus Indicators | Visible focus ring on all interactive elements |
| Error Messages | Clear, specific, associated with form fields |
| Headings | Semantic hierarchy (h1 > h2 > h3) |
| Skip Links | "Skip to main content" link at top of page |
Accessible Scoring Interface
<fieldset>
<legend>Innovation & Impact (30%)</legend>
<p id="innovation-desc">How novel is the solution? What is the potential ocean impact?</p>
<div role="radiogroup" aria-labelledby="innovation-label" aria-describedby="innovation-desc">
<label>
<input type="radio" name="innovation" value="1" />
<span>1 — Poor</span>
</label>
<label>
<input type="radio" name="innovation" value="2" />
<span>2 — Fair</span>
</label>
<label>
<input type="radio" name="innovation" value="3" />
<span>3 — Good</span>
</label>
<label>
<input type="radio" name="innovation" value="4" checked />
<span>4 — Very Good</span>
</label>
<label>
<input type="radio" name="innovation" value="5" />
<span>5 — Excellent</span>
</label>
</div>
</fieldset>
Screen Reader Announcements
// Auto-save feedback
<div role="status" aria-live="polite" aria-atomic="true">
Evaluation auto-saved 5 seconds ago
</div>
// Evaluation submission
<div role="alert" aria-live="assertive">
Evaluation submitted successfully. Navigating to next project.
</div>
// Live voting timer
<div role="timer" aria-live="off" aria-atomic="true">
2 minutes 30 seconds remaining
</div>
Keyboard Shortcuts
| Key | Action |
|---|---|
Tab / Shift+Tab |
Navigate between fields |
Enter / Space |
Activate button, select radio/checkbox |
Arrow Keys |
Navigate radio groups |
Esc |
Close dialogs |
Ctrl+S |
Save draft (evaluation form) |
Ctrl+Enter |
Submit evaluation (when all fields valid) |
14. Component Library — Reusable shadcn/ui Components
Core Components
| Component | Usage | File |
|---|---|---|
Card |
Jury group cards, project cards | @/components/ui/card |
Button |
All CTAs, form actions | @/components/ui/button |
Badge |
Status indicators, category tags | @/components/ui/badge |
Progress |
Assignment progress bars | @/components/ui/progress |
Tabs |
Document/Scoring/Feedback tabs | @/components/ui/tabs |
RadioGroup |
Scoring criteria, COI declaration | @/components/ui/radio-group |
Textarea |
Feedback fields, notes | @/components/ui/textarea |
Select |
Filters, dropdowns | @/components/ui/select |
Dialog |
COI declaration, confirmation dialogs | @/components/ui/dialog |
Toast |
Success/error notifications | @/components/ui/toast |
Skeleton |
Loading states | @/components/ui/skeleton |
Alert |
Warnings, deadlines | @/components/ui/alert |
Custom Jury Components
// src/components/jury/JuryGroupSwitcher.tsx
export function JuryGroupSwitcher({
groups: JuryGroup[],
currentGroupId: string,
onSwitch: (groupId: string) => void
}) { ... }
// src/components/jury/DeadlineCountdown.tsx
export function DeadlineCountdown({
deadline: Date,
showGracePeriod?: boolean
}) { ... }
// src/components/jury/AssignmentCard.tsx
export function AssignmentCard({
assignment: Assignment,
project: Project,
onAction: () => void
}) { ... }
// src/components/jury/EvaluationScoringForm.tsx
export function EvaluationScoringForm({
criteria: EvaluationCriterion[],
mode: "criteria" | "global" | "binary",
onScoreChange: (scores: CriterionScores) => void
}) { ... }
// src/components/jury/DocumentViewer.tsx
export function DocumentViewer({
submissionWindows: SubmissionWindow[],
projectFiles: ProjectFile[]
}) { ... }
// src/components/jury/LiveVotingInterface.tsx
export function LiveVotingInterface({
session: LiveVotingSession,
currentProject: Project,
onVote: (score: number, notes?: string) => void
}) { ... }
// src/components/jury/WinnerConfirmationForm.tsx
export function WinnerConfirmationForm({
proposal: WinnerProposal,
onConfirm: (approved: boolean, comments?: string) => void
}) { ... }
// src/components/jury/AwardVotingForm.tsx
export function AwardVotingForm({
award: SpecialAward,
eligibleProjects: Project[],
mode: AwardScoringMode,
onVote: (vote: AwardVote) => void
}) { ... }
15. State Management & Data Fetching
tRPC Queries (React Query)
// Dashboard
const { data: dashboard } = trpc.jury.getDashboard.useQuery();
// Assignments for a jury group
const { data: assignments } = trpc.jury.getAssignments.useQuery({
juryGroupId
});
// Single assignment with project and evaluation
const { data: assignment } = trpc.jury.getAssignmentDetail.useQuery({
assignmentId
});
// Project files grouped by submission window
const { data: files } = trpc.jury.getProjectDocuments.useQuery({
projectId,
roundId
});
// Evaluation form criteria
const { data: form } = trpc.jury.getEvaluationForm.useQuery({
roundId
});
// Live voting session
const { data: liveSession } = trpc.jury.getLiveSession.useQuery({
roundId
}, {
refetchInterval: 5000 // Poll every 5s
});
// Winner proposal
const { data: proposal } = trpc.jury.getWinnerProposal.useQuery({
proposalId
});
// Award details and eligible projects
const { data: award } = trpc.jury.getAwardForVoting.useQuery({
awardId
});
Mutations
// Start evaluation (creates draft Evaluation record)
const startEvaluation = trpc.jury.startEvaluation.useMutation();
// Auto-save evaluation draft
const autosaveEvaluation = trpc.jury.autosaveEvaluation.useMutation();
// Submit evaluation
const submitEvaluation = trpc.jury.submitEvaluation.useMutation();
// Declare COI
const declareCOI = trpc.jury.declareCOI.useMutation();
// Submit live vote
const submitLiveVote = trpc.jury.submitLiveVote.useMutation();
// Confirm winner proposal
const confirmWinners = trpc.jury.confirmWinnerProposal.useMutation();
// Submit award vote
const submitAwardVote = trpc.jury.submitAwardVote.useMutation();
// Update juror preferences (during onboarding)
const updatePreferences = trpc.jury.updatePreferences.useMutation();
Local State (Zustand or React Context)
// Current jury group context
const useJuryStore = create((set) => ({
currentJuryGroupId: null,
setCurrentJuryGroup: (id) => set({ currentJuryGroupId: id }),
}));
// Evaluation form draft (before auto-save)
const useEvaluationDraft = create((set) => ({
scores: {},
feedback: '',
updateScore: (criterion, score) => set((state) => ({
scores: { ...state.scores, [criterion]: score }
})),
updateFeedback: (text) => set({ feedback: text }),
clearDraft: () => set({ scores: {}, feedback: '' }),
}));
16. Error Handling & Edge Cases
Evaluation Window Closed
┌─────────────────────────────────────────┐
│ ⚠️ Evaluation Window Closed │
│ │
│ The deadline for Jury 1 evaluations was │
│ April 30, 2026. You can no longer │
│ submit new evaluations. │
│ │
│ If you need an extension, contact the │
│ admin to request a grace period. │
│ │
│ [ Contact Admin ] [ Back to List ] │
└─────────────────────────────────────────┘
Grace Period Active
┌─────────────────────────────────────────┐
│ 🕐 Grace Period Active │
│ │
│ You have been granted a 2-day extension.│
│ Your new deadline: May 2, 2026 │
│ │
│ [ Continue Evaluation ] │
└─────────────────────────────────────────┘
COI Prevents Evaluation
┌─────────────────────────────────────────┐
│ 🔒 Conflict of Interest Declared │
│ │
│ You declared a conflict of interest for │
│ "DeepReef Monitoring" on April 5, 2026. │
│ │
│ Reason: Former colleague of team lead. │
│ │
│ You cannot evaluate this project. This │
│ assignment has been removed from your │
│ list and may be reassigned. │
│ │
│ [ ← Back to Assignments ] │
└─────────────────────────────────────────┘
All Assignments Complete
┌─────────────────────────────────────────┐
│ ✅ All Evaluations Complete! │
│ │
│ You have submitted evaluations for all │
│ 20 assigned projects. Thank you! │
│ │
│ Next steps: │
│ • Results will be announced May 10 │
│ • You may be invited to live finals │
│ │
│ [ View Your Evaluations ] │
│ [ Return to Dashboard ] │
└─────────────────────────────────────────┘
Live Voting Not Yet Started
┌─────────────────────────────────────────┐
│ ⏱ Live Finals Not Yet Started │
│ │
│ The live finals ceremony begins on: │
│ May 20, 2026 at 18:00 CET │
│ │
│ This page will activate when the │
│ ceremony starts. │
│ │
│ [ Set Reminder ] [ ← Dashboard ] │
└─────────────────────────────────────────┘
Juror on Multiple Juries — Context Confusion
Prevention:
- Jury switcher in global header (always visible)
- Breadcrumbs showing current jury group
- Color-coded badges per jury group (e.g., Jury 1 = blue, Jury 2 = green)
- Separate assignment lists per jury group (no mixing)
17. Performance Optimizations
Code Splitting
// Lazy-load heavy components
const LiveVotingInterface = lazy(() => import('@/components/jury/LiveVotingInterface'));
const DocumentViewer = lazy(() => import('@/components/jury/DocumentViewer'));
const WinnerConfirmationForm = lazy(() => import('@/components/jury/WinnerConfirmationForm'));
// Use Suspense with skeleton
<Suspense fallback={<EvaluationFormSkeleton />}>
<EvaluationScoringForm {...props} />
</Suspense>
Data Prefetching
// On dashboard mount, prefetch next assignment
useEffect(() => {
if (nextAssignmentId) {
trpcClient.jury.getAssignmentDetail.prefetch({ assignmentId: nextAssignmentId });
}
}, [nextAssignmentId]);
// On assignment list, prefetch first pending project
useEffect(() => {
if (firstPendingAssignmentId) {
trpcClient.jury.getAssignmentDetail.prefetch({
assignmentId: firstPendingAssignmentId
});
}
}, [firstPendingAssignmentId]);
Optimistic Updates
// Auto-save with optimistic update
const autosave = trpc.jury.autosaveEvaluation.useMutation({
onMutate: async (newData) => {
// Cancel outgoing refetches
await utils.jury.getEvaluation.cancel({ evaluationId });
// Snapshot current value
const previous = utils.jury.getEvaluation.getData({ evaluationId });
// Optimistically update to new value
utils.jury.getEvaluation.setData({ evaluationId }, (old) => ({
...old,
...newData,
updatedAt: new Date(),
}));
return { previous };
},
onError: (err, newData, context) => {
// Rollback on error
utils.jury.getEvaluation.setData({ evaluationId }, context.previous);
},
});
18. Testing Scenarios
Unit Tests
// Test evaluation form validation
describe('EvaluationScoringForm', () => {
it('requires all criteria to be scored before submission', () => { ... });
it('calculates weighted average correctly', () => { ... });
it('saves draft without validation', () => { ... });
});
// Test deadline countdown
describe('DeadlineCountdown', () => {
it('shows days remaining when >24h left', () => { ... });
it('shows hours remaining when <24h left', () => { ... });
it('shows "overdue" when past deadline', () => { ... });
it('shows grace period indicator when active', () => { ... });
});
Integration Tests
// Test full evaluation workflow
describe('Jury Evaluation Flow', () => {
it('juror can declare COI and skip evaluation', () => { ... });
it('juror can save draft, navigate away, and resume', () => { ... });
it('juror can submit evaluation and see success message', () => { ... });
it('juror cannot submit past deadline without grace period', () => { ... });
it('auto-save triggers every 30s', () => { ... });
});
// Test multi-jury context switching
describe('Multi-Jury Navigation', () => {
it('jury switcher shows all user's jury groups', () => { ... });
it('switching jury updates assignment list', () => { ... });
it('breadcrumbs reflect current jury context', () => { ... });
});
E2E Tests (Playwright)
test('juror completes full evaluation from dashboard', async ({ page }) => {
await page.goto('/jury/dashboard');
await page.click('text=Continue Next Evaluation');
// COI declaration
await page.click('text=No conflict');
await page.click('text=Submit Declaration');
// Score criteria
await page.click('[data-criterion="innovation"] [value="4"]');
await page.click('[data-criterion="feasibility"] [value="3"]');
await page.click('[data-criterion="team"] [value="4"]');
await page.click('[data-criterion="ocean-relevance"] [value="5"]');
// Enter feedback
await page.fill('[name="feedback"]', 'Strong innovation, feasibility needs improvement.');
// Submit
await page.click('text=Submit Evaluation');
await expect(page.locator('text=Evaluation submitted')).toBeVisible();
// Verify navigation to next assignment
await expect(page).toHaveURL(/\/evaluate\/.+/);
});
19. Migration from Current UI
Page Mapping
| Current Route | New Route | Migration Notes |
|---|---|---|
/jury/page.tsx |
/jury/dashboard |
Add multi-jury support, deadline widget |
/jury/stages/page.tsx |
(remove) | Replaced by jury group overview |
/jury/stages/[stageId]/assignments/page.tsx |
/jury/groups/[juryGroupId]/assignments |
Add filters, status indicators |
/jury/stages/[stageId]/projects/[projectId]/evaluate/page.tsx |
/jury/groups/[juryGroupId]/evaluate/[projectId] |
Add multi-window doc viewer, COI blocking |
/jury/stages/[stageId]/live/page.tsx |
/jury/live/[roundId] |
Add real-time sync, mobile UI |
/jury/awards/[id]/page.tsx |
/jury/awards/[awardId]/vote |
Add voting interface |
| (new) | /jury/confirmation/[proposalId] |
New winner confirmation page |
| (new) | /jury/onboarding/[juryGroupId] |
New onboarding flow |
Data Migration
// Convert old stageId references to roundId
async function migrateJuryRoutes() {
// Update assignments query to use roundId
const assignments = await prisma.assignment.findMany({
where: { userId: currentUserId },
include: {
round: true, // was "stage"
project: true
},
});
// Group by jury group instead of stage
const byJuryGroup = groupBy(assignments, 'round.juryGroupId');
return byJuryGroup;
}
20. Future Enhancements
Phase 2 Features
| Feature | Description | Priority |
|---|---|---|
| Peer review discussions | Anonymous commenting on peer evaluations | Medium |
| Jury chat | Real-time chat during deliberation periods | Low |
| Bulk evaluation | Compare 2-3 projects side-by-side | Medium |
| AI evaluation assistant | AI suggests scores based on rubric | Low |
| Evaluation templates | Save feedback snippets for reuse | Low |
| Mobile app | Native iOS/Android for live voting | Medium |
| Offline mode | Evaluate drafts offline, sync when online | Low |
| Evaluation analytics | Per-juror scoring patterns, outlier detection | Medium |
Summary
This Jury UI redesign transforms the jury member experience with:
- Multi-jury dashboard — Clear overview of all jury commitments
- Jury group switcher — Easy context switching for jurors on multiple juries
- Cross-round document visibility — Jury 2 sees Round 1 + Round 2 docs seamlessly
- Onboarding flow — Expertise selection, COI pre-declaration, preferences
- Enhanced evaluation interface — Tabbed document viewer, auto-save, deadline countdown
- Live finals voting — Real-time mobile-responsive voting interface
- Winner confirmation — Digital signature workflow for official results
- Award voting — Separate interface for special award juries
- Accessibility-first — WCAG AA compliance, keyboard nav, screen reader support
- Mobile-optimized — Responsive design for all devices, especially live voting
The UI is built with shadcn/ui components, tRPC for type-safe data fetching, and follows the redesigned data model with JuryGroups, Rounds, and SubmissionWindows.
Total Page Count: 20+ pages across dashboard, assignments, evaluation, live voting, confirmation, awards, onboarding
Total Lines: 900+ lines of comprehensive documentation