Puffin Design System

Role: Visual Designer
Date: 2022

Email is one of the first contact points between Meta for Business and our audiences. Puffin is a SBG channel marketing email template that is mobile-first, flexible, scalable that aims to make our marketing emails more impactful.

I had a pleasure working with a product designer in developing new modules for Instagram and facelift its existing visual style to align it with the new branding of Instagram.

Puffin Email Design System

For Meta for Business, we already have established a design system for marketing emails, and it’s used as a base in developing new modules for Instagram.
We saw an opportunity to integrate more editorial layouts and vertical image driven module that cater better to Instagram for Business audience.

Specsheet

Before diving into the visual facelift, we determined and analyzed new modules in full email mockups to determine each spec.

Color & Typography

After rigorous studies and iterations with the product team, we established a system and components that are in line with the product and also cater to our needs but also catches the essence of the brand.

Product UI Fidelity

One of biggest considerations that we consulted with brand team was the interface’s fidelity in mockups.
As we portray a lot of products in high vs low fidelity and literal vs stylized, it was important that we set up rules and guidance on how Instagram ad product is depicted in various scenarios.

Implementation

We’ve now implemented the new system for Instagram in our Puffin system and is being used widely across multiple pods within Small Business Marketing design teams to develop Instagram for Business emails.