Designing Patient-Centric EHR Interfaces: A Mini-Project for Web Dev Students

As cloud EHR adoption grows and patient engagement becomes a strategic priority, web development classes can turn market trends into practical learning. Recent market research projects strong growth in US cloud-based medical records management and highlights patient-centric solutions and remote access as major drivers. This mini-project helps students build lightweight patient portal prototypes that prioritize clear consent flows, accessible interfaces, and simple data visualizations using FHIR mock data. It's a compact, repeatable web development project for students, teachers, and lifelong learners focused on EHR UX and patient engagement.

Project Overview

Students will deliver a clickable prototype and a working demo that reads from a mock FHIR server, displays a small set of health records (medications, allergies, vitals), and implements a granular consent flow for data sharing. Emphasis is on accessible design, simple charts, and usability testing rather than complete clinical functionality.

Learning Objectives

• Understand FHIR data shapes and how to use FHIR mock data to power UI prototypes.
• Apply core EHR UX principles: clarity, task-based flows, and patient control over data.
• Design and test consent flows that meet user expectations and accessibility standards.
• Run small-scale usability testing with diverse participants and iterate on results.

Requirements & Constraints

• Lightweight demo: no real PHI, use anonymized FHIR mock data only.
• Support responsive layouts and WCAG AA minimum for color and contrast.
• Implement explicit consent options for sharing specific record types.
• Provide at least two simple visualizations (e.g., blood pressure trend, medication adherence).
• Document usability findings and accessibility checklist.

Suggested Tech Stack

• Frontend: React or Vue, or vanilla JS for fundamentals.
• Components: Tailwind or Bootstrap for rapid UI prototypes.
• Charts: Chart.js or D3 for simple visualizations.
• Mock server: json-server, Mock Service Worker (MSW), or a HAPI FHIR sandbox for FHIR mock data.
• Testing: Lighthouse, axe-core for accessibility, and basic user tasks for usability testing.

Step-by-Step Classroom Tasks

1. Kickoff (30–45 min): Present market context: cloud EHR growth and the shift toward patient engagement. Show a few real patient portals to analyze.
2. Data model (classwork): Map required FHIR resources (Patient, Observation, MedicationStatement, AllergyIntolerance, Consent) and create a small JSON fixture or use a sandbox.
3. Wireframes (1–2 hours): Sketch screens: login, dashboard, record viewer, consent manager, and a share/export modal.
4. Implementation (2–4 class sessions): Build, read from the FHIR mock server, render records, and add two visualizations.
5. Usability testing (2–3 sessions): Recruit 6–8 testers representing diverse ages, language backgrounds, and accessibility needs. Run task-based tests and collect SUS and task success rates.
6. Iteration & deliverables: Revise based on feedback and submit a short report with screenshots, accessibility checklist, and a link to the repo or hosted demo.

Consent Flow Wireframe & Microcopy Tips

Design a consent manager that lets users toggle sharing per data category. Small, actionable tips:

• Use clear headings: "Share meds" vs. "Allow full access" — avoid clinical jargon.
• Show consequences inline: "Sharing medications lets your pharmacist view prescriptions."
• Include short timestamps and an audit link: "Last shared: 2026-03-12."
• Make revocation simple: a single toggle and a confirmation that explains effects.

Practical Usability Testing Plan

Keep this lightweight but actionable:

• Tasks: locate last blood pressure entry, share medication list with a provider, revoke access.
• Metrics: task success rate, time on task, error types, and System Usability Scale (SUS) score.
• Accessibility checks: keyboard navigation, screen reader labels, and color contrast verification.
• Deliverable: a 1–2 page synthesis that lists top 3 usability issues and recommended fixes.

Grading Rubric & Extensions

Evaluation can weigh functionality (30%), EHR UX and consent clarity (30%), accessibility and usability testing (25%), and code quality/documentation (15%).

Extensions for advanced students: connect the portal to a cloud-hosted FHIR server, implement SMART on FHIR OAuth for authentication, or add natural-language summaries using AI (see our guide on using AI in the classroom). Gamification elements for patient engagement are another option (learn more about gamification).

Wrap-up

This mini-project converts industry momentum around cloud EHR and patient engagement into hands-on learning. Students come away with real experience reading structured FHIR mock data, solving EHR UX problems, and running inclusive usability research. For broader UI trends that may influence your design choices, see our piece on how UI changes impact user experience in 2026. Ready-made, focused, and repeatable, this project is ideal for a module in health-tech courses or capstone projects in web development.