Samuel Hoang : Subscription Products on Meta Shops : Product and User Experience Designer

Subscription Products on Meta Shops

Meta · 2023-2024

Product subscriptions are a convenient and cost-effective way for shoppers to purchase items they use on a regular basis. An estimated 41% of online consumers have purchased subscriptions for some categories, such as personal care or household supplies. They are popular on shopping platforms such as Amazon, and a growing number of retailers offer subscriptions directly on their own websites.

Before I worked on this project, shoppers on Facebook and Instagram could only purchase items directly in Meta Shops on a one-time basis, due to lack of supporting features on our platform. Enabling subscriptions on Shops became a high priority due to changes coming to Meta Shops policies in 2024. To mitigate the loss of advertising signal from Apple's implementation of App Tracking Transparency in 2021, Meta decided to prevent advertisers from redirecting people to their own websites from product ads in Facebook and Instagram. Product ads could only lead to Onsite Meta Shops product pages and purchase flows, and without subscription features on Shops, Meta could lose significant advertising revenue.

In my role on the Shops Ads team at Meta, I helped build the case to develop this workstream, planned feature milestones, and led the design of the end-to-end Subscription purchasing experience on Facebook and Instagram Shops. To get this project launched, I socialized design proposals with many dozens of stakeholders including design leadership and product owners of the Product Detail Page (PDP), Cart surfaces, Checkout, and Orders.

My Role

Product Strategy
User Experience Design
Interaction Design
Visual Design
Software Prototyping

Research and Product Definition

Opportunity Sizing for Subscriptions on Meta Shops

Advertisers currently link to their offsite shops to sell subscriptions because the existing Shops platform only supports one-time purchases.

As zero-to-one experiences for Shops, The team’s goal for 2024 was to launch an end-to-end shopping experience on Facebook and Instagram that unlocks the catalog of replenishment product subscriptions for our advertisers. We would complete the work in two phases:

Milestone 1 - Limited Testing: Working directly with handpicked sellers, we would test the end-to-end experience for purchasing subscription-only products.
Initial Public Launch - Enabling Must-Have Features: We would enable Cart flows, subscription options, and other features that buyers would expect while shopping for subscriptions.

Feature Priorities for Subscriptions on Meta Shops

Design Concepts

I started with the design of the Product Details Page (PDP), since any changes here would be controversial and require more lead time in socializing the work with the highest number of stakeholders. In order to get technical testing started quickly and get buy-in from PDP owners, my general approach was to use their design system when possible and explore alternate patterns and controls when necessary.

Milestone 1: Subscription-only Experience Without Cart

As a limited experiment designed to test the end-to-end subscription purchase flow, Milestone 1 would only support single-cadence subscription-only products, and there would be no Cart support. Our business partnership teams would work directly with a handful of sellers to get their catalog ingested to Shops. Buyers interested in the product would tap a Subscribe button leading directly to the Checkout flow.

Subscriptions Milestone 1 PDP Interactions

Features included:

Subscription cadence and pricing to be established by seller
Checkout supporting subscription metadata
Post-transaction emails and subscription details

Features excluded:

One-time purchase option
Choice of subscription cadence
Cart features

Public Launch Candidate 1: PDP with Existing UI Components

For our initial public launch, we needed to support all of the basic features users would expect to purchase subscription products, including the ability to select between purchase options and adding products to Cart. This design used existing Facebook and Instagram design system components to enable buyers to select between different purchase options. It also included an affordance to find out more about how subscription purchases work.

Subscriptions Launch Candidate 1 PDP Interactions

Subscriptions Launch Candidate 1 Purchase Flow

Pros:

Easier to compare purchase options and provide additional info on a separate sheet
Easier to build since it makes use of existing design systems components

Cons:

One-time purchase would be the default option, and it would not be obvious there are subscriptions available
More steps to switch between purchase options

Public Launch Candidate 2: Purchase Options Carousel

This design would also support Cart features and the ability to select between purchase options. It would require more work to build a new carousel control to select purchase options, but it had the benefit of being more direct and making subscription options more obvious.

Pros:

More obvious there are different purchase options
Easy to choose different purchase options

Cons:

Requires more real-estate on the Product Page
Less space to include additional info on each purchase option
Requires new design components

Detailed Screen Layouts and Purchase Flows

Selected Design: Purchase Options Carousel

With Milestone 1 firmly in place, the team chose to invest time to build Launch Candidate 2. In user testing prototypes of the two launch candidates, the carousel of purchase options was significantly more usable. Most users tended to miss the fact there were even subscription options at all in Launch Candidate 1, and it would not be right to default to a subscription option.

After formalizing the text carousel pattern with Facebook and Instagram Design Systems owners, I proceeded to flesh out the entire end-to-end purchase flows while accounting for common scenarios and edge cases.