Case study

FamilySearch Design System

Building a scalable design system adopted by 50+ designers across the world's largest genealogy platform

Role
Product Designer
Timeline
Apr 2019 – Mar 2021
Company
FamilySearch

Context

  • FamilySearch is the world's largest genealogy organization with over 4.84 billion searchable records
  • International audience with a website and native apps in 10 languages

Research

I studied leading design systems including Google's Material Design, Adobe's Spectrum, IBM's Carbon Design System, and Apple's Human Interface Guidelines to establish best practices and identify patterns that would work at FamilySearch's scale.

My contributions

  • Contributed to cost savings by crafting reusable components and design patterns, optimizing development resources
  • Established a flexible framework through thorough research to ensure scalability and uphold design coherence
  • Meticulously documented component standards and accessibility guidelines to maintain clarity and inclusivity
  • Simplified components and prioritized usability, enhancing the overall user experience and product clarity
  • Enforced consistency across products, platforms, and languages, bolstering the brand’s identity and recognition

Color system

I defined comprehensive color palettes for both light (Daybreak) and dark (Nightfall) themes, ensuring accessibility and consistency across all products.

Component library

Built a comprehensive library of reusable components including cards, overlays, status indicators, progress bars, dialogs, and more, all documented with light and dark theme variants.

Tagging & highlighting

Designed the tagging and highlighting component for FamilySearch's image viewer, allowing users to tag people and highlight information in historical records. Documented anatomy, parts and spacing, and examples across both mobile and desktop.

Playground

I'm a big fan of hands-on learning, so I created an interactive playground with beginner, intermediate, and advanced levels to help designers learn and adopt the design system at their own pace.

Outcomes

Workshops & office hours

Conducted workshops and offered personalized 1:1 training sessions during office hours for individuals seeking assistance or guidance

Design system adoption

Achieved 100% adoption from the design team who lead their own teams to utilizing the component library

Built playgrounds

Created a playground with beginner, intermediate, and advanced levels for hands-on learning

Enhanced components

Continued to enhance components through data analysis and user interviews

Recap

What did I accomplish?

Designed and implemented a flexible design system, achieving full adoption from over 50 designers throughout the organization.

What skills did I acquire?

Creating a design system within Figma. Demonstrating expertise in accessibility and proficient documentation. Recognizing the value of simplification and feature reduction in enhancing usability and clarity of products.

What was my contribution?

I established the Figma workspace, defining color palettes, visual styles, typography, and more, while also crafting a substantial portion of the design components. I delegated specific components to fellow designers to enhance efficiency and accelerate the design process.