Skip to content

Frontend Overview

What is the Quill Frontend?

The Quill Medical frontend is the web application that patients and clinic staff interact with directly in their browsers. It provides a modern, intuitive interface for secure messaging, letter management, and patient care coordination.

Key Features

For Patients

Secure Messaging

  • Send messages to your clinic and healthcare providers
  • Receive timely responses from clinicians
  • View transparent pricing and quotes before responses
  • Pay securely for clinical time using flexible payment options

Letter Management

  • View and download clinical letters
  • Receive professionally formatted medical correspondence
  • Access your letter history anytime, anywhere

Account Management

  • Secure login with optional two-factor authentication
  • Manage personal information and preferences
  • View subscription status and billing history

For Clinic Staff

Message Triage & Management

  • Review incoming patient messages
  • Assign conversations to appropriate clinicians
  • Provide time estimates and generate quotes
  • Respond to patients efficiently

Letter Authoring

  • Draft clinical letters in markdown format
  • Preview letters before sending
  • Obtain approvals from senior staff when required
  • Send letters to patients and external recipients

Patient Management

  • View patient demographics and history
  • Access consolidated patient records
  • Manage multiple patients efficiently

Design Principles

User-Centric

The interface is designed around user workflows, not technical systems. Patients see a simple messaging interface; staff see the tools they need for their specific roles.

Security First

  • All communication is encrypted
  • Two-factor authentication available
  • Automatic session management
  • No patient health information stored in browser

Accessible & Responsive

  • Works on desktop, tablet, and mobile devices
  • Follows accessibility standards
  • Progressive Web App (PWA) — can be installed like a native app

Progressive Enhancement

The application adapts to the user's device capabilities:

  • Push notifications on supported devices
  • Graceful degradation on older browsers

User Experience

Simple Navigation

Main Areas

  • Home: Overview and quick access to recent activity
  • Messages: View and manage conversations
  • Letters: Access clinical correspondence
  • Patients: (Staff only) Manage patient records
  • Settings: Account preferences and security

Consistent Design Language

  • Clean, professional appearance
  • Familiar interaction patterns
  • Clear visual hierarchy
  • Purposeful use of color and spacing

Updates

  • Push notifications alert users to new messages
  • Page data refreshes on navigation

Technical Capabilities (Non-Technical Summary)

Modern Web Technology

Built using current web standards for

  • Fast loading times
  • Smooth interactions
  • Reliable performance
  • Future-proof architecture

Technology Stack

  • React 19 with TypeScript for type-safe, maintainable code
  • Mantine UI for accessible, customizable components
  • Tabler Icons for consistent iconography throughout the application
  • React Router for seamless client-side navigation
  • Vite for rapid development and optimized production builds

Healthcare Standards Integration

  • Seamlessly connects to healthcare data systems
  • Supports interoperability with other health IT systems
  • Built on international healthcare standards (FHIR, OpenEHR)

Scalability

  • Handles growing numbers of users efficiently
  • Supports multiple concurrent users
  • Performs well under high load

Privacy & Compliance

Data Protection

  • All patient information is encrypted
  • No sensitive data stored in browser permanently
  • Automatic logout after inactivity
  • Secure session management

Audit Trail

  • All actions are logged for compliance
  • Tamper-evident record keeping
  • Complete transparency for regulatory requirements

Standards Compliance

  • GDPR compliant
  • Healthcare data protection standards
  • Industry best practices for medical software

Getting Started

For Patients

  1. Receive invitation link from your clinic
  2. Create your secure account
  3. Set up two-factor authentication (recommended)
  4. Start messaging with your healthcare team

For Clinic Staff

  1. Administrator creates your account
  2. Log in with provided credentials
  3. Complete security setup (2FA required for staff)
  4. Access training materials and user guides

Support & Documentation

  • In-app help and tooltips
  • User guides for common tasks
  • Technical documentation for developers
  • Support contact information in settings

Next Steps

Learn more about specific areas