Meta for Business: Creating an email design system
In 2021, Facebook rebranded as Meta, which meant that we needed to update and rebrand our product to “Meta for Business.” I led this initiative on my team, which started with an email design system — a proof of concept. My responsibilities were to build a new new Meta design system that could house all the other sub-brands (Instagram, Messenger, WhatsApp). This case study walks you through how I consolidated color, typography, and UI. I was also tasked with building a new set of modules to drive email engagement and allow for more flexibility. The impact is that our team shipped email campaigns quicker and captured higher engagement rate (18%).
Product Team
Austin - Design Lead
Elliot - Visual Designer
Maggy - Visual Designer
My Role
UX Designer
Color Styles
In order to create a cohesive design system for Meta for Business, I needed to build our color systems for each of the sub-brands. I worked with cross-functional stakeholders to identify colors, swatches, and then move them into our unified component library. The challenge here was honoring each brand while creating palettes that could work in the same surfaces, consolidate them into our design system from other brand portals, and collaborating with respective brand stakeholders on most up to date color assets
Typography
I ran a similar exercise to unite typographical styles. Here, the challenge became more technical. The email client server our dev team uses requires manual support for custom fonts. Since different sub-brands have specific branded type faces, I pushed to get these custom fonts in by building out the correct type specs (tracking, spacing, etc.) for dev to properly code into the server.
Modules
Finally, once we had these fundamental colors and fonts, I united the elements in readymade modules. These modules are the bedrock of the email design system. They’re meant to be maximally useful to users, while also performant across email surfaces, and scalable to other platforms. They are brand agnostic and can be skinned to any sub-brand we use.
Final designs
Here you can see the final project in action and how Meta’s email design system can feel cohesive across sub-brands.
