Impact

Created design consistency across Facebook Gaming news feed, shortening development time with reusable components

Introduction

Facebook Gaming lived under the Entertainment organization. There were multiple layers of design systems to adhere to: 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. This created a perception of inconsistency
• 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
• As an Entertainment product systems representative, I added the unique Gaming components into the EPS system

Project Goals

Creating consistency:

• Add: Identify and add new design patterns unique to Gaming
• Subtract: Deprecate old and inconsistent design patterns

Shipping it: Help developers to create components to ship the new design standards

Process summary

• Identification: auditing all feed units
• Consolidation: mapping components from the feed units to their basic components
• Standardization: create guidelines for new patterns

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

Consolidation

Consolidation process

Standardization

Solutions

With standards in place, the feed was cleaned up with consistent patterns.

Outcomes

A win for consistency and speedier development (via resusable components)