Spencer Wright

Faster, More Consistent Design at FamilySearch

Created reusable components that helped our team build faster and stay aligned with the design system.

Product

FamilySearch

Team

1 UX Designer (me)

Project manager

1 Developer

Role

UX Designer

Timeline

8 weeks

Overview

At FamilySearch, campaigns help users explore their family history through personalized ancestor stories. But the design system didn’t support the campaign team’s needs—so every page had to be built from scratch.

To speed up our work and improve consistency, I created reusable components that fit into the FamilySearch design system. This helped us build campaign pages faster and stay visually aligned.

My impact

Faster Campaign Design

Reusable components sped up design and reduced repetitive work.

Improved Consistency

Clearer, more consistent designs across FamilySearch

Background

Problem

FamilySearch campaigns help users connect with their family history. But the design system didn’t support what the team needed.

As a result:

  • Designers had to create custom designs for each campaign, which made the process slower
  • Many campaign pages didn’t fully align with the design system, leading to visual inconsistencies across FamilySearch campaigns and pages

Goal

Create flexible components that would:

  1. Speed up page creation
  2. Improve consistency across campaigns
  3. Align campaign designs more closely with the FamilySearch design system

Research

What components did campaigns need?

To decide what should be turned into reusable pieces, I reviewed recent campaigns and met with the team to understand their needs. I looked for components that appeared frequently and could be standardized.

Common elements found in previous campaigns

Ancestor card

Shows key ancestor details and relationship links

Data block

Displays facts like birth year, immigration, or residence

CTA Button

Prompts users to explore further

Consultant Panel

Connects users to expert help

During a meeting with the team, we came up with the Event Block—a new component for highlighting major life moments through storytelling.

Brainstorming

Modular approach

After identifying common components, I worked with my design lead to define a clear structure. We chose a modular approach—designing reusable pieces that could be mixed and matched to build any campaign page.

Modular design with a slot for interchangeable components for each campaign.

Why a modular system?

Interchangeable

Components could be mixed, matched, and reused to fit any campaign structure

Consistent

Everything followed FamilySearch design standards to maintain a unified look and feel

Design

With the modular approach defined, I designed five reusable components based on the needs identified in research. Each one was built to be flexible across campaign types and consistent with the FamilySearch design system.

Final components

Ancestor card

Key ancestor details and relationship links (horizontal & vertical layout options)

Vertical and horizontal versions of the ancestor card

Event block

Storytelling layout for major life moments

Marriage event example

Data Block

Facts like birth year, immigration, or residence

Two different dataset examples

Consultant Panel

Redesigned for clarity and alignment with the design system

Redesigned panel to comply with design system

Testing

Testing approach

To check real‑world fit, I ran two quick tests:

  1. Recreated past campaigns using the new modular system to validate design efficiency with real campaign content
  2. Presented the components to both the campaigns team and design system team

Previous campaign (left), Recreated campaign (right)

Test results

Team Signoff

Both the campaigns and design system teams approved the new components

 Faster Creation

Testing confirmed campaigns were quicker to build—without sacrificing visual quality

Outcome

This project sped up campaign creation, improved consistency, and helped bridge gaps between teams.

Results

Project Approval

Approved by both the campaigns and design system teams

Improved Consistency and faster design

Clearer, quicker and more consistent designs across FamilySearch

Say hi

LinkedIn

© 2025 Spencer Wright

SW

Work
Resume
Contact

Faster, More Consistent Design at FamilySearch

Created reusable components that helped our team build faster and stay aligned with the design system.

Product

FamilySearch

Team

1 UX Designer (me)

Project manager

1 Developer

Role

UX Designer

Timeline

8 weeks

Overview

Background

Brainstorming

Research

Design

Testing

Launch

Overview

At FamilySearch, campaigns help users explore their family history through personalized ancestor stories. But the design system didn’t support the campaign team’s needs—so every page had to be built from scratch.

To speed up our work and improve consistency, I created reusable components that fit into the FamilySearch design system. This helped us build campaign pages faster and stay visually aligned.

My impact

Faster Campaign Design

Reusable components sped up design and reduced repetitive work.

Improved Consistency

Clearer, more consistent designs across FamilySearch

Background

Problem

FamilySearch campaigns help users connect with their family history. But the design system didn’t support what the team needed.

As a result:

  • Designers had to create custom designs for each campaign, which made the process slower
  • Many campaign pages didn’t fully align with the design system, leading to visual inconsistencies across FamilySearch campaigns and pages

Goal

Create flexible components that would:

  1. Speed up page creation
  2. Improve consistency across campaigns
  3. Align campaign designs more closely with the FamilySearch design system

Research

What components did campaigns need?

To decide what should be turned into reusable pieces, I reviewed recent campaigns and met with the team to understand their needs. I looked for components that appeared frequently and could be standardized.

Common elements found in previous campaigns

Ancestor card

Shows key ancestor details and relationship links

Data block

Displays facts like birth year, immigration, or residence

CTA Button

Prompts users to explore further

Consultant Panel

Connects users to expert help

During a meeting with the team, we came up with the Event Block—a new component for highlighting major life moments through storytelling.

Brainstorming

Modular approach

After identifying common components, I worked with my design lead to define a clear structure. We chose a modular approach—designing reusable pieces that could be mixed and matched to build any campaign page.

Modular design with a slot for interchangeable components for each campaign.

Why a modular system?

Interchangeable

Components could be mixed, matched, and reused to fit any campaign structure

Consistent

Everything followed FamilySearch design standards to maintain a unified look and feel

Design

With the modular approach defined, I designed five reusable components based on the needs identified in research. Each one was built to be flexible across campaign types and consistent with the FamilySearch design system.

Final components

Ancestor card

Key ancestor details and relationship links (horizontal & vertical layout options)

Vertical and horizontal versions of the ancestor card

Event block

Storytelling layout for major life moments

Marriage event example

Data Block

Facts like birth year, immigration, or residence

Two different dataset examples

Consultant Panel

Redesigned for clarity and alignment with the design system

Redesigned panel to comply with design system

Testing

Testing approach

To check real‑world fit, I ran two quick tests:

  1. Recreated past campaigns using the new modular system to validate design efficiency with real campaign content
  2. Presented the components to both the campaigns team and design system team

Previous campaign (left), Recreated campaign (right)

Test results

Team Signoff

Both the campaigns and design system teams approved the new components

 Faster Creation

Testing confirmed campaigns were quicker to build—without sacrificing visual quality

Outcome

This project sped up campaign creation, improved consistency, and helped bridge gaps between teams.

Results

Project Approval

Approved by both the campaigns and design system teams

Improved Consistency and faster design

Clearer, quicker and more consistent designs across FamilySearch

© 2025 Spencer Wright

Say hi

LinkedIn

SW

Work

Resume
Contact

Faster, More Consistent Design at FamilySearch

Created reusable components that helped our team build faster and stay aligned with the design system.

Product

FamilySearch

Team

1 UX Designer (me)

Project manager

1 Developer

Role

UX Designer

Timeline

8 weeks

Overview

Background

Brainstorming

Research

Design

Testing

Launch

Overview

At FamilySearch, campaigns help users explore their family history through personalized ancestor stories. But the design system didn’t support the campaign team’s needs—so every page had to be built from scratch.

To speed up our work and improve consistency, I created reusable components that fit into the FamilySearch design system. This helped us build campaign pages faster and stay visually aligned.

My impact

Faster Campaign Design

Reusable components sped up design and reduced repetitive work.

Improved Consistency

Clearer, more consistent designs across FamilySearch

Background

Problem

FamilySearch campaigns help users connect with their family history. But the design system didn’t support what the team needed.

As a result:

  • Designers had to create custom designs for each campaign, which made the process slower
  • Many campaign pages didn’t fully align with the design system, leading to visual inconsistencies across FamilySearch campaigns and pages

Goal

Create flexible components that would:

  1. Speed up page creation
  2. Improve consistency across campaigns
  3. Align campaign designs more closely with the FamilySearch design system

Research

What components did campaigns need?

To decide what should be turned into reusable pieces, I reviewed recent campaigns and met with the team to understand their needs. I looked for components that appeared frequently and could be standardized.

Common elements found in previous campaigns

Ancestor card

Shows key ancestor details and relationship links

Data block

Displays facts like birth year, immigration, or residence

CTA Button

Prompts users to explore further

Consultant Panel

Connects users to expert help

During a meeting with the team, we came up with the Event Block—a new component for highlighting major life moments through storytelling.

Brainstorming

Modular approach

After identifying common components, I worked with my design lead to define a clear structure. We chose a modular approach—designing reusable pieces that could be mixed and matched to build any campaign page.

Modular design with a slot for interchangeable components for each campaign.

Why a modular system?

Interchangeable

Components could be mixed, matched, and reused to fit any campaign structure

Consistent

Everything followed FamilySearch design standards to maintain a unified look and feel

Design

With the modular approach defined, I designed five reusable components based on the needs identified in research. Each one was built to be flexible across campaign types and consistent with the FamilySearch design system.

Final components

Ancestor card

Key ancestor details and relationship links (horizontal & vertical layout options)

Vertical and horizontal versions of the ancestor card

Event block

Storytelling layout for major life moments

Marriage event example

Data Block

Facts like birth year, immigration, or residence

Two different dataset examples

Consultant Panel

Redesigned for clarity and alignment with the design system

Redesigned panel to comply with design system

Testing

Testing approach

To check real‑world fit, I ran two quick tests:

  1. Recreated past campaigns using the new modular system to validate design efficiency with real campaign content
  2. Presented the components to both the campaigns team and design system team

Previous campaign (left), Recreated campaign (right)

Test results

Team Signoff

Both the campaigns and design system teams approved the new components

 Faster Creation

Testing confirmed campaigns were quicker to build—without sacrificing visual quality

Outcome

This project sped up campaign creation, improved consistency, and helped bridge gaps between teams.

Results

Project Approval

Approved by both the campaigns and design system teams

Improved Consistency and faster design

Clearer, quicker and more consistent designs across FamilySearch

© 2025 Spencer Wright

Say hi

LinkedIn