Gabriel Valdivia, Case Studies

Multi-Post Stories.
Unlocking Sharing.
As of this year, Facebook is confidently on its way to becoming the most widely used product in history. People spend more and more time on the platform, and in certain countries it is indistinguishable from “the Internet.” However, we have noticed people are reluctant to share their everyday moments on Facebook.
Some people self-censor, afraid of spamming their friends. They share a highly curated version of themselves, making the platform a “success theatre” were only the most important moments in their lives are worthy of sharing. We saw this as an opportunity to unlock a new type of sharing on Facebook.
After diving into years of research knowledge and data, we came up with a basic hypothesis to solve this problem. I then communicated and grew it inside the company, and eventually moved to London to build a product team around solving it.
What are Multi-Post Stories?
This product allows people to easily add to an existing story over the course of a day. It’s one of Facebook’s first truly mobile-first production products; it’s built for a world in which you walk around with an Internet-connected camera, creating and sharing media throughout your day. Multi-Post Stories lets you do this without over-sharing.
Moments that are typically not able to stand on their own suddenly become shareable when attached to a larger story.
This product was a big endeavor from a design perspective. It involved introducing a fundamental shift in the system and how people perceive sharing on Facebook.
I was in charge of the ideation as well as design for consumption and production experiences for web, iOS, and Android.
Adding to a Story.
Though this signifies a tectonic shift in Facebook sharing, I had to seamlessly introduce the product into the existing system without disrupting Facebook’s 1.5 billion active users.
Therefore, the process of sharing a single post remains the same, but after posting, you’re now presented with an option to add to the same story.
Glyph Design.
I designed a glyph to clearly represent the concept of adding to a story. Each rectangle symbolizes a post as a sort of building block for a larger story.
It needed to be clear enough to represent the action taken, but also different enough to represent a new function.
Post Entrypoint.
To continue a story, users are now faced with a button at the bottom of every post. This button is an easy way to intercept users’ behavior —posting once creates a home for any related updates to that story.
Composing a Story.
Tapping the “Add To This Story” button opens a special composer view, which contains a small preview of the last post in the story.
The post preview was another difficult design challenge: to simplify every post type to its most elemental components.
Adding the post preview helps differentiate between creating a brand new story versus adding to an existing one. It also gives users a sense of momentum as they add new posts.
Tagging Friends.
Perhaps the most useful feature of this product is the ability to seamlessly create collaborative stories by utilizing one of Facebook’s most frequent behaviors.
Tagging a friend in a post gives them access to contribute to the story. This creates a nice back-and-forth between authors as they craft their story, one post at a time.
Consumption.
The News Feed consumption experience for these stories was pivotal in achieving one of our primary goals: to allow users to share multiple times a day without the feeling of over-sharing.
Typically, if someone shares three posts within a day, they would be scattered throughout their friends’ News Feed. This clutters their feeds and prevents the content producer from crafting a narrative.
In order to eliminate interruptive posts and ensure the content will be consumed in chronological order, we decided to aggregate all posts in a story as part of the same “container” by aligning them side by side. This allows users to tell a more cohesive story over time without the fear of over-sharing.
A post’s height on Facebook can be anywhere from 248pt to 700pt, depending on its content. This introduced a major design challenge: in order to align every post side by side, they must share the same height .
I designed a system to render all post types on Facebook as a square card, which we lovingly nicknamed “Chiclets.”
Text Chiclets.
A text post can contain anywhere from one to infinite characters. It was quite challenging to come up with a design that would make a couple words stand side-by-side with a few paragraphs.
I designed a system that changes the alignment and size of the text depending on the character count while sticking to a 12pt baseline grid. As a result, we saw a significant increase in text posts inside Multi-Post Stories.
Chiclets with Attachments.
When posting a link on Facebook, a handy attachment is pulled from the web that previews the content, as do Chiclets. Including a location, web link, or referencing a Facebook Page will attach a preview of the item to the chiclet.
Photo Chiclets.
Photos look really beautiful inside a chiclet. Instead of treating photos as an attachment to a post, I decided to push them edge-to-edge and let the content shine.
If someone uploads multiple photos at once, it extends the width of the chiclet and automatically creates a collage of your photos. We use face recognition to center the photos and and feature the ones that contain friends or have an added caption.
Structured Data.
One of Facebook’s most underserved features is the ability to add structured data to posts. It lets the system speak for you and it pulls relevant content from Facebook entities like Pages to enrich your post.
I saw this as an opportunity to introduce playfulness into the product. So, I leveraged the existing iconography and content from Facebook entities and placed them inside the chiclet, bringing them to life and adding a touch of personality to the content.
News Feed View.
As content is added to a story, it’s aggregated horizontally in a beautiful, free-scrolling collage. This layout scrolls to the latest unseen piece of content and it shows a peek of the rest of the content in the story.
We have found that people engage with this collage much more than the static one. It also provides an extensible framework that allows people to share a lot without spamming their friends.
While scrolling through the collage, a subtle parallax effect hints that there is more to see behind the photos.
Container View.
Tapping on any chiclet navigates you into a view dedicated to the container. Here one sees a full view of the entire story, where the photos preserve their full aspect ratio and the text is never truncated.
When scrolling to the top, the container header expands to show all authors in the story. The container view is also where the user can see all comments and feedback received on the story.
This is Just the Beginning.
Creating Multi-Post Stories has been equal parts rewarding and challenging. Learning how to navigate a large company and release something that remains ambitious and true to its original vision is no small task.
Introducing a robust framework to easily support horizontal aggregation of all post types within Facebook opens a world of possibilities for the design team as we start to support other kinds of content aggregation.
Perhaps most importantly, creating a product that taps into people’s desire to share their stories has been the highest reward of all. Witnessing millions of people use the product and rethink their understanding of sharing on Facebook has been nothing but inspiring.
Multi-Post Stories has started to roll out in Italy. It was built by a small but passionate of product thinkers based in London, UK.