top of page
IMG_1934.heic

How a family tree tool I designed simplified family storytelling

My role:  Product Designer

Timeline:  3 months

Problems

  • Family historical records often focus solely on stats and data. This disconnection not only makes the past feel distant and impersonal

  • Records that do exist are often scattered across mediums

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

New relative workflow (~3 mins)

Relative page overview (~2 mins)

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.

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.

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

  • No unified platform: Existing family tree tools are hard to use, costly, or lack sharing features, so people mix tools like Ancestry.com to accommodate different use cases.

  • Storytelling barriers: Writing life stories feels overwhelming, and many don’t know where to start.

  • Technology usage: Older relatives in the family use technology less but often know more about family history.

  • Information challenges: Verifying or sourcing data about older or distant relatives is difficult.

Other trends

  • Privacy concerns: People want to share sensitive stories and photos but hesitate to trust platforms.

  • Platform familiarity: Most use Windows apps and Facebook.

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:

  • Ancestry.com

  • FamilySearch.org

  • Findmypast.org

  • MyHeritage

  • Geneanet

  • Filae

In short, the tools had several consistent issues:

  1. Difficult navigation: Interfaces lacked hierarchy, resulting in an overwhelming experience.

  2. Limited sharing: Paid accounts were often required to view records, creating barriers to sharing.

  3. Data over storytelling: Tools focused on sourcing data rather than presenting it meaningfully or supporting freeform storytelling.

Some examples of Ancestry.com's features, workflows, and interface, along with handful of annotations and reviews of some workflows.

Deciding on problems to solve

Based on our research, I identified two key problems to address:

  1. Family tree records are scattered across different tools used for sourcing, validating, or organizing information.

  2. Records focus more on data than on capturing stories and personalities.

Phase 1 Scope

  • Focus primarily on creating an organization tool whose main function is to piece together information collected elsewhere. 

  • Do not design features for researching, sourcing, or validating data.

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.

Information Architecture (ideation for kicking off wireframes).jpg

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.

Screen Shot 2024-05-08 at 3.53.11 PMCDT.png

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:

  • How they felt that task went

  • How easy they felt it was to complete on a scale of 1-10 (10 being easiest)

  • What they thought about the feature included in the task

 

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:

  • Shared relatives: How to handle duplicate relatives when users create overlapping records, including options like merging them.

  • Limited information: Addressing scenarios with minimal data, such as distant ancestors with little known history.

Screenshot 2024-06-19 at 7.51.53 PM.png

Exploring & refining

After exploring and refining, I added two items to the prototype:

  1. Duplicate relative workflows: Options for users to replace or merge their relative with a shared relative.

  2. Limited information scenarios: An example for relatives with little data and an "unknown" checkbox for required fields, alongside date pickers in the new relative workflow.

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 :)

bottom of page