Loading...

Accessible ECG Interface Design & Development

As a UX/UI Designer and Front-end Developer, I designed and developed an accessible ECG mobile application interface for Diplora's mHealth platform, serving both healthcare professionals requiring diagnostic data and elderly patients (65+) needing simple device status confirmation.

  • Role: UX/UI Designer & Flutter Developer
  • Duration: Sep 1, 2025 – Jan 13, 2026
  • Stack: Flutter, Dart, BLE, WCAG 2.1 AA
  • Deliverables: Research Report, Design System, Prototypes, MVP
  • Status: Completed - Production Ready
Diplora ECG Application Interface

Overview

Diplora's mHealth ECG platform needed an accessible front-end for elderly cardiovascular patients. The challenge: design an interface that serves two distinct user groups—healthcare professionals needing diagnostic accuracy and elderly patients aged 65+ needing simple reassurance that their device is working correctly.

The project addressed critical accessibility barriers including presbyopia (age-related farsightedness), reduced contrast sensitivity, slower touch interactions, and varying digital literacy levels. Through extensive user research, I identified that elderly patients prioritize reassurance and simplicity over comprehensive medical data.

The result is a Flutter MVP that implements WCAG 2.1 AA accessibility standards, features real-time Bluetooth connectivity with ECG sensors, and provides the persistent "Device Working" confirmation that 70% of surveyed elderly users explicitly requested.

Methodology

The project used a hybrid Waterfall-Agile approach, starting with structured research and planning, then shifting to Agile during design validation and development. This allowed for comprehensive upfront research while maintaining flexibility for user-centered iteration.

Research Methods Applied:

Research & Key Findings

Research revealed critical barriers preventing elderly users from engaging with health monitoring apps. The findings directly informed all design decisions.

54%
Found health apps too complicated
70%
Wanted "Device Working" confirmation
14%
Cited small text as barrier (46+)
66%
Preferred video tutorials

Brand & Design System Development

Built Diplora's visual identity and established accessibility-first design standards as the foundation for all interface decisions.

Aa

Typography

  • Min 18pt font size
  • Clear hierarchy
  • High legibility

Contrast

  • 4.5:1 ratio
  • WCAG 2.1 AA
  • All text covered

Touch Targets

  • 44x44px minimum
  • Motor control support
  • Consistent spacing

User Requirements & Features

Using the MOSCOW method, I prioritized features based on accessibility and clinical validation requirements. Must-have features address the core needs identified in research.

🔐

Accessibility Compliance

  • WCAG 2.1 AA
  • Large text & buttons
  • High contrast
📱

Simple Onboarding

  • 4 essential screens
  • Visual guidance
  • Setup in minutes

Device Status

  • Working confirmation
  • Battery indicator
  • Connection status
🔗

Bluetooth Pairing

  • Real BLE connection
  • Visual guidance
  • Error handling
📞

Emergency Contact

  • Easy setup
  • Quick access
  • Peace of mind
📝

Symptom Logging

  • Simple categories
  • Local storage
  • Quick entry

Research Methods & Deliverables

Conducted comprehensive mixed-methods research to understand both clinical requirements and elderly user needs. The research phase produced detailed documentation that informed all subsequent design and development decisions.

📚 Literature Review

Comprehensive review of WCAG 2.1 AA standards, elderly UX research, and medical device regulations to establish accessibility requirements and compliance frameworks.

Competitor Analysis

Evaluated 6 device-connected health apps (AliveCor, myPhonak, Garmin, Omron, Apple Health, FreeStyle) to identify accessibility gaps and opportunities.

👨‍⚕️ Stakeholder Interviews

Interviewed cardiologists and GPs to gather clinical requirements, understand device limitations, and validate that the app shows device status only (never diagnostic information).

🗣️ Patient Interviews

Conducted in-depth interviews with elderly Holter monitor users (70+) to understand real-world pain points, anxieties, and what actually builds confidence with monitoring devices.

📊 Survey Analysis

Quantitative survey with 50 respondents aged 18-75+ on health app usability, revealing that 54% find apps too complicated and 70% want "Device Working" confirmation.

🎯 Internal Feedback

Reviewed existing Figma designs with Diplora stakeholders to validate design direction and gather feedback from the company team before prototyping.

Competitor Analysis

Evaluated 6 device-connected health apps (AliveCor, myPhonak, Garmin, Omron, Apple Health, FreeStyle) to identify accessibility gaps and opportunities.

Competitor
Device Type
Onboarding
What Works
What Doesn't
AliveCor
EKG device
3 steps: Connect → Place fingers → Record
Real-time EKG feedback, clear finger placement
Small text, medical jargon, no animations
myPhonak
Hearing aid
Pairing mode → Device detection → Audio test
Direct hearing aid connection, large volume controls
Technical audio settings assume familiarity
Garmin Connect
Fitness trackers
Device selection → Bluetooth pairing → Profile setup
Excellent visual pairing guide, clear status indicators
Too many features, assumes tech knowledge
Omron Connect
Blood pressure monitors
Model selection → Auto-pair → First reading
Large health readings, medical focus, clear layout
No interactive device guidance
Apple Health
Various devices
Third-party apps → Permissions → Data integration
System accessibility support, voice control
Complex multi-app setup, overwhelming interface
FreeStyle LibreLink
Glucose monitors
Safety warnings → Account → Sensor scan tutorial
Simple scanning process, audio feedback
Medical terminology assumes health literacy

User Personas

Two primary user personas informed the design, representing the distinct needs of elderly patients and their healthcare providers.

Persona 1

Persona 1: Primary User

Represents elderly patients aged 65+ who prioritize device reassurance and simple operation over comprehensive medical data.

Persona 2

Persona 2: Secondary User

Healthcare professionals and caregivers who need diagnostic data access while ensuring elderly users have simplified, reassuring experiences.

Prototyping & User Testing

Conducted iterative user testing with elderly users (ages 56-70+) to validate accessibility-first design patterns. Six major design iterations addressed user feedback and expert recommendations.

What Worked Well

  • Large touch targets (44x44px) were easy to hit and navigate
  • "Device Working" confirmation provided essential reassurance
  • Simplified dashboard layout with only essential information
  • Text labels with icons improved clarity significantly
  • Simple three-block layout felt intuitive to elderly users

Key Iterations

  • Button label clarity: "Add Complaint" → "Log Symptom"
  • Icon addition: Added text labels to all navigation elements
  • Help button: Made visible on home screen for easy access
  • Battery display: De-emphasized to reduce visual clutter
  • Logbook: Simplified from tabs to unified list view
  • Device connection: Auto-start search matching familiar phone Bluetooth behavior

Design Iterations Based on Feedback

The design underwent six major iterations based on combined feedback from user testing, expert review, and internal stakeholder input. Each iteration was informed by real user behavior and expert guidance.

Iteration 1: Button Label Clarity

Iteration 1: Button Label Clarity

Issue: Test users confused by "Add Complaint"—Faye thought it meant complaining about the sensor itself

Change: Renamed to "Log Symptom" throughout the interface; "Detected Activity" → "Activity History"

Impact: Users immediately understood each button's purpose

Iteration 2: Icon Replacement

Iteration 2: Icon Replacement

Issue: Placeholder icons didn't clearly indicate function; confusing for elderly users

Change: Replaced unclear icons with standard health app iconography; added text labels to all navigation items

Impact: Functions became immediately recognizable

Iteration 3: Help Button Addition

Iteration 3: Help Button Addition

Issue: Mildred couldn't find instructions when needed; Ben requested "easy Help button"

Change: Added visible "Help" button to main navigation, always accessible from home screen

Impact: Users can access instructions at any point without navigating through settings

Iteration 4: Battery Display De-emphasis

Iteration 4: Battery Display De-emphasis

Issue: Large battery indicator took significant space; Mildred said "It's too big"

Change: Reduced battery to small status indicator in persistent status bar; only draws attention when charging threshold reached

Impact: Refocused home screen hierarchy on actionable items, reduced visual clutter

Iteration 5: Logbook Simplification

Iteration 5: Logbook Simplification

Issue: Separate tabs for "Review Alerts" and "History" with filtering options was overcomplicated

Change: Combined into single unified list; actionable items emphasized, removed unnecessary filtering

Impact: Cleaner, less technical interface that's easier to navigate

High-Fidelity Prototypes

Designed high-fidelity prototypes based on feedback from low-fidelity testing. These detailed, interactive prototypes incorporated refined design elements and enhanced functionality, providing an accurate representation of the final product ready for user validation.

Implementation & Development

Built a fully functional Flutter MVP with Bluetooth Low Energy connectivity, working symptom logbook, and movement simulation system. All code follows accessibility standards and uses scalable architecture patterns.

🛠 Tech Stack

  • Framework: Flutter (iOS & Android)
  • Language: Dart
  • Bluetooth: FlutterBluePlus BLE
  • State: BLoC pattern
  • Storage: Local storage (Supabase ready)

✓ Completed Features

  • Real BLE sensor connection & scanning
  • 3D model for sensor movement visualization
  • Symptom logbook with local storage
  • Alert system for detected activity
  • Persistent status bar (battery, connection, recording)

How Usability Might Be Improved

Backend Integration

Connect to Supabase for real-time alert synchronization with healthcare providers.

Advanced Alert System

Integrate movement matrix for real movement detection instead of simulation.

Enhanced Device Placement

Implement robust placement identification algorithms with improved 3D guidance.

Onboarding Video

Create professional setup video—users requested tutorials (66%).

Localization

Add Dutch and other language options for broader accessibility.

Coach Marks

Add interactive tooltips for first-time user guidance.

Key Learning Outcomes

Simplicity Over Features

54% found apps too complicated. One core function done well beats many done poorly.

Real Testing Required

Paper prototypes caught major issues early. Actual behavior differs from stated preferences.

Expert Feedback Matters

Domain experts provided invaluable perspectives that improved the product measurably.

Plan Upfront

Waterfall research + Agile development maintained project cohesion.

Bridge Design & Dev

Understanding both disciplines ensures feasible designs and user-centered implementations.

Constraints Enable Focus

Device status only became an advantage—the interface stayed focused on patient needs.