Skip to content

UI Flows and Form Mockups

Last Updated: 2026-02-03
Version: 1.0
Status: Design Phase

Document Purpose

This document provides detailed UI flows and visual mockups for all MedExpertMatch user interfaces. All mockups are created using PlantUML format, which can be rendered using PlantUML tools or integrated into documentation systems.

UI Pages Overview

MedExpertMatch includes the following main UI pages:

  1. Home Page (/) - Dashboard and navigation
  2. Find Specialist (/match) - Specialist matching interface
  3. Consultation Queue (/queue) - Queue prioritization and management
  4. Network Analytics (/analytics) - Expertise network analysis
  5. Case Analysis (/analyze/{caseId}) - AI-powered case analysis
  6. Regional Routing (/routing) - Multi-facility routing
  7. Doctor Profile (/doctors/{doctorId}) - Doctor details and history
  8. Synthetic Data (/admin/synthetic-data) - Admin synthetic data generation (Administrator only)
  9. Graph Visualization (/admin/graph-visualization) - Admin graph view (Administrator only)

Page 1: Home Page (/)

Purpose

Main dashboard providing navigation to all features and overview of system status.

UI Flow

uml diagram

Form Mockup

uml diagram

Page 2: Find Specialist (/match)

Purpose

Interface for finding and matching specialists to medical cases (Use Case 1: Specialist Matching).

UI Flow

uml diagram

Form Mockup

uml diagram

Page 3: Consultation Queue (/queue)

Purpose

Prioritize and manage consultation requests (Use Case 3: Queue Prioritization).

UI Flow

uml diagram

Form Mockup

uml diagram

Page 4: Network Analytics (/analytics)

Purpose

Analyze network expertise and identify top specialists (Use Case 4: Network Analytics).

UI Flow

uml diagram

Form Mockup

uml diagram

Page 5: Case Analysis (/analyze/{caseId})

Purpose

AI-powered case analysis with differential diagnosis and recommendations (Use Case 5: Decision Support).

UI Flow

uml diagram

Form Mockup

uml diagram

Page 6: Regional Routing (/routing)

Purpose

Route complex cases to appropriate facilities and specialists (Use Case 6: Regional Routing).

UI Flow

uml diagram

Form Mockup

uml diagram

Page 7: Doctor Profile (/doctors/{doctorId})

Purpose

Display detailed doctor profile, experience, and case history.

UI Flow

uml diagram

Form Mockup

uml diagram

Page 8: Synthetic Data (/admin/synthetic-data)

Purpose

Admin interface for generating synthetic test data for demos. Visible only when Administrator is selected in the user selector (?user=admin).

UI Flow

uml diagram

Form Mockup

uml diagram

Common UI Components

uml diagram

Success Message Component

uml diagram

Error Message Component

uml diagram

User Flow Diagrams

Complete User Journey: Specialist Matching

uml diagram

Complete User Journey: Queue Prioritization

uml diagram

Responsive Design Considerations

Mobile View

uml diagram

Accessibility Features

uml diagram

UI/UX Guidelines

Color Scheme

uml diagram

Typography

uml diagram

Spacing

uml diagram


Last updated: 2026-01-27