FTDNA Design System
Overview
FamilyTreeDNA had grown into an ecosystem of 20+ digital products, many with their own visual identities, interaction patterns, and technical implementations.
As the product and teams scaled, these inconsistencies created increasing UX, UI, and technical debt. I led an initiative to establish a shared design-system foundation that could support a more consistent and scalable FamilyTreeDNA experience.
The challenge
The challenge went beyond inconsistent UI. New features often introduced new patterns, forcing design and engineering to revisit foundational decisions and adding complexity with every release.
At the same time, FamilyTreeDNA was transitioning from ASPX to Angular. We saw an opportunity to use that migration to establish a shared foundation rather than carry the same fragmentation into a new technology stack.
THE TEAM
Monique D - Art Director
Lori L - UX Designer
Will L - Sr UX Designer
James G - Engineer
MY ROLE
I led the design-system initiative, defining its foundations and driving adoption in collaboration with design and engineering.
TOOLS USED
Confluence, Adobe XD, Angular Material, GitHub
⛵ Auditing the ecosystem
I audited 20+ products to understand the UX, UI, and technical inconsistencies across the FamilyTreeDNA ecosystem.
As part of the audit, I used CSS Stats, recommended by Brad Frost in Atomic Design, to analyze existing styles and identify patterns across colors, typography, and CSS properties.
FamilyTreeDNA overview found by CSS Stats.
FamilyTreeDNA 166 unique colors found by CSS Stats.
Researching Other Systems
We reviewed mature design systems including Carbon, Atlassian, and Salesforce to understand how other teams approached component architecture, documentation, and reusable patterns.
Salesforce - Lighting Design System
Atlassian - Design System
IBM - Carbon Design System
Creating an inventory
With the analyses of the audit previously made, we decided to focus first on the smallest user interface structures, like buttons, form fields, icons, avatars, color palettes, etc.
Defining buttons, inputs, labels and other small design elements.
Defining Tree Profile Cards, Steppers, Tabs, and Alert Messages.
Dialogs, Search bar, Tooltips, Nubbins, Paginator, Parental Matching, Advanced Filters
Then, we wired up the groups of components together to build functional blocks.
Components work together in different contexts like Header, Tables, Profile info, and Dialog with multiple types of permissions.
Once the core components were established, we combined them into reusable templates to create more consistent experiences across products and features.
🪄 From Design to Implementation
Breakpoint system
Working with engineering, we standardized reusable breakpoints across mobile, tablet, and desktop experiences to reduce inconsistencies between products.
Mobile | Tablet | Desktop
Wit the help of the dev team we created a reusable set of breakpoint to be use across different apps
Custom breakpoints using Angular Flex-Layout
Angular Material
As FamilyTreeDNA began migrating from ASPX to Angular, our team proposed Angular Material as the technical foundation for the design system.
It provided reusable and accessible interaction patterns that aligned with the new Angular architecture while allowing us to customize components around the FamilyTreeDNA brand and build custom patterns when needed.
Driving Adoption
I created a shared master library so designers could work from the same components and patterns.
Developer adoption took longer, so we introduced biweekly design system workshops to review implementation challenges, reusable coded components, and cases where custom components were needed.
Shared design systems in Adobe XD
Documentation
We documented components and usage guidance in Confluence so designers, developers, product managers, and other stakeholders had a shared reference.
Using Confluence to document our components
Impact
~2× faster - Project delivery compared with similar projects before design system adoption.
~2× faster - Prototyping and concept validation.
The system also increased component reuse, improved consistency across products, and created stronger alignment between design and engineering.
What I Learned
The biggest lesson was that a design system is more than a component library. Its value comes from creating shared decisions, reusable implementation patterns, and a common language between design and engineering.