Note

Early product work included here because it's the clearest example of self-initiated, scope-finding work I did at Meta. Shipped to SMB inboxes at Facebook/ Instagram/ WhatsApp scale. Project wrapped at my departure before metrics could be captured. Included to show my judgment, the system, and what I'd do differently now.

TL;DR

Meta rolled out a new design system in 2020 without updating its email design system…despite email being the highest-volume customer touchpoint for Facebook for Business. I made the case for closing that gap, led the redesign as an IC with senior advisors, and shipped a more flexible template system across Facebook, Instagram, and WhatsApp for Business before leaving the company.

Background

At Facebook, I was on the Small Business Group team (SBG). 2020 turned out to be a pivotal year for SBG. With local businesses forced to close their physical doors, Facebook became one of the few channels left for reaching customers, and email was where that relationship started.

Facebook had recently launched a new design system through the agency Instrument, yet had not included updates for the email design system. I flagged this as a structural gap: the rollout had skipped the highest-volume comms channel.

Goals

1. Align the Email DS with the web content to sync the experience of using Facebook for Business tools across touch points through web and other communications channels.

   1. Meta Design Principles: intuitive, scannable, legible, easy to digest.

2. Reduce campaign cycle time for Product Marketing Managers and Designers working with email DS, by standardising components and codifying best practices.

3. Improve the aesthetic value and visual interest to the email experience; adding new layout, image treatments, updating typeface styles.

Process

Approach:

I relied on my extensive background in performance email marketing and design systems to put together the initial business case for the project.

I then put together my research and findings into wireframes which I tested internally and externally. Next I worked with cross functional leadership to plan and execute the designs– including brand review from the senior design team. Finally, I partnered with engineering to ship the system into production across three brand surfaces.

Media

Email Design system creation for Facebook for Business/ Instagram for Business/ Whatsapp for Business

Team

Self-led with Sr Designer + Engineering Lead advisors

Brand surfaces

Facebook / Instagram / WhatsApp for Business (200M+ users).

Legacy Design System

While modular and easy to read, the current system has limited formatting options for images and text, which results in all emails looking the same.

One of the main constraints with the current system, was the strict boundary between the email images and text. I wanted to break those boundaries a little to create more engaging layouts that better displayed the personality of the individual brands - Facebook, Instagram, and WhatsApp.

Design Specs

After designs were given the green light, I worked with our senior Product Designer and Engineering Lead to create spec sheets and handoff docs to help our teams developers implement the changes to our design system.

After handing off spec sheets and assets to developers to build, I created a how-to-use design doc in Figma for internal designers, to show new hires and tenured designers alike how to use the new assets, save time, and keep consistency across brands. With a team of 20+ designers across SMB projects, the time lost doing repetitive work was real.

Reflections

On constraints: I found designing to fit into the email channel is a craft of designing for the lowest common denominator—a constraint that was formative: teaching me how to design for resilience, not for ideal conditions.

The biggest thing I would do differently today, wouldn’t be to change the design work. I’d change my operating model. When I undertook this, my assumption was that I needed to prove the case, and “pitch it.” It turned out I had identified a big need, which didn’t need a hard sell. If I started this project today, I’d collaborate with PMMs, engineering, and brand stakeholders from the framing stage rather than after building out wireframes. The tradeoff would be a slower start, but more durability for handoff.

.