Interactive Cardiology Illustration Platform

Pediatric cardiac nurses struggle to illustrate complex heart conditions - most can't draw well enough, and patients often have multiple defects that create unique combinations impossible to find in textbooks. I led discovery, reframed the brief, and designed a platform that helps clinicians find or request a diagram, trust it, customize it and present it. AI generation is designed as the next step.

mychdmap.org

Platform

Responsive web platform

Duration

2 months

My Role

Product Designer, discovery lead

Team

ML engineer, Backend engineers, Product manager

Cardiology platform featuring an interactive heart visualization and medical information on a desktop screen.

key outcome

Reframed the brief from an image generator to a tool for the whole job: find, trust, customize, present

key outcome

Reframed the brief from an image generator to a tool for the whole job: find, trust, customize, present

key outcome

Worked with ML engineers to adapt Google’s AI model for medical illustration.

key outcome

Worked with ML engineers to adapt Google’s AI model for medical illustration.

key outcome

Leveraged shadcn/ui component library to speed development.

key outcome

Leveraged shadcn/ui component library to speed development.

about

A nurse who spotted a gap

A pediatric cardiac nurse had drawn over 100 heart diagrams by hand to explain surgeries to families. She saw a gap no one had filled: hospitals can't legally use most heart images online, and the versions made in-house are often inaccurate.

She wanted to make accurate, high-quality diagrams accessible to every nurse and doctor, not just those who can draw. Her first request was a tool that generates them.

Discovery and problem definition

Generating or finding an image is only the start

I interviewed the founder about how clinicians actually use diagrams. They use them in two moments: explaining a child's heart to the family, and teaching their own teams. These were the findings.

Key finding

Most nurses can't draw anatomically accurate diagrams

Key finding

Libraries show single defects, but real patients have unique combinations

Key finding

Online images can't be used legally, and in-house ones are often inaccurate

Key finding

Clinicians adapt each image to the patient and annotate while explaining

Key finding

Each case needs 2 to 4 related diagrams: before, during and after surgery

Key finding

Comparing with a normal heart is essential for families to understand

Problem definition

The founder asked for a faster way to create diagrams. The real job was bigger. Clinicians don't need only image generation or a library. They also need to trust, adapt and present diagrams during short consultations.

Case Study

From Clinical Input to Family-Facing Explanation

To support effective clinical communication, diagram creation must extend beyond a single generation step. This workflow was designed as a sequence of connected flows—input, refinement, organization, and presentation—each reducing cognitive load and friction while preserving context.

Diagram Creation

Defining a heart diagram requires users to configure multiple cardiac anomalies using complex medical terminology. Without a focused setup step, translating clinical intent into an accurate visual representation is error-prone and cognitively demanding.

Heart diagram generation interface with medical terminology search, selected cardiac anomalies, and additional clinical details.

1

2

3

1

2

3

1. Smart search with auto-complete for medical terms

Supports both full names and acronyms for flexible medical search.

2. Visual summary of selections

Prevents mistakes by showing all selected defects before generation.

3. Additional Details

Captures specific clinical context to ensure the generated diagram matches the exact case.

Refinement Loop

The first generated heart diagram is rarely perfect. Users need to iteratively refine specific anatomical details without losing prior work or restarting the setup process

Interactive heart diagram editor with annotations, AI-assisted updates, version history, and presentation controls.

1

2

5

4

6

7

3

1

2

5

4

6

7

3

1. Auto-populated diagram name

Eliminates manual typing and ensures consistent naming convention

2. Basic Annotation Tools

Enable quick visual explanations so clinicians can prepare clear diagrams before the appointment.

3. Auto-populated annotations

Reduces manual work by generating initial annotations directly from the selected anatomy and defects.

4. Save draft vs Save to library options

Draft system allows work-in-progress without cluttering library

5. Present Mode

Provides one-click access to presentation view for smooth, uninterrupted explanations.

6. Flexible Prompting

Allows updating the entire diagram or refining a selected area to reduce hallucinations and speed up generation.

7. Version history

Preserves previous versions so user can revert if refinement goes wrong

Organizing Case Progressions

Each case needs 2-4 diagrams showing surgical progression. Without organization, these become scattered files that are hard to present as a cohesive story. Nurses need to show: "Here's the heart now → Here's what we'll do → Here's how it will look after."

Diagram library with search, folders, and visual previews for organizing heart diagrams by case and surgical progression.

4

3

2

1

4

3

2

1

1. Search Across Cases

Keeps the ability to search by defect, anatomy, or surgery, whether diagrams are standalone or part of a case.

2. Multiple Libraries

Keeps work clearly separated and easy to share across personal, team, and public contexts.

3. Creating Folders

Ensures surgical steps are shown in the right sequence, not lost across separate images.

4. Visual Folder Previews

Saves time and reduces mistakes by showing case progression at a glance before opening anything.

Present Mode

Explaining heart conditions requires two critical capabilities: comparing the patient’s heart to a normal heart, and showing surgical progression. Presenting these requires smooth navigation and flexible comparison without breaking the flow of explanation. Clicking back to library, finding the right diagram to compare, and re-entering present mode disrupts the consultation and loses families’ attention.

single view

Heart diagram presentation interface with live annotations, custom presentation sets, and navigation controls.

1

3

4

2

1

3

4

2

side-by-side

Dual-view interface for comparing a patient’s heart diagram with a normal heart.

5

6

5

6

5. Independent Navigation

Saves time and reduces mistakes by showing case progression at a glance before opening anything.

6. Return to Single View

Allows quick transition back to sequential storytelling once comparison is complete.

1. Live Annotations

Preserves access to drawing and notes so doctors can explain findings directly during presentation.

2. Presentation Set Navigation

Lets clinicians switch between selected images in the presentation set.

3. Custom Presentation Set

Allows control over which case diagrams and normal hearts are included in the sequence.

4. Compare Anytime

Lets clinicians switch to side-by-side comparison at any moment without interrupting the explanation.

Sum Up

Next Steps

Internal Validation & AI Model Refinement

Test AI generation accuracy across diverse defect combinations. Validate that complex multi-defect illustrations maintain anatomical accuracy and visual clarity. Iterate on model prompting strategies based on medical review to ensure generated diagrams meet clinical standards.

Internal Validation & AI Model Refinement

Pilot Testing & Iterative Enhancement

Launch pilot program with cardiac nurses across 2 hospital locations. Observe real-world usage during patient consultations, gather feedback on workflow integration, and measure time savings and educational effectiveness. Iterate on product based on insights: expand educational features, refine Present Mode and export capabilities, address edge cases discovered in clinical use.

Pilot Testing & Iterative Enhancement

Monetization & Scale

Introduce subscription model with two tiers: individual plans for private practice nurses and organizational plans for hospital-wide deployment. Enable organization-level libraries for shared educational resources. Expand to additional cardiac care centers and build sustainable business model.

Monetization & Scale

Sum Up

Key Takeaways

Understanding Real Clinical Workflows Over Stated Requirements

The initial request was "help me create diagrams faster." Through research, I discovered the real problem was organizing multi-diagram progressions and presenting them effectively during time-limited consultations. This reframing shifted the solution from a simple generator to a complete creation-organization-presentation system.

Understanding Real Clinical Workflows Over Stated Requirements

Invisible Design: Automation with Control

The most impactful features are often the ones users don't notice. Auto-naming from defects, auto-generated annotations, and context-aware navigation eliminate repetitive work while maintaining full user control. Users don't think about these features - their workflow just feels effortless.

Invisible Design: Automation with Control

AI Collaboration Requires Design-Engineering Partnership

Successful AI integration isn't just about prompts - it's understanding generation time constraints (15-30 seconds), designing for non-deterministic outputs (version history), and turning model capabilities into features (auto-annotations). Close collaboration with ML engineers shaped interaction patterns that work with AI behavior, not against it.