Back
Overview
Background
The Real Priority: De-risking the Redesign
Research-Driven Exploration
The Final Design
The Untold Story: Performance, Not Design
Contributing to the Facebook Design System
Meta

Scaling Facebook's global web redesign.

Design lead for consumer Pages during Facebook's web overhaul, serving 170M+ monthly users.

Facebook Pages - 2018 FB App Redesign

Served as Design Lead for the Facebook Pages consumer experience during the org-wide redesign across desktop and mobile, supporting 170M+ monthly active users globally.

Pages serves as Facebook’s primary business discovery and consideration surface, combining rich social proof with direct customer-to-business messaging.

The Real Priority: De-risking the Redesign

Strategy: De-risk the major design system migration while leveraging the release to ship high-impact UX optimizations. Preserved proven conversion mechanics while prototyping next-gen surface patterns in user research.

Research-Driven Exploration

The findings primarily informed better information architecture, with a focus on de-risking the new design system rather than over-indexing on pattern changes.

Photo & community-driven consideration

Research and metrics showed that a large part of Page qualification was driven by photos and community feedback. This layout leaned into that signal.

Photo and community-driven Page layout

Fixed business information

While media and community feedback provided consideration signals, the most important information to surface immediately was the business essentials, hours, location, contact info. This layout experimented with a fixed right column ensuring availability at all times.

Fixed business info column with scrolling signals

Header as a communication channel

We observed a latent admin behavior, businesses consistently used the header image to share important news or promotions. This variant leaned into that pattern.

Expanded banner interaction concept

Curated featured content expansion

The interaction first presented Page information, but once a user engaged with the banner content, the page info would get out of the way. The banner then allowed Page admins to provide curated featured content via side-scroll.

Banner content expansion with swipe

Alternative exploration with less interaction dependency

Alternative exploration with less interaction dependency

Mobile exploration variants

Mobile exploration variants

Additional layout explorations

Additional layout explorations

Component-level exploration

Component-level exploration

Information architecture refinement

Information architecture refinement

Responsive layout behavior

Responsive layout behavior

The Final Design

The shipped version was a closer representation of the previous design with targeted IA optimizations, the conservative bet that de-risked the transition while still improving the experience.

Final shipped Pages experienceRedesigned Pages on the new web component system

The Untold Story: Performance, Not Design

The Facebook App redesign was actually driven by performance, not design experience. The entire front-end stack was moved to React. Since everything was being rebuilt, it was a logical opportunity to modernize the visual experience, but performance was the primary goal.

The Facebook Design System group leveraged the recently created mobile design system to inform a web version for a "mobile first" web experience. The fallback strategy: if the new experience created too many regressions, the old design would be re-implemented on top of the new React components, still retaining the engineering work.

Loading states we called "glimmers" had to be designed and implemented separately for all components, they weren't built into the component system itself.

Contributing to the Facebook Design System

Design System Leadership: Contributed core component patterns back to the global Facebook design system, including the profile header architecture now deployed across billions of business and personal profiles.

Video Ambient Exploration: Explored responsive video treatments with ambient CSS blur effects for Facebook Watch & Gaming creators, establishing benchmark criteria for high-performance visual media surfaces.