Learning experience for Edwards Lifesciences employees

Alma

Making heart function something people can explore, not just read about.

Try Alma Back to work

Let the interaction carry the lesson

Two states from The Four Valves

The way in The way out

Alma's cutaway heart with The way in selected. Mitral and tricuspid valves are labeled open; aortic and pulmonary valves are labeled shut. — **The way in:** the mitral and tricuspid valves are open; the aortic and pulmonary valves are shut.

The same cutaway heart with The way out selected. Aortic and pulmonary valves are labeled open; mitral and tricuspid valves are labeled shut. — **The way out:** the aortic and pulmonary valves are open; the mitral and tricuspid valves are shut.

Actual screenshots of two states in the same experience, not a before-and-after redesign.

The problem: Explain an unfamiliar subject to people without a cardiac background, without overwhelming them with text.
My role: Learning goals, lesson sequence, interaction design, visual direction, and review of AI-assisted implementation.

I wanted the interaction to carry the lesson. In The Four Valves, users switch between "The way in" and "The way out" to see which valves open and close. I directed the learning experience and used Claude Code to help implement the connected 3D model and controls.

One clear comparison. A two-position switch moves between filling and ejection, keeping attention on the two valve pairs.

Connected feedback. The model and open/shut labels change together, so the state is shown in both motion and words.

AI built in phases.
I reviewed each one.

When the AI initially tried to build everything at once, I restarted with a phased plan we created together. Before advancing, I checked whether each interaction matched my intent, fit the overall experience, and communicated the concept I wanted to teach. AI helped implement the work; I directed and reviewed each stage.

From the original build plan

Each phase has an explicit done-when. Do not proceed until it's met. Check in between phases rather than assuming scope.

The plan defined nine phases, from the initial scene and simulation to connected interactions and polish.

Download planning excerpt

My review criteria

Does the interaction match what I had in mind?
Does it fit with the rest of the experience?
Does it communicate the concept I want to teach?

Less reading.
More room to explore.

I first noticed that the sections contained too much information. Watching one person use Alma, I then noticed their attention gravitate toward the buttons. That reinforced my decision to focus each section on its main idea and make the interaction carry the lesson.

A clearer beginning: I added an opening section with a title explaining what the viewer was looking at.
A lighter final section: I simplified the dense final section so the main point was easier to pick out.

This was an informal observation of one person, not a formal usability study or eye-tracking research.

A working experience

Alma connects a 3D heart, interactive controls, and diagrams in a browser-based learning experience. The Four Valves section is one example of the approach: let someone act, see what changes, and explore the relationship.

I reviewed the interactions against my teaching goals. Formal learning outcomes have not been measured.

Try Alma

Tools and credits

My contribution: learning and interaction direction, visual review, and decisions at each build stage. Claude Code: AI-assisted coding, debugging, implementation, and iteration under my direction.

3D assets: purchased heart anatomy and heartbeat poses by 3D4SCI, prepared with Blender and Python scripts for glTF/GLB browser delivery.

Implementation tools

TypeScript / JavaScript: Simulation logic, controls, and synchronized diagrams.
HTML / CSS: Layout, typography, controls, and responsive styling.
Three.js / WebGL / GLSL: 3D rendering, cutaways, and blood-flow effects.
GSAP / ScrollTrigger; SVG / Canvas: Camera transitions, scroll coordination, and supporting diagrams.
Node.js / npm / Vite; Git / GitHub: Development tooling, builds, and version history.
Vitest: Software checks for simulation ranges and behavior, not clinical validation or evidence of learning outcomes.