Facebook: Grids

Introduction

In 2016, I designed Facebook’s first standardized and widely distributed desktop grid. In order to sidestep volatile metrics changes, I performed thorough audits, calculated solutions with exhaustive precision, and worked to convince internal teams of the project's efficacy.

My involvement

I was the lead designer for the project. I was responsible for framing the problem in writing, designing an array of solutions, and pitching my ideas to company leadership.

Project results

We implemented the grid across most surfaces within Facebook.com. We boosted ad revenue by 3% (over control) and created a template that standardized the dimensions of navigation, content, and ads throughout the product.

Problem framing

Without a single page width and a thoroughly documented grid system, designers had to copy existing pages on the site or invent their own layouts. With everyone adding their own layout to the product, we were accruing design debt on a daily basis. Ads were being served at different sizes on different pages, leading to unpredictable economics. Design systems meant to apply throughout the site didn’t work on pages with non-standard layouts. Until the problem was fixed, the layout of the product would continue to fragment.

Process

Most of the atomic components of Facebook are built on a four pixel grid. However, the width of stories in News Feed was 492 pixels, a number not divisible by four. Rather than change the spacing of every component to align to 492, it became clear that we needed to change the size of stories in News Feed. However, if a story changes in width by even a few pixels, there are direct monetary and behavioral implications. As a result, I took extra care to clearly articulate the tradeoffs of each solution I presented.

Spreadsheets and algebra

In the interest of thoroughness, I created a spreadsheet with every possible News Feed story width near 492 (always divisible by four pixels) and created an algebraic formula to determine how each story width could be adapted into a grid. Of my roughly fifteen potential solutions, there were only three that seemed really viable. I created News Feed designs for each of the three viable solutions and compared them. There were two that seemed especially promising: a 12-column 996 pixel grid and a 16-column 1012 pixel grid.

Pitching the solution

Finally, once I had two solutions I felt confident in, I created a presentation that I used to pitch the grids to company leadership. Due to the sensitive nature of this work, I sought to minimize doubt in the minds of stakeholders. I clearly articulated changes in the size of ads, News Feed stories, navigation columns, and the dimensions of common image aspect ratios in News Feed. As a result, company leadership gave us the green light to test, implement, and ultimately ship the 1012 pixel grid throughout Facebook.

Conclusion

The 1012 pixel grid is now in use throughout most of the high traffic surfaces on Facebook. It was later turned into a template that every product team could use to quickly lay out a new surface without fragmenting the product’s layout. Additionally, sidebar ad revenue was raised by 3% over control.