D-Heart
How can we create a better user experience for a medical tool?
This project focuses on the systemic redesign of the D-heart portable ECG device. Through in-depth user research and testing, we identified key pain points in reliability and user experience. Based on these insights, we led a comprehensive redesign of both hardware interaction and software interface, aiming to improve usability, reliability, and overall user satisfaction, helping users manage their heart health more easily.
UX Research
UX/UI Design
User Testing
Medical Service
Year
Time
Team
Role
2024
5 Months
4 People
UX Researcher, Industrial Designer
BACKGROUND
What is D-Heart?
D-Heart is a portable, user-friendly electrocardiogram (ECG) device designed to work with a smartphone, enabling hospital-quality heart monitoring and remote diagnostics through an application, anywhere, anytime.
However, significant usability issues compromised its user experience.
APPROACH
From UX Research to UI Design
Our project began with in-depth user research to diagnose the existing system's core usability problems. From there, we employed an iterative redesign process, driven by multiple distinct rounds of user testing, to transform our research insights into a fully validated and highly intuitive final solution.
UX RESEARCH
Analyze D-Heart's Usability
Through a systematic process moving from expert evaluation to in-depth testing with 22 users, we not only identified what was wrong with the interface but, more importantly, uncovered the underlying behavioral and emotional patterns that caused user frustration during key tasks.
KEY FINDINGS
High-Priority Problems
A core conflict we found is that our most confident users—both tech-savvy individuals and medical professionals—consistently skip instructions, expecting to learn by doing. However, the system's unintuitive complexity, especially in crucial steps like device pairing, creates significant frustration. The inherent anxiety of using a medical device only amplifies this friction.
User Personas
Doctors and self-tracking patients, usually characterized by their high level of expertise and familiarity with technology and medical procedures, often skipping detailed instructions and relying on prior knowledge and experience.
Design Requirements
Provide real-time guidance that feels natural, use clear and consistent communication to reduce confusion and prevent errors, and offer effective feedback to ensure users are aware of their actions and system status.
APP REDESIGN
Iterations of the Application
Information architecture
We first tackled the app's confusing structure. Using Card Sorting, we mapped the mental models of both doctors and patients. We then validated our proposed architecture with Tree Testing, achieving an 85% success rate.
This research led to a key strategic decision: merging the two separate experiences into a single, unified system that caters to the shared needs of all users.
From wireframe to high-fidelity design
We started with simple wireframes and, driven by direct feedback from multiple rounds of user testing, iteratively refined them into a polished, high-fidelity prototype. This process ensured that every design decision, from layout to interaction, was systematically validated to create a final, intuitive experience.
DEVICE REDESIGN
Iterations of the Physical Interface
Our testing revealed that the physical product, beyond ergonomic concerns, has several interaction issues. While studying the product's design, we aimed to maintain its overall structure, making targeted adjustments to clarify its interactive cues (signifiers).
We focused mainly on trying to solve problems arising from unclear device-user communication, which created misunderstandings and errors in its use process.
To ensure more reliable and realistic user testing for validating our redesign, we used ProtoPie to create the app interactions. Meanwhile, we 3D-printed the new device’s form and built its physical interface with Arduino and hardware components such as a ring LED, connecting it with the ProtoPie prototype to synchronize digital and physical interactions.
FINAL DESIGN
D-Heart 2.0
The final design was engineered to build trust. By blending warm orange with reliable blue into a purposeful color palette, and leveraging an established design system, we crafted a clear, consistent, and confidence-inspiring interface that directly solves the core issues from our initial research.
MAIN FEATURES
Improving Physical-Digital Connectivity
System Communication with step-by-step guidance
The redesign of the device connection section focused on creating a clear and intuitive interaction through different interfaces, ensuring users perceive all the steps clearly.
We emphasized making this process guided and easy to follow, so users are aware of the actions to take at each stage.
For each action, users receive clear feedback from the system, helping them understand the different components and their roles.
AR real-time indication
We overhauled the complex electrode placement process. By introducing clear visual guides and culminating in an AR validation feature, we empower users to place electrodes intuitively, accurately, and confidently, all while ensuring their privacy through on-device image processing.
One system for all
One of our key strategic decisions was to merge the separate systems for doctors and self-tracking patients into a single, unified solution offering the same functionality to both groups.
This flexible architecture allows doctors to be patients and patients to be caregivers. By creating a central patient database, we dramatically increased the product's flexibility and collaborative potential, making it far more adaptable to diverse, real-world use cases.
Results status awareness
To address the confusion and anxiety users felt when checking results, we introduced a clear report status system. Users can now instantly see if their ECG is 'sent,' 'pending,' or 'verified.' Crucially, we also gave users more control by adding the option to send results directly to their personal doctor, rather than only to the telecardiologist, making the entire experience more transparent and empowering.
Never too late to perform an ECG
The system's design accommodates starting the test from different application sections, aligning with the user's mental model for enhanced flexibility and error prevention.
Supplementary design
Recognizing that a great experience starts at unboxing, we also redesigned the packaging and quick guide. The new packaging offers correct guidance and doubles as a phone stand, while the new quick-start guide provides a clear, at-a-glance overview for a seamless start.
VERIFICATION
Validating Success: A Data-Driven Outcome
Our final design achieved a remarkable and data-proven success, we boosted the product's task effectiveness from a problematic 68.6% to a near-perfect 96.6% with a final round of testing involving 13 users.. This improvement validates that our design not only solved the key pain points but also created a truly intuitive and efficient user experience.
