UX Case Study & User Flow Redesign
Improving spatial orientation and usability within complex family tree structures by redesigning expansion behaviors, navigation states, and sibling-view interactions for a more intuitive genealogy experience.
01
The Overview
FamilySearch’s family tree experience originally supported a relatively simple navigation structure focused primarily on direct ancestors and descendants. Users could expand vertically through generations using directional arrows that moved upward or downward through the tree hierarchy.
As the platform evolved, sibling branch expansion was introduced to allow users to explore broader family relationships horizontally across the tree. While the added functionality increased genealogical depth, it also introduced significant usability and orientation challenges within the interface.
My role focused on identifying navigation friction points, simplifying expansion behaviors, and redesigning the sibling exploration experience to reduce cognitive overload while maintaining the complexity and richness of the genealogy data.
The redesign centered around improving visual orientation, reducing interface overwhelm, and helping users maintain contextual awareness while navigating large, expanding family structures.
02
The Challenge
The original family tree experience was relatively intuitive because navigation occurred primarily in two directions: upward through ancestors and downward through descendants.
However, once sibling expansion functionality was added, users were suddenly interacting with expansion controls moving in all four directions simultaneously. The interface became visually noisy and increasingly difficult to navigate, especially on mobile devices and dense family trees.
Several major usability issues emerged:
Key UX Problems
-
Expansion arrows became visually overwhelming
-
Users struggled to identify which branches were expanded
-
Horizontal sibling branches pushed surrounding tree nodes out of place
-
Large sibling expansions caused users to lose spatial orientation
-
The shifting layout made it difficult to relocate the original person of focus
-
Mobile navigation became increasingly disorienting within dense tree structures
-
The challenge was to preserve the power and flexibility of expanded genealogy exploration while reducing confusion and helping users maintain a stable mental model of the tree structure.
03
UX Analysis & Research
Through interface analysis and user behavior observation, several key patterns became clear:
Observed User Friction
-
Users frequently lost track of where they were within the tree
-
Expanding sibling branches created unexpected layout shifts
-
Multiple directional arrows increased cognitive load
-
Users struggled to distinguish active vs inactive expansion states
-
Dense visual clusters made navigation feel chaotic
-
Key Insight
The problem was not the amount of genealogy data — it was the lack of spatial stability and visual orientation cues during expansion interactions.
Resulting Design Goals
-
Reduce cognitive overload within large family trees
-
Improve visual orientation during expansion interactions
-
Preserve layout stability while exploring sibling branches
-
Make expanded states easier to identify
-
Simplify directional navigation cues
-
Improve usability across mobile and desktop experiences
-
Create a more guided and intuitive exploration experience
04
First Solution
Reduce the visual noise from the directional expanders with gray circular backgrounds on every node. These create repetitive visual clutter and make it difficult for users to quickly interpret active states.
Design Improvements
-
Removed unnecessary gray background fills from inactive expanders
-
Simplified the visual appearance of collapsed states
-
Retained circular indicators only for active expanded states
-
Introduced blue active-state indicators to clearly show which branches were currently expanded
Impact
This created a cleaner interface while giving users stronger visual orientation cues. Users could now immediately distinguish expanded areas of the tree from inactive branches without scanning excessive interface elements.
05
Second Solution
The most significant usability issue emerged when sibling branches expanded horizontally across the screen.
Previously, opening large sibling branches physically pushed surrounding tree nodes outward to create space. This caused major layout shifts that disrupted users’ mental map of the tree and made navigation feel unstable.
To solve this, I designed an overlay-based sibling expansion system.
Overlay Solution
-
sibling branches expanded within a contained overlay layer
-
the primary tree layout remained spatially stable
-
users maintained contextual awareness of their current location
-
sibling exploration became isolated without disrupting surrounding branches
UX Benefits
-
Reduced disorientation during expansion
-
Preserved users’ spatial memory
-
Prevented large layout jumps
-
Improved focus within dense relationship groups
-
Created a more controlled exploration experience
The overlay system allowed users to explore wider family relationships without losing track of the main lineage structure.
06
Before & After
These examples showcase the exact same sibling branches expanded, and give clarity into the solutions created.
Before
-
Expansion arrows created visual clutter
-
Multiple directional controls felt overwhelming
-
Horizontal expansions pushed the tree out of alignment
-
Users frequently lost orientation during exploration
-
Dense trees became difficult to navigate on mobile
After
-
Cleaner directional hierarchy
-
Active states clearly communicated
-
Stable spatial layout maintained during sibling expansion
-
Improved orientation within large trees
-
Reduced cognitive load across devices
-
More controlled and intuitive exploration experience
The redesign was especially important for mobile users navigating large family structures within limited screen space.
07
Outcome & Impact
The redesign improved orientation, reduced interface overwhelm, and created a more stable navigation experience within complex family trees.
By simplifying expansion states and introducing an overlay-based sibling exploration model, the experience became more intuitive while still supporting deep genealogical discovery.
Key Outcomes
-
Improved user orientation during exploration
-
Reduced cognitive overload
-
More stable navigation experience
-
Cleaner interaction hierarchy
-
Improved mobile usability
-
Better contextual awareness during sibling expansion