Email Design System
Email Design System
Goal
Goal
Facebook sends ~3 billion emails every day. This project set out to build a design system that would standardize and elevate the quality of those emails—giving teams across the company the tools to create their best work, while ensuring every recipient gets a consistent, high-quality experience.
Facebook sends ~3 billion emails every day. This project set out to build a design system that would standardize and elevate the quality of those emails—giving teams across the company the tools to create their best work, while ensuring every recipient gets a consistent, high-quality experience.
Problem — “It’s a wild west out there!”
Problem — “It’s a wild west out there!”
Issue 1: Outdated
Facebook's emails hadn't kept pace with the app's redesign with the latest design system refresh — every team built emails from scratch, with no shared components or guidelines. This resulted in a disconnect between the in-app and offsite experiences as well as decrease in trust, as many users percieved the emails as spam.
Issue 2: Inconsistent
A variety of components exist in various outdated states, without guidelines on proper placement and usage. No single source of truth meant duplicated effort, and no way to maintain quality at scale.
Issue 1: Outdated
Facebook's emails hadn't kept pace with the app's redesign with the latest design system refresh — every team built emails from scratch, with no shared components or guidelines. This resulted in a disconnect between the in-app and offsite experiences as well as decrease in trust, as many users percieved the emails as spam.
Issue 2: Inconsistent
A variety of components exist in various outdated states, without guidelines on proper placement and usage. No single source of truth meant duplicated effort, and no way to maintain quality at scale.
Components
Components
A component and template library was built out based on the app's existing design system, with adjustments and optimizations specifically for the email medium (some examples: no absolute positioning, limited font support, must degrade gracefully when images fail to load)
A component and template library was built out based on the app's existing design system, with adjustments and optimizations specifically for the email medium (some examples: no absolute positioning, limited font support, must degrade gracefully when images fail to load)
Templates
Templates
Components were laid out to create several templates that teams can “plug and play” with, based on the high volume of emails my team had already redesigned.
Components were laid out to create several templates that teams can “plug and play” with, based on the high volume of emails my team had already redesigned.
Initial testing and validation
Initial testing and validation
We first piloted the new components on "Group Activity" — the largest-volume email type (~500M sends/day) — to validate the new components against the production experience before rolling out further. In typical growth fashion, each test group was an incremental step change from production to the final, idea experience.
Changes made include: overall simplification, cut secondary CTAs (e.g., "like" on content the user hadn't seen yet), made CTAs full-width.
We first piloted the new components on "Group Activity" — the largest-volume email type (~500M sends/day) — to validate the new components against the production experience before rolling out further. In typical growth fashion, each test group was an incremental step change from production to the final, idea experience.
Changes made include: overall simplification, cut secondary CTAs (e.g., "like" on content the user hadn't seen yet), made CTAs full-width.
Outcome
Outcome
Group Activity pilot results were that overall visitation and conversions were neutral, which successfully validated the new components as a solid foundation on which to build on and improve.
Group Activity pilot results were that overall visitation and conversions were neutral, which successfully validated the new components as a solid foundation on which to build on and improve.
Email Digest
Email Digest
We used the newly validated components to then build and test Email Digest, a new weekly-aggregate email type. It launched with: 700K MAU (2.5M projected), and 400K DAU
We used the newly validated components to then build and test Email Digest, a new weekly-aggregate email type. It launched with: 700K MAU (2.5M projected), and 400K DAU
Email limitations
Email limitations
From the intensive work the team had done in redesigning and testing emails, we’ve accumulated expertise around best practices around building for the email medium. An example of one such learning is…
Graceful degradation
In a case where an image asset fails to render (some potential reasons: a user’s email client is blocking externally hosting images, the client doesn’t support background images), we need to ensure that alternate rendering options are provided.
From the intensive work the team had done in redesigning and testing emails, we’ve accumulated expertise around best practices around building for the email medium. An example of one such learning is…
Graceful degradation
In a case where an image asset fails to render (some potential reasons: a user’s email client is blocking externally hosting images, the client doesn’t support background images), we need to ensure that alternate rendering options are provided.
