LD Panel Prototypes
Static HTML prototypes showcasing the UI/UX for each key section of the agentic panel system.
1
Dashboard
Home view with statistics, quick actions, and recent activity
- Statistics grid showing agents, panels, sessions, and scoring systems
- Quick action cards for common tasks
- Recent session history with scores
2
Agent Library
Browse and manage all agent personas with search and filtering
- Grid layout with 8 example agent personas
- Agent cards showing demographics, tags, and key concerns
- Search and filter controls (category, region)
- Quick actions to edit or add to panel
3
Agent Builder
Multi-step form for creating detailed agent personas
- 4-step progress indicator (Demographics, Political Profile, Communication, Key Concerns)
- Step 1 form with comprehensive demographic fields
- AI Helper sidebar with suggestions based on inputs
- Form validation and help text
4
Panel Builder
Select agents and organize them into focus group panels
- Two-column layout: Available agents (left) and Selected agents (right)
- Panel details form with name, description, and metadata
- Compact agent cards with click-to-select interaction
- Search and category filtering
5
Messaging Interface
Submit political messages and select scoring systems for evaluation
- Large message composer with example education policy content
- 3 pre-configured scoring systems to choose from
- Option to create custom scoring system
- Panel preview sidebar showing selected agents
- Output format selector (detailed, summary, numeric)
6
Results Dashboard
Comprehensive results view with agent feedback and scoring
- Overall summary banner with key metrics
- Key insights and recommendations
- 4 detailed agent response cards with realistic feedback
- Multi-criteria scoring breakdown with visual bars
- Sentiment indicators (positive/neutral/negative)
- Export options (PDF, CSV, JSON)
About These Prototypes
These static HTML prototypes demonstrate the complete user journey through the LD Panel system: from creating agents and organizing panels, to testing political messaging and reviewing detailed feedback. They showcase the Lib Dem branding (gold #FAA61A) and include realistic example data to help visualize how the system will work in practice.
Next Steps:
- Review the UI/UX flow across all pages
- Gather feedback on design and functionality
- Proceed with implementation of Phase 2: Agent Management