Facebook Design System

‍

IMPACT: Created design consistency across entire Facebook Gaming news feed and considerably shortening development time with reusable components

‍

Introduction

Facebook Gaming lived under the Entertainment organization at Facebook. There were multiple layers of design systems to adhere to: the Facebook design system, Entertainment Product System, and finally Facebook Gaming's design system.

‍

Problem

• With the speed at which Facebook Gaming operated, multiple similar but different components were shipped
• Many components were customized and not adhering to the Facebook Design standards

‍

Goal: To develop a consistent design pattern between Facebook Gaming and Entertainment Product System

‍

My Role

• Pitched and led entire effort, including building a team
• Created a consistency path for the Gaming feeds to adhere to the Facebook Design System patterns
• As an Entertainment Product Systems representative, I added the unique Gaming components into the EPS system

‍

Project Goals

1. Creating consistency -
   - Add: Identify and add new design patterns unique to Gaming
   - Subtract: Deprecate old and inconsistent design patterns
2. Shipping it: Help developers to create components to ship the new design standards

‍

Process summary

1. Identification: auditing all feed units
2. Consolidation: Mapping components from the feed units to their basic components
3. Standardization: Create guidelines for new patterns

‍

1. Identification

The audit took the form of screenshots of every unit within the Gaming feed, and organizing them based on their smallest component: header, content, and footer.

‍

2. Consolidation

Consolidation Process

3. Standardization

More

Defining the feed based on the AI/Navigational changes

‍

Before

By layering the images on top of another - this allows us to clearly see the lack of consistency on margins, header, text sizing, etc

‍

After

Even if these are all different feeds, the difference is immediate noticeable with standardization in place

‍