Facebook & Instagram Shops

In August 2021 I made the big move to Silicon Valley to be the newest Content Designer on Shops, helping thousands of businesses sell products right on our apps.I initially worked on the Cart surface, then moved to the Product Details Page (PDP) team. 

 

What’s Shops?
Shops are the foundation of Meta’s Shop Ads revenue stream. Not to be confused with Marketplace, it’s an end-to-end e-commerce platform used by thousands of small businesses and global names such as Nike and Sephora. Buyers complete their purchases right in the apps, without having to go offsite.


Case Study 1: One-Page Cart + Incentives

Result:

Reduced friction for active Shops buyers and mitigated cart abandonment.

Problem:

In the original (launch) Shops design, buyers would add products to a specific seller’s cart. If the buyer only shopped with one seller, they would follow a familiar pattern: tap the cart icon, enter their cart, and immediately see everything they wanted to buy. But, if they shopped with multiple sellers before checking out with the rest, we sent them to “Global Cart,” a list of carts they would select from to then see their selected products in a Single-Merchant Cart. An extra step created unnecessary friction which resulted in cart abandonment.

The “before” design

When buyers tapped their cart icon, they’d enter Global Cart (shown here with Outdoor Voice and Fenty Beauty), tap “View Cart,” and enter into each Single Merchant Cart individually. 

Limitation: We couldn’t move to a single-cart design yet. Buyers were limited to checkout with each seller individual, and the ability to offer an Amazon-style single-transaction checkout was a longer-term goal.

The Initial Solution: Stacked Carts, aka “One-Page Cart”

I partnered with our Product Designer to develop the “One-Page Cart” to bridge that evolution of checkout capabilities, and lean into what we already knew about our buyers’ behaviors.  

When buyers entered the cart surface, they see all their carts stacked on one screen, with multiple Checkout CTAs. The seller with the most recent activity – indicating higher buyer intent – is surfaced at the top.

 

The Sticking Point

Some buyers were eligible for a %-off incentive from Meta, automatically applied to their next purchase. This was a one-time use offer. It was a sales driver that warranted prominence as both a banner and in the subtotal.  

If we followed this pattern for One-Page Cart, the one-time use promotional message could appear 2, 3, or 10+ times on that one surface. 

I flagged this as a legal and integrity risk. I believed buyers would be confused by the multiple instances of the message on the same page and not realize that the offer was only valid for their first purchase.

In this example, it’s easy to see how the buyer would expect to receive a 20% discount on both their Outdoor Voices and Fenty Beauty 

Our legal team agreed with me.

How I solved it:

I had conviction that the One-Page Cart was the right design solution, and didn’t think we should revisit other iterations just because of this issue.

I also didn’t want to reduce the prominence of such a high-performing offer message. I had significant data supporting the value of the message in the banner and in the subtotals. 

So, I pushed to reword what was considered a “set in stone” promotional message in the banner and rephrased the line item in the subtotal.

I worked closely with our Legal and Promotions teams to develop language that was clear and helpful to buyers, and aligned with the promotional wording they saw elsewhere in their journey (ie. no mistaking the banner and the subtotal for separate offers).

The final banner language that clarified “next order,” and “Facebook offer” became “Eligible for Facebook offer”

 
Final design and content:

Case Study 2: Unavailable Items

The result: 

Improved craft on a critical surface for over 10% of Shops buyers (neutral metrics lift).

The problem for buyers:

A seller can delete a product from the back-end catalog for any reason: it’s discontinued, recalled, etc. (This is different from “sold out”.)

If a buyer added something to their cart and then abandoned their cart for a period of time, a product could deleted from the back end before they return. That means buyers didn’t see what they expected.

Limitation: Because of our Terms & Conditions with sellers, we could not disclose the product’s name, description, or image to our buyers. It’s as if it never existed, and the design is entirely unhelpful.

When Shops launched, this scenario was a considered an edge case and resources weren’t dedicated to solving it. But our Data Scientist came to us with an alarming stat: over 10% of active Shops users were at some point seeing this experience. Yikes.

Why do neutral results matter?

Building buyer trust was paramount to increasing adoption of Shops, and we knew craft influenced trust. Trust is difficult to measure with data, but best practices exist for a reason.

Buyers may still buy the remaining items, but even a mildly confusing experience plants seeds of doubt. Even if they complete this transaction, will they be back for more in the future if they remember the broken-looking image?

 

How I solved it:

Without product names or images, I focused on what we did know and what we could show. Namely, the quantity of items affected, and what we did about it

I leveraged the existing banner to explain where the items went. 

There is no action for the user to take here, so I wanted to ensure the tone was helpful but straightforward, not causing any alarm. 

 

But what if all the items are affected?

In my initial discussion with Engineering, we agreed that a banner overtop of our default “Empty Cart” state (example on the left) would be sufficient.

But when I started making this with our Product Designer, I realized oh, this information hierarchy is terrible.

The buyer doesn’t expect an empty cart when they tap their cart icon.

Plus, the fact it’s empty isn’t the most important message. They’ll read only the headline, and assume their cart timed out or something went wrong.

Making “what happened here?” front and center would help buyers the most. 

I got buy-in from Engineering to add resources for an adapted version of our Empty Cart. It focused first on the unavailable items messaging, and the fact your cart is empty became secondary.