Improving Efficiency 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
At FamilySearch, email campaigns play a key role in keeping users engaged. However, the existing design system lacked flexible components, forcing designers to create custom layouts for every campaign.
Problem
The design system didn't meet the needs of the campaigns team.
Slower design timelines due to repetitive work.
Visual inconsistencies across campaigns.
Frustration from both the campaigns team and the design system team.
Goal
Flexible Components for Consistent Design
To streamline the campaign design process while maintaining consistency, I aimed to:
Create reusable, flexible campaign components.
Reduce the time spent on custom campaign designs.
Ensure alignment between the campaigns and design system 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:
Recurring element 1
Ancestor card
Highlighted one or two ancestors with key information and a link to view the relationship.
Recurring element 2
Data block
Showcased meaningful information, like an ancestor's age or immigration details.
Recurring element 3
Call-to-action (CTA)
Provided a clear invitation for users to explore further.
Recurring element 4
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.
Design direction
Modular design
Self-contained – Flexible enough to adapt to different campaigns.
Interchangeable – Easily rearranged to fit various layouts.
Consistent – Fully integrated into the FamilySearch design system.
Modular design with a slot for interchangeable components for each campaign.
Design
After finalizing the approach and needed components, I started designing.
Components
Component
Ancestor card
Provided ancestor details, lifespan, and relationships.
Designed in two sizes (horizontal and vertical) for flexibility.
Vertical and horizontal versions of the ancestor card
Component
Event
Highlighted significant life events.
Marriage event example
Component
Data block
Presented historical facts in a structured, easy-to-read format.
Scalable for different types of datasets.
Two different dataset examples
Component
Consultant panel
Redesigned for easier user interaction.
Used existing design system elements to maintain consistency.
Redesigned panel to comply with design system
Testing
Recreated past campaigns using the new modular system. to Validated design efficiency with “live data” to ensure usability.
Presented the components to both the campaigns team and design system team.
Previous campaign (left), Recreated campaign (right)
Test results
Team Approval and Faster Campaign Creation
The campaigns team approved the components and were enthusiastic how they turned out.
The design system team was satisfied with the improved consistency.
Testing confirmed faster campaign creation without sacrificing visual quality.
Results
Project results
Final outcome and impact
Improved design efficiency through reusable components.
Bridged the gap between the campaigns and design system teams.
Gained experience in modular design for large-scale systems.