TL;DR
During my internship at FamilySearch, I created campaign-specific modular components. The campaign team previously didn't always use the design system, feeling it didn’t meet their needs. By using common elements from past campaigns, I developed flexible components that ensured future campaigns met team goals, adhered to the design system, and met the campaign team’s needs.
Impact
Increased design system compliance
Creating campaign-specific components that aligned with the FamilySearch design system ensured adherence to design guidelines, maintaining brand integrity and improving user experience.
Decreased future campaign design time
The modular system with swappable components significantly reduced design time, streamlining the process and enabling quicker implementation of marketing strategies. This made designs more consistent and scalable, helping the team meet their goals.
Background
FamilySearch is a nonprofit giving free access to family history records and resources for exploring family trees worldwide. My internship was with the campaigns team, which creates custom experiences to increase FamilySearch traffic and user engagement in family history. Campaigns focus on certain events, holidays, or discoveries, offering personalized content to spark interest. However, the existing design system lacked components tailored for campaigns, like showcasing ancestors and key information. So the campaigns team often didn't use the design system, leading to inconsistencies.
Goal
Develop campaign-specific design components to enhance future projects and better align with the Design System.
Research
Common elements
We analyzed past campaigns for recurring elements and consulted with the content team to confirm our observations.
Common elements identified in past campaigns
Design
Module system
Modular System We adopted a modular system to provide flexibility and scalability. Each component was built as a self-contained module that could be easily integrated into various campaign layouts. This approach allowed designers to mix and match modules, customizing the user experience based on the campaign's specific goals and content requirements. Clear guidelines ensured visual consistency while enabling creative freedom.
Example module component including an Ancestor and swappable component data block.
Documentation
We also created documentation and examples for each component. This included instructions on how they should be used.
Screenshot from Figma documentation file.
Testing
To ensure the components would work, we recreated campaigns using the new components to verify their fit.
Previous campaign (left). Recreated with new components and style (Right)
Components
Ancestor
Shows the user's ancestor. Lets the user view the relationship and the Family Tree. We added the relationship to the card to make it meaningful. We created three size variations for design flexibility.
The 3 size variations of the Ancestor card
Data block
Dynamically presents data, adjusting for content volume and emphasis.
Before (Left) and After (Right)
Event
The event component is a companion to the data block. It allows you to better highlight data about a certain event in your ancestor's life.
Before (Left) and After (Right)
Logged-out view card
A new feature enabling non-registered users to view shared campaign pages, developed in collaboration with a developer.
Example Logged-Out View Card.
Consultant panel
I redesigned this component to streamline the consultant contact process, utilizing existing design system elements.
Conclusion
This project was a rich learning journey. It deepened my understanding of design systems and collaboration within a design team. I'm proud of my contributions and thankful for the opportunity to intern at FamilySearch.