A warm system. Clear decisions.
Warm colour and expressive threads make a sensitive process approachable. Reusable controls keep questions, guidance and feedback clear in English and French.
Live · Ongoing
Before the
shared plan
Try the reviewHow would you like to stay in contact?
Alex · Intended parent
“I’d like to share an update each year, and stay open to more contact.”
Sam · Known donor
“I’m open to updates. I haven’t decided how involved I want to be.”
Interactive explanation of the product approach. Fictional people and answers; this is not a captured product screen.
Designing agreement without erasing difference.
Kinplan helps intended parents and known donors work through expectations separately, compare them and review shared decisions. I founded the product and own its direction, interaction design, requirements and AI-assisted implementation, September 2026–present.
Explore the AI discussion flow
The design constraint
A shared form makes it easy to record one answer before everyone has expressed a view. I designed independent answers followed by comparison and discussion. “Still exploring” or “To discuss” keeps uncertainty visible rather than turning it into agreement.
Keep the original answer
In the fictional test below, the donor chose occasional agreed contact while the parents preferred updates through the parents. The original selections are retained. Completing a questionnaire means someone has answered, not that everyone agrees.
Show what was agreed together
Either side can propose a shared term. Each side accepts it separately. The accepted term is shown beside the donor’s original answer, with a route back to shared review. This avoids silently replacing someone’s earlier perspective with the eventual resolution.
Confirmation belongs to a version
Answer completion, acceptance of a shared term and final review are separate states. An open disagreement blocks final confirmation. Saving a later change reopens affected topics and clears final confirmations, while unaffected accepted terms remain recorded. A review confirmation is not a signature.
What testing changed
Early testers found navigation unclear and encountered a cookie-consent interaction blocking access in an affected browser. I added clearer hierarchy, a welcome walkthrough and an essential-only consent fallback. The affected experience was successfully retested; task-level details and a completion-rate comparison were not retained.
A separate recorded product walkthrough on 21 October 2026 completed the parent and donor questionnaires with a deliberate contact disagreement. Final confirmation stayed blocked until both sides accepted a structured resolution; each side then confirmed the version separately. These are controlled tests with fictional participants, not customer adoption results.
That review also exposed a gap: a reopened questionnaire showed the original answer without its accepted shared term. I added the “Agreed together” context and reopening guidance shown above. The follow-up walkthrough checked both roles, English and French, and navigation across a section boundary.
Make the next action understandable
The welcome walkthrough explains navigation, undecided answers and the effect of later edits before asking people to work through sensitive questions. It is optional and can be reopened from “How to navigate”.
Evidence notes
Questionnaire, accepted-term and overview screens are retained captures of fictional hosted tests from 21 October 2026; the interface has continued to evolve. The navigation walkthrough was captured 1 November 2026. The state rules, historical test evidence and early tester feedback are identified separately. Kinplan remains an early-stage product; these checks do not establish commercial traction.
AI product design · Guided reflection
Help people think. Leave the answer with them.
I designed the guide as a sounding board inside the questionnaire. It explains possibilities, builds on the conversation and makes space for uncertainty. Selecting answers, saving them and accepting shared terms remain participant actions.
Context without overreach
The guide receives the question topic and a limited recent conversation. It does not infer someone else’s intentions or consent.
Continuity without pressure
Follow-ups move to an unexplored practical distinction. Continued uncertainty gets a way to leave the point open, rather than another question.
Control stays explicit
The guide never chooses, applies or saves an answer. AI processing is disclosed, and closing the guide clears the conversation.
Verified on the hosted product with fictional data: contextual launch, a non-repeating follow-up, continued uncertainty, unchanged selection and chat clearing. English and French choice-boundary checks were also verified live; automated regressions cover both parent and donor roles. These are controlled product checks, not adoption results or an independent usability study.
What changed, and how AI fits the build
Answer requests previously entered the same neutral fallback repeatedly. I made the boundary explicit, added history-aware grounding and gave repeated choice requests a clear return to the questionnaire. The guide still cannot select an answer.
The user-facing guide is separate from AI-assisted development. I use AI tools to implement React and TypeScript and work through states; I retain responsibility for the product decisions, boundaries and review.
Trust across the whole experience.
English and French carry through questions, guidance and documents. Preparation, review and eventual signatures remain distinct. Kinplan does not provide legal or medical advice, determine parentage or guarantee enforceability.
Explore the visual system and build
kinplan
Thoughtful beginnings.
Clear intentions.
Clear intentions.
Georgia for a human, editorial voice.
System sans for clear questions and actions.
Why this matters
Making room for different expectations gives everyone a clearer place to begin.
An interactive specimen of the product’s visual language.
Ivory#F7F1E3
Ink#234D49
Muted#52635C
Accent#315F58
A hierarchy for clarity.
A clear hierarchy separates the topic, question and guidance.
Your family, your way.
What matters most to you?
There’s room to think it through together.
Choose “to discuss” when you’re still deciding.
Controls with a purpose.
One primary action, clear alternatives and unmistakable selection states.
Interactive specimen · no plan is created or saved.
Each participant confirms their own perspective.
Helpful in every state.
Keep labels visible and make the next step specific.
The name you’d like us to use in your welcome.
Validation example
Preferred first name
Enter the name you’d like us to use.
Illustrative error state.
Changes saved
Design system guidance
A hierarchy for clarity.
Expressive headings introduce the topic. Plain-language questions carry the task. Supporting text explains the decision without competing for attention.
Controls with a purpose.
One primary action moves the task forward. Secondary actions offer a way back. Labels stay visible, and a selected answer is shown through both colour and a native control.
Helpful in every state.
A field’s label explains what to enter. Help text adds context; an error gives a specific next step. Colour supports the message rather than carrying it alone.
Language, layout and accessibility
- English and French
- Controls grow with their labels. Translation includes help, errors and confirmation states.
- Space and rhythm
- Related content sits close together; larger gaps separate questions and sections. Common spacing steps are 8, 16, 24, 32 and 48 pixels.
- Keyboard and focus
- Native inputs, visible labels and a clear focus indicator keep the route through the page understandable.
- Motion with restraint
- The threads add personality at transitions. Reduced-motion preferences keep the content available without the movement.
One mark. Two perspectives.
Garden and Drawn explore the same six themes, then gather into the Kinplan logo.
Motion principles
This comparison loops the product’s original paths on a shared clock; product transitions remain finite. Pause freezes both styles and the welcome. Reduced-motion preferences start with still illustrations.
Make a connection.
Two perspectives, one conversation.
Auto-cycling · both styles share one clock
A welcome in two languages.
Hand-drawn lettering flows into the mark and back again.
Welcome ↔ Kinplan
A little levity.
Familiar planning friction becomes a playful invitation to talk.
Campaign approach
The humour comes from everyday moments—the “quick” catch-up or a tiny question with a long answer—while treating people and their family arrangements with care.
Art direction, copy and natural English/French adaptations share one system across square, portrait and landscape formats.
Implementation and tools
Full technology stack
Interface and application
React 19 · TypeScript · Next.js App Router conventions through Vinext and Vite · Tailwind CSS 4 · Base UI and Radix/shadcn primitives · Lucide icons · React Hook Form · Zod · next-themes · date-fns · libphonenumber-js.
Data, identity, and integrations
SQLite with Drizzle ORM and a D1-compatible database binding in the managed ChatGPT Sites runtime · Supabase Auth · jose for token handling · Web Crypto for protected session and plan data · Resend transactional email · Stripe Checkout and webhook integration · pdf-lib with fontkit for document generation.
AI and delivery
Cloudflare Workers AI with Llama 3.1 8B Instruct for bounded assistance · ChatGPT/Codex for AI-assisted implementation and iteration · ESLint, TypeScript checks, production builds, automated fixtures, and axe-core accessibility checks. The managed Sites deployment is distinct from the separate Cloudflare migration investigations.
Discovery and operations
Google Search Console · Google Analytics and consent-aware Microsoft Clarity integration · Ahrefs Site Audit · PageSpeed Insights/Lighthouse · WAVE · Schema.org validation · UptimeRobot · a separate Cloudflare Workers availability monitor with D1 state and Healthchecks.io heartbeat. Tool readings are dated observations, not continuous certification.
