Community Moment Stories | Facebook
Team: Product Designer (my role), UX Researcher, Content Strategist, Creative Director, Creative Producer, 4 Illustrators/Animators, Product Manager, Data Scientist, Engineering Manager, 4 Engineers, Product Marketing Manager.
OVERVIEW
Community Moment Stories is Facebook’s first Collaborative Stories product that was publicly tested on the platform.
The Community Moments team celebrates the holidays and meaningful moments in your community (i.e. “Happy New Year”, “Happy Thanksgiving”). These moments have historically appeared at the top of a person’s NewsFeed.
People Problem: People expressed a desire to more intimately share moments surrounding a holiday. For instance: during Diwali (festival of lights), people’s families are spread across different countries - celebrating the day. They use social media as a key way to connect and desired a more visual, personal way to share the special moment together.
As a response, we designed a Community Moment Story that showcases content from Facebook friends who are celebrating a specific moment or holiday. We used a collaborative story approach, while focusing on only displaying content from a person's friends. This creates a space for people to share celebrations without having to be in the same location or time zone, and give them a chance to feel more connected with each other.
RESEARCH | KEEPING A PEOPLE FOCUS
Throughout planning and execution, the team closely collaborated with research in order to ensure that we were correctly identifying and addressing people’s needs and concerns for a Collaborative Stories product within the Facebook ecosystem. We worked within three main pillars of research: 1.) Key insights to drive the product strategy, 2.) Product experience and usability, and 3.) Identifying moments (i.e. moments/dates when people have historically shared more frequently on the platform).
Here are a few of the key insights that we discovered:
Privacy
People wanted to clearly understand who this collaborative story would be shared with: audience, contributors, etc. They voiced a desire to keep this experience within their Facebook circle of friends, and to refrain from being broadcasted to a wider audience.
2. Connection & Community
There was a strong desire to connect with their friends and family. People wanted to be able to share these intimate holiday moments - regardless of distance, location or timezone.
3. Authenticity
People expressed that they would like to be able to use this product in a more authentic and personal way. This has the potential to provide people with a way to share “realtime” experiences of a family holiday.
Note: Additional rounds of research were done for product-specific experiences and/or testing (i.e. video content from Facebook, overall experience, etc.) so that we could quickly iterate and address usability concerns.
THE EXPERIENCE
The experience was designed in two main parts:
Initiation: Give people the opportunity and tools to add to the Community Moment Story.
Community Story: Collaborative story that showcases Stories content from friends who are celebrating a specific moment or holiday.
For the purpose of this walkthrough, Diwali is used as an example.
PART 1: INITIATION
In order to receive a Community Moment Story, people must either: a.) Initiate the story, or b.) Have a friend initiate the story. Therefore the entry points to add content must be accessible and visible, since the overall experience is highly contingent on this. We provided initiation entry points through two primary ways:
Story Tray: Story tile is surfaced in the tray. When a person taps into this, they are immersed in an Introduction Video and End Card experience (see “Part Two: Community Moment Story”) that allows them to add personal content to the story.
Production Unit: This NewsFeed unit provided context about the Moment being celebrated, the Community Moment Story, and a large CTA to add content. When a person taps on the CTA, they are led to the Camera and a Share Sheet (with the option to add to the Story). This unit was surfaced in the fourth position on NewsFeed (based on scroll data, accessibility, etc.).
Note: These were tested in three groups: Story Tray, Production Unit, and Story Tray + Production Unit.
KEY DETAILS
Parallel Workstreams & Collaboration
There were several teams that we closely collaborated with, in order to maintain a consistent product language across our experiences.
Composer Team: Aligned with the team for integration within their product space. We proposed and agreed upon hierarchy & prominence, occurrence rates, and reception prerequisites.
Foundation Design Team: A parallel workstream to redesign the in-feed units from Facebook was in progress at the same time as our Production Unit. We worked with them to create a unit that takes our Art Team’s creative constraints into consideration, which redefined the unit.
(click on image for larger view)
Creative Constraints
In order to respect Accessibility (i.e. legibility), we collaborated with Facebook’s Creative Team for constraints and visual needs. This tied into the Foundation Design Team collaboration, and resulted in the finalized Production Unit.
The Creative Team has the freedom to create visuals and animations within these safes zones, on the Production Unit.
(click on image for larger view)
PART 2: COMMUNITY MOMENT STORY
Once the story has been initiated, friends can experience and add to the story. Community Moment Stories are designed in the following sequence:
Introduction Card: This video introduces people to the holiday and overall story - it sets the stage and provides real, relatable footage. On a product level, this aided in mitigating the people-problem of having unrelated content as the first piece of media within a story bucket (i.e. if a friend adds a completely unrelated post to the story).
Friend Content: Media that friends upload to the story. This is inclusive of photos, videos, and text.
End Card: This provides a clear way for people to add content, now that they have experienced the content uploaded by friends. Additionally, this concludes the story so that the transition to other Stories content is not a jarring experience.
KEY DETAILS
Privacy
A Community Moment Story is only visible to a person’s friend graph, in order to respect privacy and prevent broadcast posting. For instance:
Jenn is Facebook friends with Michael and Natasha. Michael and Natasha are not friends on Facebook.
When Jenn adds to the Story, both Michael and Natasha will see the Diwali Story and her photo. They can also add to the Story.
When Michael adds a photo, Jenn will be able to see this in the Story (since they are friends). Natasha will not be able to see this photo.
Identity & Attribution
The process for aligning on a clear identity for the overall product & media/content attributions involved strong collaboration between design and creative.
Media/Content Level: This design created an affordance for overall Story Level attribution, along with the contributor’s profile image. We aligned with a similar pattern used in the Events and Group Stories, for ecosystem consistency.
Story Level: Aligned on a Moment-based icon / color system. Within this system, each Community Moment Story would be identified with a related icon and color that symbolized the celebrated Moment.
(click on image for larger view)
Collaboration | The Stories Team
Throughout the process of designing and implementing this product, we closely collaborated with the Stories Team and their leadership. This allowed for product consistency across experiences, and the ability to effectively share insights and findings that would influence the Stories ecosystem.
(click on image for larger view)
COUNTRIES AND MOMENTS
We created Community Moment Stories for key holidays and celebrations that had historically shown increased sharing production on Facebook. These dates included:
Mid-Autumn Festival (Vietnam)
Halloween (United States, Brazil)
Diwali (India)
Note: Countries indicate where the Production Unit was initiated. Global friends of people who contributed were able to see & contribute to the story.
Chelsea Wells | Design Portfolio