Experimenting with 0-1 products at Meta

Experimenting with 0-1 products at Meta

When

Jan - Nov 2023

My Role

Content designer

Tags
Content DesignUX Writing
icon
As a content designer on Meta's Resilient Ad Experiences team, my role centered on helping to conceptualize, research and design new product experiences for Meta's in-app browser on Facebook, Instagram and Messenger. While I can’t get into too much detail about my work publicly, here’s a quick overview of some of the projects I'm most proud of.

Contents:

01 - Browsing tabs in IAB

02 - Facebook product recommendations

03 - End-to-end encryption privacy notice

01 | Browsing tabs in IAB

Challenge

Meta’s in-app browser (or IAB) lets users explore and discover external web content without leaving the app they’re currently using. Whenever a user opens a link in Facebook, Instagram or Messenger, they’ll be directed to IAB.

When I joined the Resilient Ads Experience team, they were preparing to launch a browsing history feature designed keep a record of links a user had visited within the last 30 days. The goal was to help users save and revisit content they’d previously shown interest in.

But the success of this project introduced a new question – what happens if a user wants to keep their content open in an active browsing session? I joined a project team tasked with solving this challenge.

My approach

  • Collaborated with PD, PM and UXR to define requirements, goals and success metrics
  • Workshopped and socialized the product story, messaging strategy and core value proposition alongside PM
  • Led workshops and research to name the new feature and define related terminology
  • Partnered with PD and UXR to conduct competitive analysis of standalone browsers (e.g. Safari, Chrome) and similar in-app browsers
  • Worked with PD to craft an MVP design and experiment plan
  • Created microcopy for new user experience (NUX). Worked with PD and Eng to define interaction logic to encourage user engagement.
Screenshot of content explorations in Figma.
My Figma explorations for the NUX tool tip. I always like to do a few flash workshops to get the copy right.

Impact & outcomes

After a few weeks of ideation and workshopping, we developed robust vision for the new feature. However, before investing in a fully fleshed out tool, we developed MVP design with limited functionality and launched a live experiment to gauge user engagement with the concept.

Screenshot of browser tabs MVP product experience in Figma
Final design for the tabs MVP experiment.

The experiment ran successfully for several weeks, validating investment in our long term strategy for the feature. We began planning additional experiments to collect data about user behavior and additional areas of opportunity. We used this data to drive conversations about future iteration.

Before rolling off the project, I worked alongside the product designer to conduct workshops to collect ideas for an MVP+ design to test in the next experiment round.

Screenshot of browser tabs user flow explorations in Figma.
A major feature of the MVP+ design was the option to close out all tabs. I drafted new microcopy and an empty state to test in the next round of experiments.

02 | IAB product recommender

Challenge

A UXR study found that social media users often need to spend multiple browsing sessions considering and comparing products before making a purchase. But unlike standalone browsers (e.g., Chrome) or shopping apps (e.g., Amazon), IAB wasn’t great at support multisession shopping behaviors, like cross discovery or revisitation.

However, shopping is a major use case and revenue-driving function for IAB. So after participating in several workshops and brainstorming sessions, I joined a project team challenged with finding ways to support multisession exploration.

My approach

  • Helped conduct ideation workshops to explore potential approaches and define the problem space
  • Collaborated with PD, UXR and ML engineers to develop logic for product recommendation ML model
  • Led a competitive analysis of product recommendation tools across a range of digital environments (including social media, ecomm, etc)
  • Created microcopy for the core experience and error/empty states
  • Explored ways to use metadata from product inventory data (ex. price, discount, color, # remaining) to drive user engagement
Screenshot of Figma showing competitive analysis whiteboard exercise of similar product recommender tools.
I conducted this large analysis of product recommendation flows and components in similar environments.

Outcomes & impact

Our solution was to develop a ML model that suggests similar products from the same advertiser in a product recommendations tool built into ads shown in a users’ feed. The team’s next steps are to test the MVP product to get signal on user engagement with concept. This data will help drive continued investment in the feature and future design iteration.

Screenshot of initial product recommender product experience in Figma.
Final design for initial experiment.

03 | End-to-end encryption privacy notice

Challenge

The Messenger product team recently rolled out long awaited support for end-to-end encryption (E2EE) in chat. In Messenger, like on other Meta apps, links shared in chat open in IAB by default.

UXR studies found that users were relying on this feature for a number of sensitive communication use cases — such as discussing business transactions, political organizing and conducting counseling. And although users remain in Messenger when viewing links, it’s not possible for Meta to ensure that the external site or app they’re visiting will also support E2EE.

The privacy team was concerned that users engaged in sensitive conversations might unintentionally expose their personal information when leaving the unencrypted space. So I joined a cross-functional project team tasked with creating an interstitial message to notify users of this transition and their options.

Screenshot of microcopy ideation workshop whiteboard in Figma.
My copy ideation explorations in Figma. I referenced both internal and external examples to guide my writing.

My approach

  • Collaborated with PD audit and analyze notifications in other privacy sensitive environments
  • Consulted across a number of legal and privacy stakeholders to understand strict requirements and constraints
  • Worked with technical stakeholders to define technical requirements and identify a solution capable of working across all supported platforms (web, android, iOS)
  • Worked with PM and PDs to define the logic for where, when and how frequently the privacy notification should be shown
  • Created microcopy for new experience. Led workshops and crit/feedback sessions to refine the copy while making sure the design complied with strict requirements
  • Worked with engineering to organize dogfooding and make adjustments as solution rolled out

Outcomes & impact

After many rounds of discussion with stakeholders to get everything just right, we aligned on copy that I think is simple, but clearly informs users of the change in environment and their options.

Screenshot of interstitial message process flow map in Figma.
Diagram I created explaining the user flow for handoff.

We also gave users the option to change their settings so that links opened from Messenger chat will always open in an external browser (instead of IAB.) Creating this setting was a particularly important option for user privacy, as it allows users to open their links in a private browsing window. I created the accompanying microcopy for this option in the user settings.

Screenshot of final product experience for E2EE interstitial message in Figma.
Final designs before they were shipped. Experience is currently live on Messenger 🙂

↻ Take it from the top