Campaign components

Creating reusable campaign specific components with the design system.

Campaign components

Creating reusable campaign specific components with the design system.

Campaign components

Creating reusable campaign specific components with the design system.

TL;DR

During my internship at FamilySearch, I created campaign-specific design components. We identified common elements in past campaigns and turned them into modular components. This system was flexible and scalable. It allowed for future campaigns to meet the campaigns teams goals while still adhering to the FamilySearch design system.

Impact

Increased design system compliance

Created campaign-specific components that aligned with the design system.

Decreased future campaign design time

Created a modular system with swappable components that significantly reduced the time it takes to design a campaign. Also made overall designs more consistent.

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.

Initial wireframe concepts

Ancestor (Red)

Every campaign highlighted 1/2 ancestors per card. It always included lifespan, FamilySearch ID (the ancestor's ID on FamilySearch), and a way to view the relationship.

Ancestor (Red)

Every campaign highlighted 1/2 ancestors per card. It always included lifespan, FamilySearch ID (the ancestor's ID on FamilySearch), and a way to view the relationship.

Data block (Purple)

This was the main building blocks of campaigns. They had certain data they wanted to highlight as part of the campaign. This could be things like your grandparents' age when getting married or facts about your ancestors' immigration story.

Data block (Purple)

This was the main building blocks of campaigns. They had certain data they wanted to highlight as part of the campaign. This could be things like your grandparents' age when getting married or facts about your ancestors' immigration story.

CTA (Blue)

Each campaign had calls to action to explore more.

CTA (Blue)

Each campaign had calls to action to explore more.

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.