Campaign Components
How I sped up and improved the campaign creation process at FamilySearch with reusable components.
At FamilySearch, email campaigns are essential for keeping users engaged. But without flexible components in the design system, each campaign required custom designs—slowing down timelines and creating visual inconsistencies that frustrated the design system team. This was the challenge I faced when I joined FamilySearch as a UX intern.
To solve it, I created modular campaign components that fit seamlessly into the design system, speeding up the design process, maintaining consistency, and satisfying both the campaigns and design system teams.
Product
FamilySearch
Campaigns
Team
Project manager
Developer
Design lead
Role
UX designer
Background
FamilySearch is a nonprofit organization that helps people discover and connect with their family history. FamilySearch campaigns are crafted to boost user engagement by providing custom experiences focused on events, holidays, or unique discoveries. These campaigns aim to tell compelling stories that encourage users to explore their heritage.
However, the campaigns team found that the existing design system did not support their needs. My task was to develop custom components that addressed the campaigns team's needs while aligning with the overarching design system, ensuring consistency and efficiency.
Project Goal
Flexible Components for Streamlined and Consistent Design
Create flexible campaign components that streamline the design process, maintain consistency, and satisfy both the design system and campaigns teams.
Research
To start, I reviewed past campaigns to identify the most commonly used elements that could be turned into components. This analysis revealed several recurring elements used in every campaign:
Ancestor card
Highlighted one or two ancestors with key information and a link to view the relationship.
Data block
Showcased meaningful information, like an ancestor's age or immigration details.
Call-to-action (CTA)
Provided a clear invitation for users to explore further.
Consultant panel
Offered contact information to get help from an expert.
After gathering these insights, I met with the campaigns team to validate my findings and discuss additional needs. They emphasized the importance of an Event component, which would help highlight key moments in an ancestor’s life. This became a new addition to our component list.
Brainstorming
With a clear understanding of the required components, after consulting with my design lead I decided on a modular approach where each component would be a self-contained unit that could be integrated across various campaign layouts, allowing for customization without compromising consistency.
Modular design with a slot for interchangeable components for each campaign.
Design
After finalizing the approach and needed components, I started designing.
Components
Ancestor card
Provided ancestor details with lifespan and relationships in two sizes for adaptable campaign designs.
Vertical and horizontal versions of the ancestor card
Event
Highlighted specific events in an ancestor’s life—providing a deeper narrative alongside the data block.
Marriage event example
Data block
Provided meaningful data points, designed for scalability and adaptability across diverse datasets.
Two different dataset examples
Consultant panel
Redesigned to streamline consultant interaction, using existing design system elements.
Redesigned panel to comply with design system
Testing
To validate the effectiveness of these components, I recreated past campaigns using the newly designed components. This allowed me to test with “live data” and ensure that each component fulfilled its intended purpose without compromising the visual experience.
Previous campaign (left), Recreated campaign (right)
Results
Team Approval and Faster Campaign Creation
I then presented the new components to both the campaigns team and the design system team. Both the campaigns and design system teams were pleased with the results. Testing confirmed faster creation of campaign designs.
Conclusion
This project deepened my understanding of design systems and gave me valuable experience with working with multiple teams on the same project. I was able to speed up the campaign design process, ensure consistency, and satisfy the needs of both stakeholder teams. I am proud of my contributions at FamilySearch and grateful for the hands-on experience I received while crafting thoughtful design solutions.