
How a family tree tool I designed simplified family storytelling
My Role: Product Designer
Timeline: 3 months
Problems
Solution
Create a web-based family tree app that organizes and enlivens family stories and personalities—not just data—in one accessible place. Design the solution to allow for easy writing, sharing, and collaboration.
Methods Used
Interviews
Affinity Diagramming
Competitive Analysis
IA Mapping
Wireframing
Hi-Fi Prototyping
Usability Testing
New Relative Flow
Relative Page Overview
📖 Background
My family is always recording history. Over the years, family members tried documenting family history through binders of stories, scanned documents, and Facebook pages. While these meant to preserve family information, they often end up being hard to maintain or build on without the person who originally created the document.
For a long time, we'd talked about finding a better way to preserve family history, but without action.

The cover
1
of
8
This is a binder that my great uncle Merle created over many years capturing his life story, but also a lot stories and documents from my Mom's side. Tons of great information and by far the most organized family artifact we have, but very dense.
💥 An idea is born
After my uncle Merle passed (who was widely seen as the family historian on my mom's side), there was a renewed sense of duty amongst my immediate family to carry the torch and preserve not just the history he knew, but also the enthusiasm and intention he told it with.So, I sat down with my parents and we started brainstorming at what we wanted to preserve, and how we might do that. That sparked the idea for some kind of digital document or platform to centralize our family records and tree.
💬 Interviewing
With just a high-level idea, we aimed to create something engaging for both immediate and extended family. To start, we prepared 11 guiding questions and reached out to family members for input on the problem.

Understanding important data
2
of
5
A handful of screenshots of the summarized responses recorded in FigJam from each interviewee. Each color represents a different interview, and each sticky note represents a unique answer/response.
📊 Identifying problems and trends
Beyond having great, meaningful conversations and feeling closer to my relatives, I was able to gather some insights.Problems
Other trends

Understanding important data
2
of
5
A handful of screenshots previewing the insights gathered and which interview questions/responses they were generated from.
🔭 Looking at other tools
Afterwards, we wanted to take a look at what other ancestry or family tree tools offered, and how we could compare that against some of the interview responses. We created trial accounts and very simple family trees on the following tools:
In short, the tools had several consistent issues:
ℹ️ Deciding on problems to solve
Based on our research, I identified two key problems to address:
Phase 1 Scope
💡 Feature brainstorming
Afterwards, we felt we were ready to start brainstorming what actual features and content we wanted to include in the solution.We started by brainstorming the content we wanted to include, and the actions we wanted to make available to users.

🧩 Information architecture ideation
After aligning on the initial content and actions we wanted to include in the solution, I mapped out how we might organize this content in the system, and where the actions might be performed.

✍️ Wireframing
From here, I started sketching out the flows and interfaces.
I kept this very high-level, focusing on how best to visualize and prioritize the content while keeping workflows straightforward and relevant to the contexts in which they lived.

⚙️ Prototyping
After creating initial workflows and wireframes, I created a lightweight design system, and eventually functional prototypes.
I incorporated UI patterns from Window's Fluent and workflows from Facebook, given respondents' product preferences.

🔍 Usability testing & feedback
I set up video calls with 5 of the original 6 family members and gave them a handful of pre-defined tasks (5 in total) to complete to the best of their ability without any guidance.
At the end of each task, I asked:
The results were encouraging—100% task completion and an NPS of 89 across all tasks.
However, based on discussions and some of the feedback, I came away with two areas I wanted to explore further:

🔨 Exploring & refining
After exploring and refining, I added two items to the prototype:
The edits were tested via two additional follow-up tasks that acted as an "extension" of the first usability test.
The results for the additional tasks were also very positive.
100% task completion and an 85 NPS.
💭 Reflection & next steps
While the functionality for sharing, posts, and collaborating was conceptual and would require a real developed product to work, the tool's emphasis on writing and sharing stories was received positively and stress-tested for a variety of scenarios. As for next steps, for now, I'm working on inputting my own family tree information into a prototype that family members will be able freely access and comment suggestions on (via Figma comments).Additionally, I've been coordinating with a handful of software engineering friends to discuss developing the solution. This is a long process, but we all see this as a fun side/passion-project that would connect us to our families once created. For myself, I've always wanted to dive a bit deeper into front-end development, so developing this project would allow me a bit of a sandbox to learn and explore :)

Overview of the interviewees
1
of
5
A handful of screenshots previewing the insights gathered and which interview questions/responses they were generated from.

How a family tree tool I designed simplified family storytelling
My Role: Product Designer
Timeline: 3 months
Problems
Solution
Create a web-based family tree app that organizes and enlivens family stories and personalities—not just data—in one accessible place. Design the solution to allow for easy writing, sharing, and collaboration.
Methods Used
Interviews
Affinity Diagramming
Competitive Analysis
IA Mapping
Wireframing
Hi-Fi Prototyping
Usability Testing
New Relative Flow
Relative Page Overview
📖 Background
My family is always recording history. Over the years, family members tried documenting family history through binders of stories, scanned documents, and Facebook pages. While these meant to preserve family information, they often end up being hard to maintain or build on without the person who originally created the document.
For a long time, we'd talked about finding a better way to preserve family history, but without action.

The cover
1
of
8
This is a binder that my great uncle Merle created over many years capturing his life story, but also a lot stories and documents from my Mom's side. Tons of great information and by far the most organized family artifact we have, but very dense.
💥 An idea is born
After my uncle Merle passed (who was widely seen as the family historian on my mom's side), there was a renewed sense of duty amongst my immediate family to carry the torch and preserve not just the history he knew, but also the enthusiasm and intention he told it with.So, I sat down with my parents and we started brainstorming at what we wanted to preserve, and how we might do that. That sparked the idea for some kind of digital document or platform to centralize our family records and tree.
💬 Interviewing
With just a high-level idea, we aimed to create something engaging for both immediate and extended family. To start, we prepared 11 guiding questions and reached out to family members for input on the problem.

Overview of the interviewees
1
of
5
A handful of screenshots of the summarized responses recorded in FigJam from each interviewee. Each color represents a different interview, and each sticky note represents a unique answer/response.
📊 Identifying problems and trends
Beyond having great, meaningful conversations and feeling closer to my relatives, I was able to gather some insights.Problems
Other trends

Overview of the interviewees
1
of
5
A handful of screenshots previewing the insights gathered and which interview questions/responses they were generated from.
🔭 Looking at other tools
Afterwards, we wanted to take a look at what other ancestry or family tree tools offered, and how we could compare that against some of the interview responses. We created trial accounts and very simple family trees on the following tools:
In short, the tools had several consistent issues:

Ancestry.com search tab
1
of
5
A handful of screenshots previewing the insights gathered and which interview questions/responses they were generated from.
ℹ️ Deciding on problems to solve
Based on our research, I identified two key problems to address:
Phase 1 Scope
💡 Feature brainstorming
Afterwards, we felt we were ready to start brainstorming what actual features and content we wanted to include in the solution.We started by brainstorming the content we wanted to include, and the actions we wanted to make available to users.

🧩 Information architecture ideation
After aligning on the initial content and actions we wanted to include in the solution, I mapped out how we might organize this content in the system, and where the actions might be performed.

✍️ Wireframing
From here, I started sketching out the flows and interfaces.
I kept this very high-level, focusing on how best to visualize and prioritize the content while keeping workflows straightforward and relevant to the contexts in which they lived.

⚙️ Prototyping
After creating initial workflows and wireframes, I created a lightweight design system, and eventually functional prototypes.
I incorporated UI patterns from Window's Fluent and workflows from Facebook, given respondents' product preferences.

🔍 Usability testing & feedback
I set up video calls with 5 of the original 6 family members and gave them a handful of pre-defined tasks (5 in total) to complete to the best of their ability without any guidance.
At the end of each task, I asked:
The results were encouraging—100% task completion and an NPS of 89 across all tasks.
However, based on discussions and some of the feedback, I came away with two areas I wanted to explore further:

🔨 Exploring & refining
After exploring and refining, I added two items to the prototype:
The edits were tested via two additional follow-up tasks that acted as an "extension" of the first usability test.
The results for the additional tasks were also very positive.
100% task completion and an 85 NPS.
💭 Reflection & next steps
While the functionality for sharing, posts, and collaborating was conceptual and would require a real developed product to work, the tool's emphasis on writing and sharing stories was received positively and stress-tested for a variety of scenarios. As for next steps, for now, I'm working on inputting my own family tree information into a prototype that family members will be able freely access and comment suggestions on (via Figma comments).Additionally, I've been coordinating with a handful of software engineering friends to discuss developing the solution. This is a long process, but we all see this as a fun side/passion-project that would connect us to our families once created. For myself, I've always wanted to dive a bit deeper into front-end development, so developing this project would allow me a bit of a sandbox to learn and explore :)
📖 Background
💥 An idea is born
💬 Interviewing
📊 Identifying problems
🔭 Looking at other tools
ℹ️ Problems to solve
💡 Feature brainstorming
🧩 IA ideation
✍️ Wireframing
⚙️ Prototyping
🔍 Usability testing
🔨 Exploring & refining
💭 Reflection & next steps