KhanFamily website analysis (for building a similar site)

Goal (what this site is)

Note: If you’re building a “1:1 copy”, be careful about copyright/trademark (name, logo, copywriting, screenshots, and design assets). This doc focuses on structure + functionality you can replicate while writing your own text/branding.

Pages / routes observed

1) / (Homepage)

• Top navigation
• Feature requests (links to Canny): https://kintree.canny.io/feature-requests
• How it works
• Blog
• Pricing

• Hero section
• Headline: “Build your family tree, fast.”
• (Homepage also appears to repeat a value prop in some snippets: “Build a beautiful family tree online for free with ease. Add photos and collaborate with your family members.”)1

• Footer
• Support email: hello@khan.family
• Privacy
• Terms & Conditions
• Copyright notice

• The homepage navigation suggests the main conversion paths are:
• Pricing (upgrade)
• How it works (education)
• Login / app access (not visible in the short extract, but the site has /login)

2) /pricing (Pricing page)

• A comparison table with columns: FREE vs PREMIUM.2

• Items listed:
• Family tree builder
• Profile photos
• Ability to share trees publicly
• Infinite family trees (Free limit: 1)
• Infinite tree nodes (Free limit: 40)
• Private collaboration within a tree

• A “Lifetime Membership” offer: $89 USD with “Buy now”.2

• You’ll need:
• A pricing table component
• Checkout flow (or at least a payment button integration)
• Plan enforcement rules (tree count and node count limits)

3) /login (Authentication page)

• Passwordless email login link (“We automatically sign you up and email you a passwordless login link.”)

• “Sign in with Google” option.3

• Implement:
• Email magic-link authentication
• Google OAuth
• An onboarding path that creates an account if it doesn’t exist

Product features implied (from public descriptions)

• Easy family tree building

• Collaboration with family members

• Adding photos and richer profiles (not just names)

• Privacy / secure sharing

Information architecture (recommended replica)

1. Home (/)
• Hero + 3–5 key benefits
• Social proof (numbers, testimonials)
• Screenshots (your own)
• CTAs: “Start free”, “See pricing”

2. How it works (/how-it-works)
• 3–6 step explanation
• Example tree flow
• FAQ section

3. Pricing (/pricing)
• Free vs Premium
• Lifetime / monthly (your choice)
• FAQ + refund policy

4. Blog (/blog)
• List + post detail pages

5. Feature requests (external or internal)
• Canny-style board

6. Legal
• Privacy policy (/privacy)
• Terms (/terms)

7. Support
• Contact page (/support) or just support email

8. Auth
• Login (/login)
• (Optional) signup redirect, account page

UI components to build (checklist)

Global layout

Homepage

Pricing page

Login page

Backend requirements (if you’re copying the app concept, not just marketing pages)

Core app working (from your screenshots)

A) Tree canvas (main screen)

• The app opens on a large, zoomable canvas with a family tree graph (boxes/cards connected with lines).

• Each person appears as a person card containing:
• Avatar placeholder or photo
• Given name (and optionally surname)
• A small info strip (in your example: years like “1999 – 2005”)
• A role label like “FOCUS PERSON” on the selected card

• One card can be visually emphasized as the currently selected / focused person (darker highlight).

B) Selecting a person

• Clicking a person card selects it (highlight changes).

• Selected cards show quick actions (in your screenshots, one person card shows a red CTA like “VIEW MORE”).

C) Edit drawer (right side panel)

• Top area with avatar + edit icon

• A prominent action button: “+ Add Collaborator” (per person / per tree collaboration)

• A form grouped under “Biography” with fields such as:
• First and middle names
• Surname
• Surname at birth
• Known as
• Gender: Male / Female / Other (radio buttons)
• Status: Living / Deceased (radio buttons)
• Date of birth (separate inputs: DD / MM / YYYY)
• Place of birth (place search)

• Bottom action buttons: Save and Cancel

• Close “X” at the top to dismiss the drawer

D) Bottom-left utilities

• A Search button (likely opens a person search / jump-to feature)

• A Tools button that opens a floating tools menu.

E) Tools menu options (from screenshot)

• Reverse Names (toggle)

• Use Known As (toggle)

• Download JPG

• Change Background

• Import GEDCOM

• Export GEDCOM

• You’ll need GEDCOM import/export support if you want feature parity.

• You’ll need an export-to-image function (“Download JPG”) and canvas background options.

Implementation notes (what you must build)

• Tree rendering: graph layout + edge routing + spacing rules to prevent overlap

• Canvas interactions: pan, zoom, fit-to-screen, re-center on selected person

• CRUD for people: create/edit person profiles (the right drawer form)

• Relationship editor: add parent/child/spouse links and auto-layout updates

• Collaboration: invite collaborators (at least at the tree level; the UI shows it in the person drawer)

• User accounts + authentication (magic link + OAuth)

• Core entities:
• Tree
• Person (node)
• Relationships (parent/child/spouse)
• Media (photos)
• Collaborators / permissions per tree

• Limits for free plan:
• Max trees
• Max nodes per tree

• Public sharing:
• Public tree page route + privacy controls

• Audit + moderation basics (optional)

Acceptance criteria (what “done” looks like for a v1)

• Marketing site loads fast, mobile responsive, and has:
• Home, Pricing, Login, Privacy, Terms, Support contact

• Pricing page clearly explains Free vs Premium limits and shows a purchase CTA

• Login supports passwordless email + Google

• All navigation links work, footer is present on all pages

Notes from the current scrape (limitations)

• colors, fonts, spacing, animations

• hero illustration / screenshots

• section order and copy