Public-service healthcare

Healthdirect Contraception Option Finder

A Next.js decision-support experience built with accessibility at the center, helping people explore contraception options through a guided quiz and self-directed comparison path.

Healthdirect website Book a project call

Role: Frontend developer on a healthcare decision-support product
Key work: Accessible quiz flows, reusable UI architecture, multilingual content, and privacy-conscious analytics.
Stack: Next.js, TypeScript, Accessibility, Storybook, next-intl
Link: Healthdirect website

Healthdirect contraception option finder quiz landing page

Screenshots

Key screens from the experience.

Healthdirect contraception quiz question screen — Decision-support quiz flow with progress, accessible answer controls, and a persistent quick-exit affordance.

Healthdirect contraception methods library page — Self-directed library path for users who want to browse contraception methods instead of starting with the quiz.

Focus

A high-trust healthcare product where frontend decisions need to preserve clinical meaning, privacy, accessibility, and content clarity.

Challenge

The product helps users understand contraception options without replacing individual medical advice. That meant the interface, content model, quiz flow, and analytics approach all needed to support informed choice while staying careful around clinical scope, sensitive information, translation, and accessibility.

Contribution

Built responsive page, block, component, and quiz-flow interfaces in a Next.js and React application.
Worked with a layered UI architecture where elements, components, blocks, and pages could be reviewed and reused without leaking implementation details into content.
Supported multilingual content behavior, including stable locale-neutral IDs, English fallback handling, CJK content, and RTL layout validation.
Implemented accessibility-sensitive interface details across keyboard behavior, semantic structure, target sizing, focus states, and screen-reader affordances.
Contributed to privacy-conscious analytics and submission flows designed around anonymized quiz-result data rather than personal identifiers.
Used Storybook to make components, blocks, pages, variants, and translated states easier for Healthdirect stakeholders to review.

Outcome

The work demonstrates frontend delivery in a high-stakes public health context, where accessibility, modern React architecture, content-driven UI, internationalisation, and privacy constraints all had to move together.