Tile Design System | Facebook Stories

Team: 2 Product Designers (my role), UX Researcher, Product Manager, Engineering Manager, 2 Engineers.

 

OVERVIEW

We designed a tile design system with strong principles, full scalability, and a highly intuitive experience.

As Facebook Stories have evolved, there have been visual redesigns, multiple story types (i.e. Event Stories, Group Stories), and an increase in people who actively use the product. Defining the Tile Design System has helped to guide the team, as this space continues to grow.

People Problem: Our goal was to design a better Stories experience for people, at the tray level of the product. People had mentioned several ways to improve their experience (included here: two of the highly mentioned people problems):

  1. Expectation vs. Reality: When a person tapped into a photo, the experience was slightly different than expected - since the story tile preview did not show the full image (different aspect ratios). This created a false expectation model for people using the product.

  2. Interaction Capabilities: In research sessions, the h-scroll Stories Tray was not understood by a significant percentage of people. This prevented them from knowing their full story content inventory, and potentially missing out on meaningful moments.

Company/Team Problem: As a team, our current Stories tile design system was beginning to break as new story types were introduced. There were no firm principles in place, so every new request from an outside team would be taken as an individual project - which significantly impacted our team’s bandwidth and ability to fully focus on other needs within the Stories ecosystem.

(click on image for larger view)

 

 

A NEW TILE DESIGN SYSTEM

Throughout the process of creating the new Tile Design System, there were three main areas of focus:

  1. Designing A New Tile: A design that encouraged interaction, provided clear expectations, and implemented strong principles.

  2. Stories Ecosystem: Successfully scaling the new system across multiple story types, devices, and platforms for full parity.

  3. Stories Tray: Integrating the redesigned tiles with a new, complementary Stories Tray.

 

Context

Prior to this new Tile Design System, the Stories tiles had gone through two primary design iterations.

  1. In 2017, Facebook Stories first launched as a product. The visual design was a circle (“POG”) preview of the posted content and a small producer attribution.

  2. In 2018, the product moved to a tile preview (3:4 aspect ratio), profile image attribution, and full name of the producer.

(click on image for larger view)

 

 

DESIGNING A NEW TILE

Throughout the process of designing, we held user research sessions to gain insight on what people most desired / potential tile designs that sparked interest. From here, design quickly iterated on areas that resonated with people. The result: a redesigned Stories Tile Design System that considers people’s needs, scales across teams, and is defined in strong principles.

 

Key Details

Tile Design Principles

  1. Visual & Engaging: Story previews are important in giving people a sense of what the story contains and helps to convey the rich, visual nature of the Stories format. Refrain from obscuring this.

  2. Recognizable: The tile is an atomic unit that needs to be rendered in a unified way across the ecosystem. There may be different permutations of a tile, however, core attributes should be respected to retain brand recognition, interaction behavior, and information architecture.

  3. Predictable: Tile interaction should be consistent so it is predictable across the system. Tapping on a tile should land people into the viewer experience of the same story.

  4. Understandable: Information should be easy to interpret. Given the limited space within a tile, communicating any additional context will undergo review for approval.

(click on image for larger view)

 

Clear Expectations

The Stories Viewer (experience once a person taps to view a story) has a 9:16 aspect ratio. We redesigned the Stories tiles to have this same aspect ratio - so that “what you see, is what you get”. In viewing a more accurate preview, people now have clear expectations when they tap to view a story. This increases the potential for intentional viewing (selecting a story based on the preview), while also creating a visually recognizable tile.

(click on image for larger view)

 

Intentional Visual Design

  1. Profile Image: Moved to the top left corner, in order to display a larger amount of the story preview.

  2. Rounded Corners: Visually defines Facebook Stories from other stories products. Additionally, this design is reminiscent of a button, which increases potential for becoming a tap target.

  3. 9:16 Aspect Ratio: People now have clear expectations of the media content when they tap to view a story.

  4. Gradient: Elegant solution that accounts for Accessibility (this was highly stress-tested).

(click on image for larger view)

 

 

TILE DESIGN SYSTEM | STORIES ECOSYSTEM

The process to create this new tile system required high collaboration across our immediate and outside team members. We worked to ensure a design system that considered all story types, and provided clear steps for any teams that will become interested in future redesigns / updates.

 

Key Details

Story Types and Attributions

  1. Profile Image: The story producer is a single entity / person. This applies to Self, Friend and Page Stories.

  2. Profile Image + Attribution: There are multiple story producers. This applies to Group, Event and Live Stories (Live Stories have a high potential for multiple key people within the livestream).

(click on image for larger view)

 

Process for Approval

For any additional design updates / inclusions, an approval process has been put in place. This provides structure and a clear way for the Stories team to maintain product consistency across all collaborating teams.

(click on image for larger view)

 

 

TILE DESIGN SYSTEM | STORIES TRAY

After completing the Tile Design System, we began the process of reintegrating with the overarching Facebook ecosystem. Ultimately, we aligned on a Stories Tray with a slightly larger footprint, in addition to the header removal.

 

Key Details

Header Removal

  1. Stories and NewsFeed: The Stories Tray previously had the header of “Stories”. Since NewsFeed does not have a “NewsFeed” header, people incorrectly assumed that everything within this tab was a Story. The removal of this header helps in mitigating this confusion.

  2. Tray Height: By removing the header, the tray’s height increase is minimal. At a company and team level, this was a high consideration to take into account.

(click on image for larger view)

 

Interaction

With the previous Stories tile design, a significant percentage of people expressed that they did not know about the h-scroll capability. This prevented people from seeing all of their available Stories inventory. The new Tile Design System takes this into consideration:

  1. Increase in the number of visible tiles in the tray - which increases the likelihood of having a visible, relevant friend/story within a person’s tray, at any given moment.

  2. Larger visibility of the fourth tile, which increases the h-scroll capability awareness and encourages people to scroll. When put through UX testing, this resulted in a higher percentage of people scrolling through their tray content (without prompting).

(click on image for larger view)

 

 

RESULTS

This Tile Design System is currently launched in the Facebook App. The Stories team is working closely with teams across the company in order to maintain consistency within this system; additionally, we’re collectively identifying areas of potential improvement as we continue to create a better experience for people, within this sharing space.

 

Chelsea Wells | Design Portfolio