Developing People You May Know in Facebook Stories

Summary

Though I didn’t get to ship this, this case study shows my design process and how me and the Facebook Friending team iterated to try and get buy-in from the Facebook Stories team to develop a new feature. Turns out we inspired the Instagram’s Suggestions for You feature.

The Opportunity

The Facebook Friending team’s mission is to help people find their friends, connect safely with new ones, and keep relationships with people who they find meaningful.

Friends are what make Facebook fun, relevant and meaningful — and almost 1 billion friendships are formed globally every day.

Most people find friends through “People You May Know” (PYMK), a feature that provides friend suggestions. PYMK is located on News Feed and a dedicated Friends “tab” buried within a sea of features in your Bookmarks. PYMK is crucial to finding and adding relevant friends on Facebook.

But as more people spend their time on News Feed and Facebook Stories, our team needed to find a way where people could still access People You May Know so that they could still find and make friends.

That’s when our team decided to look at Facebook Stories as an opportunity.

The Research and What We Tested

Me, two engineers, a user researcher, and product designer traveled to Atlanta to conduct usability tests of our first iterations. Before proposing a direction to the Facebook Stories team, the design team wanted to come in with an experience that had been tested, iterated, and proven to show its value to both our team’s metrics and the Facebook Stories team’s metrics.

For our team, Facebook Stories was an ideal space to place PYMK: many people view and interact with their Stories on the daily. Your story tray is also the first thing you see when you open the app, even before you scroll down to see more of your News Feed updates.

Because of its visual capital and interactivity, our team designed 1-candidate story cards and 2-candidate story cards.

We found that both approaches were preferred by participant and that participants weren’t distracted by the offset design. Participants expected more friend suggestions to populate if they clicked “Remove.”

They also recognized the content “People You May Know” to be the name section that lives in their Friend section of the Facebook app, though some participants mentioned in the research that they wanted more guidance of what to do with this page.

Participants also recognized that this post came from Facebook due to the Facebook favicon in the upper left of the screen (where another user’s profile picture usually was to indicate whose Story it was).

We also tested our design iterations at different intervals within the Facebook Stories experience, either at the end of someone’s story tray, and also midstream, where friend suggestions might pop up as you tapped through your Stories.

We found that the mid-stream experience was the most effective with participants — and it makes sense, since it has more slot impressions and we also knew from data that American users have an average of 80 Facebook Stories to go through, so most people would never reach the end of their Stories to see People You May Know, anyway.

The Solution (What We Proposed to the Facebook Stories Team)

Content Changes

Instead of keeping "People You May Know,” I decided to act on the user research feedback and created more actionable copy of what to do: “Add Friends” and see their Facebook Stories, in turn. Looking back though, I could’ve iterated a bit more to remove the word “see” since that’s not accessible language.

Actions

To give more visual preference to our main CTA “Add Friend” and get more friend request accepts, my designer and I chose to remove the “Remove” text and instead substitute the secondary action as an “X.”

Visuals

We kept the bright colored backgrounds to look different from other Facebook Stories even though it’s static (which might’ve been moving videos or pictures), fun, and attention-grabbing. Our team was more constrained in color and space in the actual Friends section on the Facebook app, so this was an opportunity to be more visually playful as a product.

Tapping Space Allowance

We had to be very conscious of screen sizes and spacing — and factor in edge cases: like someone accidentally adding a friend when they actually wanted to tap into their next story.

Design Principles

I developed a set of Design principles for People You May Know in Facebook Stories, which would be useful when working cross-functionally with the Facebook Stories team (since we were pitching to add our feature into their playground).

Our main priority was to make sure that PYMK in Stories could be distinguishable from an ad, and that users would understand that this was something that Facebook was surfacing them.

The Result

After multiple rounds of iterations and discussion with the Facebook Stories designers, Product Manager and Data Scientist, our teams aligned on the updated designs above to launch a test in their environment. Our test resulted in 44.2 million impressions and over 4 million global friend accepts!

However, due to too many moving data targets—and the Facebook Stories team’s priority for Facebook Story Ads and ensuring our team didn’t hurt Ads opportunities and Ad revenue and conversion metrics—we had to remove People You May Know from Facebook Stories.

But on the bright side, other teams at Meta caught onto what our team was doing and were quickly spinning up their own versions, like Instagram’s Suggested for You.

The Impact

Can you spot the similarities from our initial mocks?

Soon after, me and my product designer worked closely with Instagram’s Growth design team to share research, experiment data, designs, and design thinking.

While I might not have been able to ship a product, our work spurred ideas in other teams — and in a way, People You May Know in Facebook Stories lives on in Instagram!