Faster Campaign Design
Reusable components sped up design and reduced repetitive work.
Faster, More Consistent Design at FamilySearch
Created reusable components that helped the team build faster and stay aligned with the design system.
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
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:
Slower process
Designers and devs created custom designs for each campaign, slowing the process.
Visual Inconsistencies
Campaign pages didn’t always match the design system, leading to uneven experiences.
Goal
Create flexible components that would:
Get team approval
Approved by both the campaigns and design system teams
Improve consistency and design speed
Clearer, faster, and more consistent designs across FamilySearch
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, an entirely 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.
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)
Event block
Storytelling layout for major life moments
Data Block
Facts like birth year, immigration, or residence
Consultant Panel
Redesigned for clarity and alignment with the design system
Testing
Testing approach
To check real-world fit, I ran two quick tests:
Recreated past campaigns using the new modular system to validate design efficiency with real campaign content.
- Presented the components to both the campaigns team and design system team.
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, faster, and more consistent designs across FamilySearch