Young Breast Cancer Survivors
A site for young breast cancer survivors and the people who support them, built around a birth control comparison tool evaluated specifically for survivors, with every part of it editable by the client team.
What they needed
The Department of Family Medicine wanted a site for young breast cancer survivors and their support people. It needed a birth control comparison tool that shows which methods are safe for survivors, plus a decision-tree quiz, patient stories, resources, and a glossary. The audience is survivors, families, and caregivers, not clinicians, so the site had to be welcoming and easy to read, and professional without feeling medicalized. It began as a variant of an existing site, then became a custom build once the comparison tool and quiz were in scope.
The client team also planned to keep the site current themselves, and they wanted as much control as possible. Text, photos, the wording on every filter and safety label, and the quiz questions all had to be editable in Sanity, without waiting on a developer.
Architecture
Eleventy builds the site from Sanity content, using Nunjucks templates, Tailwind CSS v4, and Alpine.js for interactivity. Pages are assembled from reusable section types (text, image, accordion, quote, video, table, promo cards, and more) that editors combine in Sanity Studio. Pagefind adds on-site search, and Jampack optimizes assets after the build. Publishing in Sanity fires a webhook that starts a GitHub Actions build and deploys to Cloudflare Pages, so edits go live without anyone touching code.
Each birth control method is a Sanity document with the facts the tool needs: safety for survivors, category, hormone level, STI protection, discreet use, period impact, and frequency. The listing groups methods under the safety labels and narrows them with filter pills. Visitors can check up to three methods and compare them side by side, and each method has a detail page built from accordions. Matching and grouping live in a small pure-JavaScript module with unit tests, so the rules can be checked without a browser.
The decision tree began as a flowchart in a PDF. A flowchart is hard to use with a screen reader, so I built it as a step-by-step quiz that shows one question at a time. Editors author the questions, branches, and outcomes in Studio, and validation catches a branch that points nowhere or a duplicate key before anything can be published.
Sanity publish → webhook → GitHub Actions (repository_dispatch)
npm run build:site # clean → CSS → Eleventy → Pagefind → Jampack
wrangler pages deploy # Cloudflare Pages
cd site && npm test # comparison, filter, safety label, and decision-tree logic The tricky parts
The client wanted to tune the tool often, so filters and labels had to be content, not code. The risk is an editor adding a pill that matches nothing. Each pill is now a label plus a 'show methods that are...' choice over facts already stored on every method, with a custom tag for anything else, and Studio warns when a pill matches no methods. The original five pills keep working through a mapping, so nobody had to re-enter them, and the matching logic has unit tests.
Because the tool is interactive, accessibility had to live in the interactions, not just the page. Keyboard testing showed that Space scrolled the page instead of checking a method, because the visually hidden checkbox had no real focus target. It now shows a focus ring and handles Space itself. The design uses Atkinson Hyperlegible and high-contrast color, and pa11y-ci checks the home page, methods listing, and compare page against WCAG 2 AA. The compare page still has open findings that I'm working through before launch.
- Birth control comparison tool with filters and side-by-side comparison of up to three methods
- Filter pills, safety labels, and quiz content editable in Sanity
- Decision-tree quiz built as a step-by-step wizard, with validation in Studio
- Atkinson Hyperlegible, high-contrast design, pa11y-ci at WCAG 2 AA
- Unit tests for comparison, filter, and decision-tree logic