MyHeartArt
Simplifying congenital heart visualization for care teams
Overview
MyHeartArt is a web-based application that allows care teams to create anatomically accurate cardiac diagrams for explaining congenital heart defects and surgical interventions to families. I evaluated the usability of an existing prototype, conducted mixed-methods research, and translated findings into prioritized design recommendations that improved the clinician experience.
The Problem
Explaining congenital heart defects to families is challenging. Existing tools often relied on hand-drawn illustrations or Microsoft Paint, making it difficult to create accurate, consistent diagrams during already stressful conversations. The team set out to build a web-based tool that would allow any member of the care team to quickly generate anatomically correct heart renderings.
The Solution
MyHeartArt allows user to create an anatomically correct rendering of a human heart, which can be shown to families in an effort to create a shared understanding between the family/patient and care team. These renderings can be printed and sent home with families.
My Involvement
I joined the project after an initial prototype had been developed to evaluate its usability, identify opportunities for improvement, and help shape the product through research and iterative design.
Methods
Usability Testing · Mixed-Methods Research · Iterative Design
My Role
UX researcher · UX designer
Team
UX Specialist · Human Factors Scientist · Pediatric Cardiology Nurses · Developer · Project Manager
Project Timeline
Initial Prototype Evaluation → Usability Testing → Research Insights → Design Recommendations → Implementation & Iteration → Clinical Adoption
Challenge
Explaining congenital heart defects to families is complex. Before MyHeartArt, care teams relied on Microsoft Paint or hand-drawn illustrations to create cardiac diagrams during patient education conversations. These diagrams were often time-consuming to create, required a high level of artistic skill, and varied in both quality and consistency. As a result, communicating complex cardiac anatomy and procedures could be challenging for both clinicians, patients, and families.
Recognizing this opportunity, a pediatric cardiac nurse at Children's Mercy partnered with the Center for Pediatric Innovation and a contract developer to create the first prototype of MyHeartArt.
The team identified several challenges with the existing approach:
Families could leave appointments with an incomplete understanding of their child's heart condition
Creating clear, accurate diagrams was time-intensive and depended heavily on the clinician's drawing ability
Existing workflows could make already complex conversations feel rushed or frustrating for both care teams and families
To be successful, the new solution needed to be:
Web-based and easily accessible
Intuitive for clinicians with varying levels of technical expertise
Quick to generate accurate heart renderings
My role was to evaluate the prototype, identify usability issues, and recommend design improvements that would help the application fit naturally into clinicians' existing workflows.
Remember Microsoft Paint?
Design Process
Step 1: Define the Problem
When I joined the MyHeartArt team, the initial prototype and product vision were already established. Rather than immediately jumping into design changes, I focused on understanding the problem the team was trying to solve, who the intended users were, and what success looked like for both clinicians and families.
Through conversations with the team, I learned that the core challenge was not simply creating a digital drawing tool—it was helping care teams communicate complex cardiac anatomy and surgical plans in a way that was accurate, understandable, and meaningful for families.
The team had already established a clear understanding of the primary need: clinicians needed a more efficient and consistent way to visually explain congenital heart defects and potential surgical interventions to parents and caregivers.
Step 2: Research
Because a working prototype of MyHeartArt already existed when I joined the project, I began by evaluating the current experience through an informal UX evaluation. This allowed me to identify usability issues, opportunities for improvement, and areas where the interface did not align with clinicians' workflows. My evaluation revealed that the original design relied on a long list of drop-down menus, creating usability challenges by limiting visibility of available tools, requiring users to remember available options rather than recognize them, and increasing cognitive effort during task completion.
Based on my findings, I provided design recommendations to the team and collaborated with stakeholders to identify the most effective improvements. The selected design changes were then implemented by the developer before moving into usability testing.
Next, I collaborated with a Human Factors Scientist and two cardiology nurses to develop realistic clinical scenarios and tasks for usability testing. These scenarios were based on actual workflows and required participants to create heart diagrams using both MyHeartArt and the existing process, Microsoft Paint.
Usability Testing
Goals
Evaluate the strengths and weaknesses of MyHeartArt. Determine whether the system improved clinicians' ability to quickly and accurately create heart diagrams.
Participants
10 clinicians familiar with creating complex heart diagrams using Microsoft Paint.
Methods
Participants completed realistic heart diagram creation tasks using both MyHeartArt and Microsoft Paint. We evaluated:
Task performance (success, partial success, failure)
Time on task
Task difficulty
Confidence completing tasks
Likelihood of future use
Ease of use
Cognitive workload using the NASA Task Load Index (TLX)
Participants first interacted with MyHeartArt for 30 seconds and provided feedback on their initial impressions of the interface, including layout, visual design, and perceived ease of use.
They then completed three unique diagram creation tasks using echocardiogram reports, which summarize findings from cardiac ultrasounds. After each task, participants rated the difficulty of the task and their confidence in completing it. A cardiac nurse evaluated the accuracy of each completed heart rendering based on the provided reports.
The results provided insight into how MyHeartArt compared to the existing workflow and helped identify opportunities to further improve the system.
Results
50% faster heart diagram creation · 90% of participants likely to use MyHeartArt in the future
Usability testing demonstrated that MyHeartArt had the potential to significantly improve the process of creating cardiac diagrams. While participants encountered some challenges locating specific actions and making certain edits, the overall experience was faster, more consistent, and preferred over the existing, Microsoft Paint workflow.
Faster Heart Diagram Creation
The most significant finding was the improvement in efficiency. Participants completed every heart rendering in MyHeartArt in approximately half the time required to create the same diagrams in Microsoft Paint. This demonstrated that MyHeartArt successfully reduced the time and effort required to create patient-specific cardiac diagrams, addressing one of the team's primary goals.
Successful Task Completion with Opportunities for Improvement
Participants were able to successfully complete the initial heart rendering task in MyHeartArt, demonstrating that the core workflow was understandable and functional. However, later tasks revealed opportunities to improve tool discoverability and interaction patterns. Participants occasionally struggled to locate specific cardiac modifications, including pulmonary atresia changes, VSD patches, and conduit edits. These challenges highlighted that while the necessary functionality existed, some tools did not align with users' expectations or mental models.
These findings guided future design and layout recommendations, focused on improving navigation, tool discoverability, and overall workflow clarity.
Increased User Preference
Beyond efficiency, participants preferred the overall MyHeartArt experience compared to Microsoft Paint:
Participants rated MyHeartArt's visual design and aesthetics higher than Microsoft Paint
90% of participants indicated they would like to use MyHeartArt for future cardiac diagram creation
Workload and User Experience
To better understand the experience of using MyHeartArt, participants completed the NASA TLX after completing all three rendering tasks in both Microsoft Paint and MyHeartArt.
Results showed no significant differences in perceived mental demand, physical demand, temporal demand, effort, or frustration between the two systems. While MyHeartArt did not immediately reduce perceived workload compared to a familiar tool, qualitative feedback revealed important opportunities to improve the interface and make interactions more intuitive. These insights helped the team prioritize improvements focused on discoverability, workflow clarity, and reducing unnecessary cognitive effort.
Overall, the research validated MyHeartArt as a valuable improvement over the existing workflow while identifying key opportunities to make the system even more intuitive for clinicians.
Results: Paint renderings vs. MyHeartArt rendering (Task 1)
Results: Paint renderings vs. MyHeartArt rendering (Task 2)
Results: Paint renderings vs. MyHeartArt rendering (Task 3)
Design Process, Cont.
Step 3: Ideate
Based on usability testing results, I translated research insights into prioritized design recommendations for the team and developer to review. Recommendations focused on improving tool discoverability, simplifying interactions, and creating a more intuitive workflow for clinicians.
Together, the team reviewed each recommendation and prioritized improvements based on user impact, feasibility, and development effort. This collaborative process ensured that design changes addressed the most critical usability challenges while remaining realistic within technical constraints.
Design Decisions: Creating a Guided Workflow
Challenge
Usability testing revealed that participants understood the overall goal of creating a heart diagram but sometimes struggled to understand where to begin and how different actions fit together within the workflow.
Insight
Creating an accurate cardiac rendering in MyHeartArt involved multiple complex decisions. Users needed a more clear structure that guided them through the process without requiring them to remember where certain actions are located or accidentally skip important steps in the rendering process.
Design Decision
Based on usability testing findings, the team introduced a step-wise workflow that guided clinicians through the diagram creation process. The new structure aligned with users' natural mental model: start with the heart anatomy, customize patient-specific details, and add supporting information.
Step 1: Start - Select base Heart Digram
The original experience separated heart selection into a "Diagram" section, which participants did not always recognize as the first step in the process.
To improve discoverability and establish a clear starting point, we replaced this structure with a dedicated “Start” tab. This allowed users to immediately select the appropriate heart anatomy template as the foundation for their rendering.
Customize - Apply lesion details
The original workflow separated customization options across multiple areas, including the “Basic,” "Advanced," and "Supplemental" tabs. This required users to determine where specific modifications were located.
We consolidated these options into a single “Customize” tab, allowing users to modify the selected heart anatomy and add patient-specific details, including lesions and surgical interventions, in one location.
Summary - Summary Text
During usability testing, participants expressed a need to include personalized information on the final printed rendering for each patient.
To support this workflow, we introduced a dedicated “Summary” step where users can add notes or additional clinical details through a rich text editor field. This provided clinicians with a way to tailor each rendering and better support communication with families and care teams.
Key Insight!
The guided workflow created a more predictable experience by breaking a complex task into smaller, manageable steps. This reduced the need for users to remember available actions and helped align the interface with clinicians' natural process for creating patient-specific heart diagrams.
Initial MyHeartArt Prototype Layout
Original MyHeartArt Layout — Basic, Advanced, and Supplemental tabs
Updated Design of MyHeartArt Layout - Customize Tab
Updated Design of MyHeartArt Layout - Summary Tab
Step 4: Prototype
To communicate potential solutions, I created design concepts and interface recommendations that illustrated possible improvements to the MyHeartArt experience. These concepts helped the team align on design direction and provided a clear reference for implementation.
Because the project had a highly collaborative development process and a single developer who was closely involved throughout the project, prototyping focused on communicating design intent rather than creating fully interactive prototypes. I worked closely with the developer to discuss recommendations, answer design questions, and refine solutions as they were implemented.
Step 5: Continuous Improvement
Although my primary involvement with MyHeartArt has concluded, the product continues to evolve based on feedback from clinical users. The team continues to make improvements, and I occasionally provide design guidance and feedback as new opportunities arise.
Conclusion
MyHeartArt has been successfully implemented within Children's Mercy cardiac clinics and continues to support clinicians in creating patient-specific heart diagrams. Since launch, the team has continued refining the system based on feedback from clinical staff to ensure it remains aligned with user needs and workflows. Following successful adoption at Children's Mercy, the Center for Pediatric Innovation is expanding MyHeartArt to other pediatric hospitals, allowing more care teams to efficiently create accurate cardiac visualizations and improve communication with families.
Reflection
This project reinforced the importance of designing for communication, not just task completion. While MyHeartArt began as a tool for creating cardiac diagrams, research revealed that the greater opportunity was helping clinicians communicate complex information more clearly with families.
View a demonstration of MyHeartArt’s updated workflow, from selecting cardiac anatomy to creating a patient-specific visualization.