Family Tree Builder: Rooted
Web App
My Role
- Product Manager
- Designer
- Engineer
Tools
- React
- TypeScript
- React Flow
- vis-network
- Supabase
- Cloudinary
- Vercel
Timeline
- 2026
Description
An interactive web app that reimagines genealogy by making family tree creation as fast and as visual as sketching on paper
Context
I saw a great opportunity to build this tool after sitting down with my grandparents to hear stories about their siblings and cousins. Trying to visualize all those complex, winding relationships on a flat piece of paper made me realize how fun it would be to bring that dynamic family history to life in real time.
My goal was to create a collaborative tool where anyone could sit down and immediately start building a tree with zero learning curve. I wanted to skip the tedious process of filling out forms and defining rigid relationships. Instead, you can start with just one person and watch the tree grow naturally as you sketch it out.
To make exploring these stories easy, I built a few different ways to look at the data:
Standard Tree View: A clean, structured layout.
Dynamic Network Map: Uses physics-based animations for a big-picture, interactive exploration of the family.
Branch Isolation Feature: Lets you focus on just one specific family branch at a time.
Product Scoping & Sequencing
- Phase 1: Standard Tree + Ghost Connectors I started with the data entry experience. Before anyone can enjoy exploring a network of information, they need an easy, intuitive way to actually build it. Think about how we talk about family: you might say, "my sister's husband's parents." I wanted the app to work exactly like that train of thought. You should be able to just click, chain relationships together, and add people to the tree on the fly. That's why I started by building the , to make adding new connections feel that natural.
- Phase 2: Dynamic View Once the creation flow felt seamless, I introduced the dual-view. Alongside the structured tree view for hierarchy, I built a force-directed network map. The goal was to give users that "wow" moment when they step back and see a complex family tree come to life as a dynamic and connected web.
- Evaluating Trade-off: Delay Feature I intentionally delayed interactive physics animations until basic creation mechanics were locked. A beautifully animating canvas means nothing if users struggle to input their data.
Feature Breakdown
- Standard Tree View: A clean, structured layout for a clear top-down read of hierarchy and lineage.
- Ghost-Node Interface: Eliminated the need to use traditional sidebar forms. Clicking an active node triggers ghost nodes directly on the canvas, enabling users to spawn relatives with a single click.
- Force-Directed Map: Utilized physics-based properties to make navigating massive networks tactile. Dragging family nodes pulls, stretches, and bounces connected branches dynamically in real-time.
- The Excel View Tab: Implemented a toggleable spreadsheet panel at the bottom, allowing users to group, search, and isolate specific branches (e.g., dad's side) to manage visual noise.
Target Metrics
These metrics were informed by my desire for any user to be able to access this tool and immediately start building.
- Activation Speed: Minimizing the time elapsed from initial sign-in to a user anchoring their first parent, child, or partner relationship node.
- Task Completion Rate: The percentage of active user sessions that successfully build out a 3-generation branch in a single session without dropping off.