Grids for Facebook

Product design, problem framing, writing and presenting, 2016

Creating a grid is usually pretty simple. Measure some assets, do a little math, call it a day. When you’re trying to get the world's largest website onto a grid, it’s somewhat more complicated. In January of 2016, I was asked to create a grid that would be implemented throughout Facebook's desktop site.

Designers had tried to align News Feed to a grid in the past, but ultimately failed to capture the support necessary to ship their changes. However, over the course of a month, I solved the problem through thorough design explorations, framing the problem in writing, and presenting my work to many stakeholders within the company.

The first step of the process was to audit News Feed in order to understand the spatial requirements of the current system. After getting all of the relevant dimensions, I plugged them into a series of online grid generators to see what approximate values might work. After hours of fiddling with gutter widths, I realized the approach wasn't working.

Most of Facebook's products are built on a four pixel grid. It's wonderful, I recommend four pixel grids to anyone looking for a good base unit. However, the width of feed stories was 492px, a number not divisible by four. It became clear that we had to do the unthinkable: change the size of stories in News Feed.

Changing the width of News Feed stories can have huge ripple effects throughout the ecosystem. If a story changes in width by even a few pixels, there are direct monetary and behavioral implications. In order to sidestep any pitfalls, I created a pseudo-algebraic formula to help me explore the possibilities. I plugged in values (always divisible by four) and mapped out all feasible solutions.

After all that, I had two recommendations I felt good about. I created a presentation to help me communicate the solutions to other teams and company leadership. I described the problem, explained what I'd done to arrive at my recommendations, and gave pros and cons for each solution presented. I also documented common image aspect ratios and how any potential change would affect their width and height.

In the end, company leadership examined my presentation and encouraged us to proceed with our 1012 pixel, 12 column grid for News Feed. The layout is now in use on News Feed and is in the process of being applied to other high-traffic surfaces throughout the product.

I'm very proud of this work. This project wasn't successful because I made the shinieist mocks of how our system could look on my grid. It was successful because I was thorough and clear in my communication. This project set the tone for the rest of the work I've done at Facebook since.