Improving Access to Fertility Education & Medical Management Services

The Problem Worth Solving

Product page: https://fertility.ifsdnetwork.com/

There is a kind of expertise that has no front door.

Dr. Nyandia Maina is a FEMM-certified Medical Practitioner — one of a small number of medical doctors trained to help women read their own biomarkers, understand their hormonal patterns, and arrive at a diagnosis of the underlying cause of reproductive health conditions, rather than simply managing symptoms. The science behind FEMM is rigorous. The practice is personal. And until this project, there was no clear way to find her, understand what she offered, or book a session without a referral.

The gap between an excellent specialist and the people who need her is, very often, just a page. This project was about building that seervice.

The brief from the client was precise in one phrase: "serious, luxurious but mainly serious." That phrase became the lens for every decision that followed - typography, colour, copy, interaction design, and the treatment of content that most digital platforms handle badly.

The Design Challenge: Trust Before Transaction

FEMM sits at an unusual intersection. It is medically rigorous — evidence-based, chart-reviewed, capable of escalating to full medical management when findings warrant it. But it operates in a space — reproductive health, hormonal patterns, conjugal relationships — where the dominant cultural registers are either clinical and detached, or ideologically charged. A page that led with either tone would lose the visitor immediately.

The problem, in other words, was not visual. It was epistemic. A first-time visitor arriving at this page does not yet know whether to trust what she is reading. She is assessing, in the first eight seconds, whether the person behind this page understands her situation — which is specific, personal, and not well served by most of what she has found online.

Three concrete problems followed from this:

First, value proposition clarity. Most visitors would not know what FEMM is. The page had to explain it quickly — without oversimplifying and without retreating into academic language that signals competence to practitioners but alienates the patient it is meant to serve.

Second, session structure legibility. Dr. Maina runs five progressive consultation sessions, from foundational anatomy through to biomarker-guided family planning and the psychology of conjugal relationships. The information architecture needed to make this feel like a coherent journey — a path you follow, not a menu you browse.

Third, conversion friction. A visitor who decides she wants to book should be able to do so in two clicks, without leaving the page, without filling out a form, and without losing sight of the physician whose name she is trusting.

The Design Process

The Bloom Prototype: Finding the Emotional Register

The first prototype , was not built to be shipped. It was built to answer a prior question: what does serious, luxurious but mainly serious actually feel like in a browser?

The answer arrived in a dark forest-green hero (#18362A), warm gold accents (#B8924A), and Cormorant Garamond as the display typeface. The layout was mobile-first, structured as a vertical card stack with a fixed header panel. The Bloom prototype felt like a private medical practice: unhurried, considered, not trying to sell anything. It had the right emotional register.

It had the wrong architecture. The mobile-first constraint left desktop feeling underdeveloped, a common failure mode when the prototype is built in one direction and the production site is expected to serve both. And Cormorant Garamond, while beautiful, sits closer to editorial luxury than medical credibility. A page that reads like a perfume advertisement has a harder time being taken seriously as a clinical resource.

A page that reads like a perfume advertisement has a harder time being taken seriously as a clinical resource.

The Production Build: Structure Before Decoration

The production version required several structural decisions before touching colour or type.

Layout first. The vertical card stack became a split panel: a sticky left hero at 42% width on desktop, anchoring Dr. Maina's name, the FEMM value proposition, and the booking CTA. The right panel scrolls through the session content. The effect is that the booking button is always visible, and the doctor's identity is always present — no matter how deep into the session descriptions a visitor travels. On mobile, the layout collapses cleanly to a single column with a fixed booking footer.

Typography second. Cormorant Garamond was replaced with the IFSD brand type system: Inter Tight as the primary sans-serif (structural, precise, clinical without being cold), and Domine as the serif accent (warm, slightly editorial). JetBrains Mono handles the pricing figure. One small decision carries disproportionate weight: "Nyandia" renders in Domine italic in the hero, while her surname and title are in Inter Tight roman. The personal name in italics distinguishes the human from the formal designation. It is a two-character instruction that says: this is a person, not a brand.

Colour third. The Bloom palette gave way to the IFSD brand colours: Deep Teal as the primary identity colour, Rose/Mauve as the secondary. During development, a colour experiment attempted to match the teal more precisely to the printed promotional poster ( a greyer, more muted teal). After testing on screen, the original brand colour was restored. The warmer, more saturated colour held its identity at small sizes and read better against the white session cards. The greyer variant looked correct next to the poster and uncertain everywhere else.

Content Decisions

Writing for a Visitor Who Is Assessing, Not Browsing

The most important line on the page is the first description of FEMM. It had to earn trust in a single sentence:

FEMM is evidence-based healthcare that teaches you to read your body's signals, understand your hormones, and take real ownership of your reproductive health.

The second sentence, about physical and lab workups, root-cause diagnosis, symptom management, lives behind a "Learn more" toggle. The progressive disclosure keeps the hero uncluttered while the clinical depth remains accessible one tap away. The CTA sits below; the value proposition earns the click before it is asked for. A page that asks for commitment before it has explained itself is a page that loses the visitor to the back button.

Session 05: The Most Sensitive Section

The fifth session was the most difficult to write. Its subject (the anatomy, physiology, and philosophical grounding of conjugal sexuality) is substantive, unusual in a clinical context, and easy to get wrong in both directions. Clinical language makes it feel like a lecture. Warm language makes it feel like a retreat brochure. Neither is right.

The original copy leaned on academic phrasing: "phenomenological philosophy of embodiment," "integrated psychological and scientific framework." Accurate. Alienating.

Clinical language makes it feel like a lecture. Warm language makes it feel like a retreat brochure. Neither is right.

The revision rephrased the same ideas from the inside of the experience rather than the outside of the theory:

• What it truly means to give yourself and receive another
• Discovering what a fully integrated union between spouses — body, soul, and will — actually looks like
• Understanding sexuality as a language of the whole person, not just the body

The supporting note describes the session as exploring "human sexuality as a psychological, relational, and embodied language grounded in a philosophy of the human person and the science of interpersonal relationships." The audience tag was extended from engaged couples alone to engaged and married couples, to reflect who the session is actually for. This mattered: a married woman three years in who is struggling with something she cannot name is exactly the person this session exists for, and the original copy would not have told her so.

Pricing and the Follow-Up as Architecture

The pricing card frames the follow-up consultation as structural, not supplementary:

Includes classes & chart review. Follow-up is an integral part of the process and can trigger medical management based on findings.

This framing matters clinically. FEMM's value is partially realised only through the follow-up — the chart review is where biomarker patterns are interpreted and where medical management decisions are made. Presenting the follow-up as an optional add-on would misrepresent the model. It would also undermine trust: a visitor who books a session expecting it to be complete in itself, then discovers she needs to return for the findings to mean anything, leaves feeling misled. Accurate framing upfront is not just honest — it is retention.

The Interactive Layer

The hero panel on desktop includes a custom canvas effect. It is worth describing in full, because it is the element that most directly embodies the brief.

The technique is Physarum-inspired - slime mould as a metaphor for organic intelligence finding the path of least resistance. When the cursor enters the hero, a Dijkstra shortest-path algorithm spreads outward from the cursor cell across a 40px grid. Edge traversal costs are noise-weighted, so the spread follows organic, low-resistance ridges rather than expanding in a uniform ring. Cells glow in proportion to the intensity of their surrounding edges. The result looks bioluminescent: the teal beneath the dark surface is revealed, not painted over.

The interaction has five states. IDLE: the surface is still, no effect visible. TRACKING: the glow follows the cursor, organic and immediate. PULSING: when the cursor hovers the booking button, the glow breathes rhythmically — a visual pulse that echoes the heartbeat without naming it. REVEALING: a click expands the glow rapidly outward across the full grid. REVEALED: the full hero is lit, then slowly fades back to idle.

Why does this matter? A hero panel that is static asks the visitor to bring all of their attention. A hero panel that responds to the visitor's presence — subtly, without demanding to be noticed — says: this page is alive. The booking interaction gets a moment of visual reward. The effect is decorative, but decoration in the right register is not frivolous. It is the difference between a waiting room and a room worth waiting in.

Touch devices and users with prefers-reduced-motion active see none of it. The canvas does not initialise. The page loses nothing functionally. It simply becomes what it would have been without the effect.

Accessibility

Accessibility was built from the first commit, not retrofitted. The distinction matters: retrofitted accessibility fixes violations. Built-in accessibility shapes decisions.

The skip link (WCAG 2.4.1) is visually hidden until focused, then renders in Deep Teal with a gold focus ring — visible to keyboard users, invisible to everyone else. Focus rings on all interactive elements use a 3px #89445b outline on :focus-visible — AAA compliant, and consistent with the brand secondary. Every transition and animation is suppressed to 0.01ms under prefers-reduced-motion: reduce; the canvas does not initialise at all. Forced colours are managed via forced-color-adjust: auto for high-contrast Windows modes.

Semantic structure: sessions use <article> elements with role="region" and aria-label on each body panel. The booking buttons carry explicit aria-label text describing the action, the platform, and the price. A screen reader user navigating this page knows exactly what she is about to do before she does it.

Booking Integration

Cal.com handles scheduling via a popup modal. The integration is deliberately minimal: one embed script in the document head, one call, and the brand colour passed as a CSS variable so the modal matches the site. All buttons share the same handler. Adding a future booking touchpoint requires a data attribute, not a JavaScript edit.

The session at the end of this path costs KES 2,500, includes a follow-up chart review, and can escalate to full medical management. Two clicks from anywhere on the page.

What This Project Demonstrates

• The brief as a design principle. "Serious, luxurious but mainly serious" is not a mood board. It is a constraint that eliminates entire categories of wrong decisions. When a brief is specific enough to exclude options, it becomes a tool. Every colour experiment, typography swap, and copy revision in this project was tested against that phrase — and the phrase held.
• Content strategy is the hardest engineering. The Session 05 rewrite took longer than the split-panel layout. Getting the language right for a subject this specific — in a register that is clinically honest and humanly warm — required more iterations than any visual decision in the project. The page a visitor trusts is the page whose language sounds like it was written by someone who understood her before she arrived.
• Framing as product design. The follow-up pricing copy is four lines. Its effect is structural: it sets the visitor's expectation accurately, prevents the post-booking disappointment of discovering the model requires return visits, and frames the follow-up as value rather than obligation. Small copy decisions at the point of commitment have outsized consequences. Writing them carelessly is the same as designing a checkout flow with hidden fees.
• Decoration earns its place or it doesn't. The Physarum canvas effect could have been justified on aesthetics alone — it looks good. It is justified here on something more durable: it gives the booking interaction a moment of weight. The reveal state, the pulse on hover, the fade back to idle — these are a microinteraction that says the page noticed the visitor's decision and marked it. In a context where trust is the primary design problem, that is not decoration. It is communication.