Audience router & role personalization
Route each visitor to the proof that matters to them in one tap, and keep the choice as they browse.
- 1ROUTER Choose a role Four cards under the hero. No dropdown.
- 2STATE Swap content Proof line, citation, secondary CTA, photo and CTA band all change together.
- 3STORAGE Persist Saved in localStorage as lumen.role, and restored on every page.
- 4GUARD Respect patients Picking "Patient" flips the header switch and hides HCP-only modules.
◎ RULES
—The primary CTA stays "Request a demo" for professional roles; only the secondary changes.
—The role is never inferred from tracking, only from an explicit choice.
—Always offer a visible way to switch role.
STATES & EDGE CASES
i EdgeNo role chosen: show the leadership proof with a neutral secondary.
◆ WarningPatient on an HCP-only URL: redirect to the patient hub with a notice.
HCP gate
Limit promotional clinical content to healthcare professionals, as regulations require, without a login wall for everyone.
- 1MODAL Trigger Opens only on HCP-only content, never on page load.
- 2CHOICE Self-declare Equal-weight "Yes" and "No, show patient info" options.
- 3SSO Optional login Third-party professional login such as DocCheck for stricter markets.
- 4STORAGE Remember 30 days on this device. Clearing cookies resets it.
◎ RULES
—Never pre-select "Yes".
—The "No" path always leads to useful patient content, not a dead end.
—Market configuration decides self-declaration vs. verified login.
STATES & EDGE CASES
▲ ErrorSSO provider down: fall back to self-declaration where legally allowed.
i EdgeDeclines: remember the choice so the gate isn’t shown again this session.
Region & availability logic
Be honest about where a product can be sold, and offer a next step instead of a dead end.
- 1SELECTOR Detect region From the region selector (never IP alone), with an easy override.
- 2STATUS PILL Tag cards Info pill: "Not available in all regions".
- 3CTA SWAP Gate CTA Where unavailable, "Request a demo" becomes "Notify me".
- 4NOTICE Explain Availability notice with a regulatory status line.
◎ RULES
—Unavailable products still show their evidence to HCPs where allowed.
—Never show pricing or ordering in unapproved regions.
—"Notify me" uses double opt-in.
STATES & EDGE CASES
◆ WarningInvestigational: show the investigational badge and the limitation statement.
✓ SuccessNotify-me confirmation shows what happens next.
Claim → evidence
Every claim can be checked in two taps: from the claim to its study, then to the reference.
- 1CITATION Claim A number or statement with a mono citation chip.
- 2POPOVER Study card Popover with design, n, endpoint, result and reference.
- 3LIST Reference list Numbered sources at the section or page foot.
- 4LINK Evidence Hub Deep link to the full study record.
◎ RULES
—No superlative without a study card.
—The chip is a real button with an accessible name.
—Illustrative data is labeled as such on the card.
STATES & EDGE CASES
i EdgeMultiple sources: chip "1,2" opens a stacked card.
◆ WarningHCP-only study: the card shows a summary, and full detail sits behind the HCP gate.
Important Safety Information
Keep safety information visible and accessible without hiding the page or crowding the CTA.
- 1DRAWER Collapsed bar Sticky at the bottom with a 2 px ink top rule and "Important Safety Information".
- 2DISCLOSURE Expand Full text inline, scrollable, and readable by keyboard.
- 3SECTION Full ISI Also rendered in full at the page end.
- 4LINK IFU link Direct link to the eIFU for the product.
◎ RULES
—Never animate or auto-hide the ISI.
—Never overlap the primary CTA; on mobile it stacks above the sticky CTA bar.
—Plain-language version on patient pages.
STATES & EDGE CASES
i EdgePrint: ISI always prints expanded.
3-step demo request
Get a qualified demo request in under 60 seconds.
- 1ROLE CARDS Role Role cards, not a dropdown.
- 2FORM Details At most 5 fields, pre-filled from the role and region.
- 3SLOT PICKER Slot Pick a live slot, or "Have someone call me".
- 4SUCCESS Confirmation Calendar invite, next steps and relevant resources.
◎ RULES
—At most 3 steps and about 8 fields.
—Inline validation on blur, never on keypress.
—Autosave between steps; data-step on every step.
STATES & EDGE CASES
▲ ErrorSlot taken meanwhile: keep the other data and suggest the 3 nearest slots.
○ OfflineQueue the request and confirm once back online.
Gated content & progressive profiling
Trade content for contact data fairly, asking a little more each time rather than everything at once.
- 1MINI FORM First download Email only.
- 2PROGRESSIVE Second Adds role and institution.
- 3PROGRESSIVE Third Adds interest and timeframe.
- 4MEMORY Never re-ask Known fields are skipped.
◎ RULES
—Headline results always stay ungated.
—Consent checkboxes are unticked by default.
—State clearly what will be emailed.
STATES & EDGE CASES
✓ SuccessDelivered by email and offered as an immediate download.
Value calculation
Let leadership model the value with their own numbers and assumptions they can see.
- 1NUMBER · SLIDER Inputs Four inputs with units and sensible defaults.
- 2KPI · CHART Instant result Count-up plus a chart, updated live.
- 3TABLE Assumptions Every assumption shown, editable and cited.
- 4MINI FORM Report Full PDF by email; the headline result stays ungated.
◎ RULES
—Show ranges, not false precision.
—Every default cites its source.
—Include a link to reset the defaults.
STATES & EDGE CASES
▲ ErrorOut-of-range input: clamp with an inline note.
Product storytelling · sticky scroll
Explain a complex system in steps while the device stays in view.
- 1STAGE Stage pins The device stage is position: sticky.
- 2STEPS Steps scroll Each step is native content that scrolls past.
- 3ANNOTATION Annotations draw Leader lines for the active step draw in.
- 4CTA Release The stage unpins before the CTA band.
◎ RULES
—No scroll-jacking; the steps are readable without the animation.
—On mobile, show static frames per step.
—Keep the primary CTA in view with a sticky bar.
STATES & EDGE CASES
i EdgeReduced motion: all layers are shown in their final positions.
Comparison & objection handling
Answer the questions that stall a purchase: cost, disruption, risk and evidence.
- 1TABLE Compare An honest table with cited values.
- 2TIMELINE Timeline "First case in 90 days", step by step.
- 3CARDS Finance Capital purchase, lease or pay-per-procedure.
- 4CTA De-risk Clinical evaluation program and service SLA.
◎ RULES
—No competitor names without approved substantiation.
—The FAQ uses FAQPage schema.
STATES & EDGE CASES
i EdgeUnknown answer: "Talk to a specialist" is the last FAQ item.
Search, filters & facets
Find a study, course or IFU quickly, by keyboard or touch.
- 1SEARCH Search ⌘K opens an overlay grouped by type.
- 2CHIPS Facets Chips for type, product, specialty and year, with counts.
- 3GRID Results FLIP-animated, with the count announced to screen readers.
- 4TAGS Refine The active filters row, with "Clear all".
◎ RULES
—Filters update the URL.
—Zero results: suggest removing the last filter.
STATES & EDGE CASES
○ EmptyNo results: show the three most-visited items and a link to support.
Locator · map + list
Find a treatment center near the patient, with an accessible list that works without the map.
- 1INPUT Where Postcode or "Use my location" (asked only on tap).
- 2LIST List first Accessible list sorted by distance.
- 3MAP Map Synced pins; the map is optional.
- 4CTA Contact Call or request an appointment.
◎ RULES
—Location permission only on explicit action.
—The list is the source of truth; the map is enhancement.
STATES & EDGE CASES
○ EmptyNo centers within 50 km: widen the radius or show the nearest 3.
Event registration
Register for a webinar or course in one step, and put it in the calendar.
- 1CARD Event card Date, time zone, duration and CME status.
- 2FORM Register Prefilled for known users.
- 3SUCCESS Confirm Add to calendar (ICS, Google, Outlook).
- 4EMAIL Remind Opt-in reminder 24 h before.
◎ RULES
—Always show the time zone.
—Event schema markup on every event.
STATES & EDGE CASES
◆ WarningFull: offer the waitlist and the next date.
Document retrieval · eIFU
Find the exact, current instructions for use for a device in hand.
- 1SEARCH Identify By product, REF, lot or UDI (scan or type).
- 2RESULT Match The exact version for that lot and date.
- 3SELECT Language Choose from the available languages.
- 4LIST History Previous versions with change summaries.
◎ RULES
—Show the IFU version and validity dates.
—Paper IFU request always available.
—No gating, no tracking consent needed.
STATES & EDGE CASES
▲ ErrorUnknown lot: explain the format and offer a service contact.
Safety notices with severity
Communicate field safety notices clearly and calmly, by priority.
- 1LIST List Sorted by date and severity.
- 2STATUS PILL Severity Shape, label and color (high, medium, info).
- 3TABLE Affected Products, lots and regions.
- 4CTA Action What to do, and who to contact.
◎ RULES
—No marketing on safety pages.
—Calm motion only.
STATES & EDGE CASES
✓ SuccessResolved notices stay listed and are marked resolved.
Consent
Get consent that is informed, free and easy to withdraw.
- 1BANNER Banner Equal-weight "Reject all" and "Accept all".
- 2SWITCHES Preferences Per-category toggles, off by default.
- 3CHECKBOX Form consent Unticked checkbox with plain text.
- 4EMAIL Double opt-in Confirmation email before subscribing.
◎ RULES
—No pre-ticked boxes, no confirmshaming.
—Cookie settings are linked in every footer.
STATES & EDGE CASES
i EdgeReject all: the site stays fully usable.
Empty, loading, error, success, offline
Every state explains what happened and offers a next step. There are no dead ends.
- 1SKELETON Loading Skeleton first, then the ring after 400 ms.
- 2EMPTY Empty Explains why, with a first action.
- 3ERROR Error Plain words, a cause and a retry.
- 4STATUS Success · Offline Confirms and offers what’s next / queues work.
◎ RULES
—Never use color alone.
—Announce changes via aria-live.
STATES & EDGE CASES
○ OfflineShow last-synced time.
Portal dashboard layout
Show fleet status, alerts and tasks at a glance in OR Dark.
- 1ALERTS Alerts Top rail, sorted by priority.
- 2KPI KPIs Four tiles with sparklines.
- 3TABLES Work Case logs, tickets and training compliance.
- 4DRAWER Drill-down Drawer with detail.
◎ RULES
—Motion is strictly functional.
—High priority is never dismissible without acknowledgment.
STATES & EDGE CASES
◌ LoadingKeep the last values visible with a "Syncing" label.
Focus management & skip links
Make every page efficient by keyboard and predictable for screen readers.
- 1LINK Skip link First tab stop: "Skip to content".
- 2HTML Landmarks header, nav, main, footer.
- 3MODAL Overlays Trap focus, close on Escape, return focus to the trigger.
- 4TOKEN Focus ring 2 px ink with a 2 px gap; Glow on dark.
◎ RULES
—Never remove the outline without a replacement.
—Focus order follows visual order.
STATES & EDGE CASES
i EdgeRoute change: move focus to the H1.