Loading...
Diplora key screens

Overview

Diplora is an accessibility-first mobile concept for elderly Holter monitor users. The core design goal was to reduce anxiety and confusion by emphasizing device status clarity over complex medical detail.

Through interviews, surveys, and iterative testing, the product direction focused on readability, clear onboarding, reliable Bluetooth feedback, and simplified symptom logging.

The outcome is a validated UX direction and working MVP foundation that can scale toward production while maintaining clinical boundaries and inclusive usability.

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.

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)