Teaching Before Selling: How Humann Turned Cardiovascular Science Into a Commerce Experience

The Solution

Build the Foundation. Structure the Authority. Then Make the Science Visceral.

Discovery, and a Design Language Built to Teach

The program opened with discovery sessions across Humann’s leadership and stakeholder group, UX research, and competitive analysis — establishing not just what the site needed to do but what the brand needed to mean online. From that foundation came a design system and homepage template that set the typography, color, imagery, and component patterns every subsequent page would inherit: an elevated visual language that could hold dense scientific content without becoming a textbook, and remain legible and accessible for Humann’s core demographic.

A Knowledge Center Architected for the AI Era

The Knowledge Center was the strategic centerpiece — and it was built on a premise that reframes content strategy for brands whose credibility is technical: if buyers are asking AI assistants about cardiovascular health, the brand with genuine clinical expertise should be the source those assistants reach for.

Anatta architected it accordingly. Content was organized on a hub-and-spoke model, with pillar pages anchoring topic clusters and granular supporting articles linking back to consolidate authority. Pages were structured in question-and-answer formats matched to how people actually ask about their health, marked up with structured data so answer engines can parse them, and built to surface expertise signals — medical review, author credentials, citations to clinical sources — that both search engines and readers use to judge trustworthiness. The entire hub runs on Shopify’s native content primitives: metaobjects and metafields for structured data, Online Store 2.0 sections and blocks so Humann’s own team can publish and rearrange without developer involvement.

Commerce That Explains Itself

Around the Knowledge Center, the full template library was rebuilt to carry education into the buying journey:

• Collection pages gained grouped, metafield-driven filtering — organized around how customers actually shop a health portfolio, by product need and form factor rather than by internal taxonomy — implemented on Shopify’s native Search & Discovery capabilities rather than custom code.
• Product pages were rebuilt around informed decision-making: ingredient and clinical-evidence modules, comparison affordances, and trust signals positioned where hesitation happens.
• Bundle, cart, account, and subscription experiences were reworked to make recurring purchase and self-service management straightforward for a demographic that rewards clarity over cleverness.
• The supporting estate — footer pages, program pages, campaign landing pages, and the legacy content library — was brought onto the new foundation rather than left behind it.

Native Shopify capability came first throughout; custom development was reserved for the places where Humann’s experience genuinely needed to be unlike anyone else’s. One of those places got very custom indeed.

“Our Story”: Making 60,000 Miles of Blood Vessels Feel Like a Story

The science narrative was the most creatively ambitious page Anatta has produced, and it started not with a screen but with a script — a written account of the scientific and brand story, then low-fidelity storyboards exploring how visuals and scrolling could bring that narrative to life.

Humann then did something clients rarely do: they rewrote it. Anatta’s initial draft centered heavily on nitric oxide; Humann broadened the narrative toward cardiovascular health overall, because not every product in the portfolio works primarily through that mechanism. The correction made the page more accurate and more durable, and it set the collaborative pattern for everything that followed.

The creative breakthrough was finding a single visual idea that could travel the entire experience. The team’s first instinct was the blood vessel itself — the narrative repeatedly references the roughly 60,000 miles of them in the human body — but literal treatments kept landing as clinical illustration. The answer was abstraction: reduce the blood vessel to a line. That line could behave like an EKG pulse, branch like vasculature, underline and emphasize copy, connect people and ideas, and thread through every section as a unifying device. Explored vertically at first, it worked better as a horizontal scroll — the heartbeat metaphor moving the way a heartbeat reads.

From there the same logic — biology expressed as design rather than diagram — shaped the rest: a heart constructed from particles, referencing the trillions of cells in the human body, that beats, rotates, responds to the cursor, and finally breaks apart to carry the reader deeper into the body; a transition from 2D into 3D; an animated vessel demonstrating vasodilation; the nitric oxide molecule rendered as form rather than schematic.

Then, deliberately, the intensity comes down. Sustaining maximum immersion across an entire page would exhaust the reader and diminish the centerpiece, so the second half translates the story into more conventional structures — a founding timeline, age-based cardiovascular storytelling, lifestyle imagery, statistics, athlete and customer stories, carousels — with the product reveal as the hinge between scientific discovery and commercial reality. A sub-navigation lets readers move between major movements of the story.

A New Way to Deliver Ambitious Work

The reason a page like this shipped inside a five-month program is a change in how the work was made.

Rather than designing complex interactions in Figma and then writing elaborate specifications for developers to interpret, Anatta’s designers built working proofs of concept — animated molecules, blood-vessel behavior, particle effects, 2D-to-3D transitions, moving background textures, scroll-driven sequences — using Claude and Claude Design. Those prototypes were then combined with Figma-designed sections, refined, and previewed for responsive and mobile behavior before a single handoff conversation happened.

The prototypes became part of the developer handoff itself. Ideas that would previously have been difficult even to communicate — let alone estimate — arrived as something engineers could see, interact with, and build against. Work that would conventionally have taken months of exploration and custom development compressed into weeks.

The operating model that emerged inverts the conventional sequence: narrative → storyboard → creative exploration → executable prototype → client alignment → developer implementation, rather than requirements → Figma → interaction specification → developer interpretation.

The value wasn’t that AI made the design. It’s that AI collapsed the cost of externalizing, testing, communicating, and implementing creative thought — which left the designers more room to explore ideas, and left the client with an experience nobody had to imagine on their behalf.