Meta | Small Business Ads 

2020 - 2021

Vision work

Context

Problem

  • Ad products across the Meta family of apps are built and maintained by separate teams causing slowed execution, redundancies and inconsistencies in the product experience 

  • Because each ad product is different, users have to relearn workflows when switching between apps

  • Advertisers are unclear about how and when their money, data and identity are used across the Meta family of apps

Project Goals

Bring together designers from across the company to envision a unified suite of ad products using the new Meta design systems to... 

  • Create clarity that advertising is a cross family experience  

  • Streamline user workflows between apps 

  • Increase development velocity through a shared design system to build better products, faster.

Project set up

Role:

Design Lead

Team:

6 designers from each org: Facebook Ads, Instagram Ads, Meta Design System and WhatsApp Ads

Responsibilities: 

  • Partnered with data science and UXR to gather foundational knowledge to define the problem and size the opportunity

  • Organized a 4 week long design sprint in a virtual environment (the company had recently transitioned to WFH due to Covid-19)

  • Lead design sprint: organized kick off session to share context on existing products, moderated 3 brainstorming and critique sessions to arrive at a final direction to take through user testing

  • Applied and expanded upon new Meta design system to meet needs of advertising products

  • Build interactive prototype and partner with UXR to source participants and conduct study to validate the new direction

  • Partner with engineering leadership to size impact of consolidating the product suite

  • Presented process and findings to Ads leadership

Before

Ads products across the family of apps

Inconsistencies between Facebook and Instagram

The Sprint

Explorations

The review screen

The confirmation dialogue

Applying the new company brand

Prior to Facebook rebranding to Meta, they company started rolling out a new design system to represent the Facebook parent company voice. I used the primitives of the company brand to create a new mobile design system.

Header and typeset explorations. After being provided with 3 typesets, I developed a 4th typeset that had the strongest visual balance in product context. This typeset was adopted by the company brand team.

Brand and button color explorations

More color explorations using the company gradient

Final prototype for research

Facebook ad creation flow

Instagram ad creation flow

Edit from review screen

Research Results

“It might be cool to know how much of the budget is going to Facebook and how much to Instagram. Or is it split 50/50 or is it 75% Facebook, 25% Instagram? Because maybe maybe I’ll post on both, but I want to do more on one or the other.”
— Khyah H, US

Cross Family Understanding 

Consistent design language and branding created clarity for participants about where their ads were being delivered across the FoA. 

Some participants wanted control over how their money was split across the FoA.

“You don’t have to learn for Instagram this week and Facebook next week—you know how to use it because you’ve done it once.”
— Liz Z., Canada

FB Inc Branding 

New FB inc branding was not widely recognized and may take some education and time to gain familiarity.

IG-first participants were aware that FB owns IG and were unphased by using an FB inc experience inside of IG. 

“ I know that Facebook owns Instagram so it doesn’t throw me off, except that this FB doesn’t look like the logo of Facebook, so that’s confusing me....the blue F is what I’m familiar with, I have not seen this before.”
— Brittney M., Canada

Product Unity  

All participants found the new experience easy, streamlined and similar between the apps. 

When seeing FBS for the first time, participants from both IG and FB found the experience familiar and easy to use.

Project Outcome

Transitioned to the Novi team shortly after presenting research findings to ads leadership.

Eng lead did sizing estimate and found that if the company were to pursue a unified ads interface across the family of apps, it would require 80% less engineering resources than are currently needed today.

Reflection

Challenges

  • Getting support and involvement from partner teams

  • Working with design systems that were not familiar to all workshop participants (Geodesic) or still in development (CDS) 

  • Explaining the Company Layer concept and relating its goals to my team’s goals clearly and concisely

  • Influencing XFN towards a new strategic direction for our products and org structure

Learnings

  • Build relationships early 

  • Align teams by finding the common threads between user needs and team goals 

  • Show don’t tell: created a lot of abstracted graphics to communicate concepts