Cloud
Leading the redesign of the platform embryologists and lab directors run on daily — and building the production-grade prototype myself, with agentic AI, as the design system's source of truth.
Future Fertility uses AI to assess egg and embryo quality from microscope images taken in IVF and egg-freezing labs, generating the predictive reports clinicians use to counsel patients. FF Cloud is the company's primary web platform — where embryologists and lab directors spend their day reviewing image QC, approving and generating those reports, and sharing them with clinics. It worked, and labs relied on it, but it had grown the way internal tools do: feature by feature, screen by screen, until it read like a dense spreadsheet wrapper, visually a decade behind the AI sophistication it was meant to express.
This wasn't a cosmetic refresh. The company was evolving from a per-report point solution into a sticky, multi-role SaaS intelligence platform — and the dated surface was the thing standing between that ambition and the people who'd adopt it. I led the redesign end to end: design direction, design-system architecture, and the hands-on build of a high-fidelity, genuinely interactive prototype — made with agentic AI — that served as the source of truth and the handoff vehicle for engineering. It was approved at the leadership level for rollout.
A clinical tool that had fallen behind its own science
FF Cloud is where the lab's day happens — reviewing image QC, approving and generating the predictive reports, sharing them with clinics. The product was functional and trusted. But it had accreted: dialog by dialog, table by table, until the screen was a dense list wrapper that looked far older than the AI it expressed. The thing meant to make the science feel credible was quietly undercutting it.
The clutter wasn't only cosmetic. This is dense, high-frequency professional work in a regulated context, where clinical credibility is non-negotiable — and the platform's dated surface was the friction between the company's platform ambition and the embryologists and lab directors who'd have to adopt it.
Modernize with a scalpel — and protect what quietly worked
I started from the evidence, not a blank canvas: synthesizing years of existing qualitative research into themes and a set of decisions I could defend. I also named the real confidence gap honestly — much of the platform insight was internally proxied, and the navigation defaults still needed validation with external users. I designed around that limitation deliberately rather than papering over it.
Before removing anything, I catalogued the platform's quiet strengths — the things satisfied users never file tickets about: the cumulative multi-cycle reporting patients rely on across appointments, the at-a-glance product colour-badges, the home-page filters that double as a quality-control tool, the three-panel detail layout trainers use to orient new clinics. Those were protected. What came out was the density-without-hierarchy, the dated chrome, and the real friction — like the absence of a quick download from the list view.
The assessment view, modernized without moving the furniture
The assessment detail is where an embryologist reviews QC, reads the AI's prediction, and shares the report. The redesign kept the three-panel structure trainers depend on — patient & cycle, quality control, share report — and modernized the density, the typography, and the per-image quality read inside it. Download stays the dominant action, matching how reports actually get delivered: download-then-send, not the underused patient portal.
Across the suite, product identity stays meaningful — VIOLET, MAGENTA, and ROSE are reserved as semantic markers, never generic accents — while the platform chrome holds to a single neutral-first blue. Light and dark are hand-tuned in parallel, never auto-inverted.
I didn't just design it — I built it, with a deliberate human-AI workflow
The redesign's source of truth wasn't a static design file. It was a high-fidelity, genuinely interactive React prototype I built myself with agentic AI — the artifact engineering translates into production. To build at that fidelity and speed without surrendering design judgment, I ran a deliberate two-thread workflow.
One thread holds the thinking; the other holds the hands. I stay the spine of every decision — the AI is the implementation muscle, never the author.
Design reasoning, context preservation, prompt drafting, triage, and A/B framing — where the thinking happens before any code is touched.
Opus · judgment under ambiguityActual prototype edits in working React — fed by prompts from the strategy thread, with results brought back for assessment before the next step is greenlit.
Sonnet · resolved executionThe human stays the spine — the AI is the implementation muscle. You decide; it executes; you evaluate.
Model-selection discipline
A lighter, faster model for execution-heavy work with decisions already resolved; a heavier reasoning model for judgment under ambiguity, reframing, and visual-judgment passes with multiple A/Bs — escalating mid-session the moment a tension needs reframing.
Iteration vs. spec calibration
When feedback arrived mid-build, I separated “the spec was wrong” (amend and implement together) from “this is a new direction arriving after codification” (a separate pass against the baseline). Codification lands first, so the system stays coherent.
The prototype as handoff
Design intent lives in working code, not throwaway mockups. Production runs a different stack and translates that intent rather than copying the prototype — so the handoff carries behaviour and state, not just pixels.
The prototype is live and interactive — the same artifact the build was handed off from.
View the live prototypeAn AI-readable design system, not a screen reskin
Underneath the surfaces is a framework-agnostic design system — tokens and rules documented so both humans and AI agents could build against them consistently. Making the system legible to the tools building it is itself the 2026-forward move: it's what let the prototype stay coherent across dozens of screens, at speed.
Two pieces carry most of the weight: a three-tier colour model that keeps product meaning meaningful while the chrome stays neutral, and a small, honest status vocabulary where every state defines what it allows and what it blocks.
- Calm Precision
- Premium Restraint
- Dense Clarity
- Borders Before Shadows
- System Over One-Offs
- Parallel Theming, Not Inversion
- AI-Readable by Design
- Build Through Validation
One neutral-first accent carries all chrome, surfaces, and interactive emphasis.
- Future Blue#40539E · platform accent
- Companion#5A6FBE · lighter
Product identity markers only — reserved, never generic accents.
- VIOLET#767AC1 · egg freezing
- MAGENTA#C05698 · IVF
- ROSE#C43B62 · egg donation
Status only — always paired with a non-colour cue.
- Ready#008254
- In Review#D4960A
- Needs Attention#B91C1C
- Needs Attention
- A QC issue needs action; report actions are locked until it's resolved.
- In Review
- Under manual review; report actions blocked until it clears.
- Ready
- Predictions ready — download and sharing are available.
- Delivered
- Report shared or downloaded; a calm completion state.
The decisions that mattered
Modernizing a trusted clinical tool came down to a few deliberate calls — each a trade-off named honestly, including its open edge.
- 01
Density is a feature — don't design it away
The instinct with a tool people call 'cluttered' is to strip it down. But for embryologists scanning dozens of assessments under time pressure, density is the point. I kept the information density and fixed what was actually wrong — the hierarchy, the chrome, and the missing quick-actions — rather than trading professional power for a cleaner-looking screenshot.
- 02
A dual default-view model — with its open question named
The most load-bearing IA decision was an assessment-first default for embryologists with a patient-first toggle for clinicians. I shipped it as the design direction while flagging, openly, that the patient-first concept had not been validated with external users — the single biggest confidence gap, and the first thing I'd put in front of real clinicians before launch. 'Designed' is not the same as 'proven,' and saying so is part of the work.
- 03
Frame the AI as decision-support, never autonomous
In a regulated clinical product, how the AI positions itself is a trust and safety surface. The platform frames its predictions as support for a clinician's judgment — reinforced in copy and empty states — never as an autonomous verdict. It's the honest framing, and it's what the research said clinicians and patients actually trust.
Approved for rollout — and a system that de-risks what's next
Because the redesign hadn't reached end users on my watch, the honest impact is what I delivered and de-risked — not adoption numbers I can't claim. I delivered a validated, high-fidelity prototype and a codified design system, approved at the leadership level for rollout. The design made the platform strategy tangible: it reframed the product from a point solution toward a multi-role SaaS platform, in something stakeholders could click through rather than imagine.
It also left a reusable, AI-readable design-system foundation that de-risks every downstream build, and a repeatable human-AI build workflow documented for the team. What I'd validate next is the question I flagged from the start: the navigation defaults, with external clinicians, before the rollout flips on.
- ~30 screens
- Redesigned & systematizedLogin, dashboard, assessment, clinic insights and the long tail — under one coherent system.
- Approved
- For rollout at leadership levelA validated high-fidelity prototype + codified design system, greenlit as the platform's direction.
- Built with AI
- Prototype as source of truthA production-grade interactive prototype I built myself via a two-thread human-AI workflow.
