Facebook Bookmarks

Product design, interaction design, and visual design, 2016

Shortly after launching Facebook's new desktop grid, I was asked to tackle another stubborn part of Facebook's desktop site: bookmarks. If you're not sure what those are, they're that long list of icons and links on the left-hand side of News Feed that have remained largely unchanged since 2007. However, over the course of a few months, I framed the problem, proposed the solution, and rallied the team that successfully shipped a redesign of Facebook's most stubborn product.

What we ended up shipping, and what you're probably using today.

Historical debt

Coming into the project, it was clear why so many teams had tried and failed to redesign bookmarks in the past: it was just too sensitive to change. Every product team at Facebook relies on Bookmarks for traffic. If a redesign caused visitation to any product surface to go down by even a small amount, that product team could essentially veto the redesign. On top of that, the same product teams were making ad-hoc optimizations to the surface without documenting their changes in a centralized location. For years, we had a surface with bad ranking, hacky optimizations, and no owner within the company.

Bookmarks when it launched in 2007, and a previous redesign attempt from 2013.

Navigation workshop and research

Bookmarks is comprised of many features from different product teams, so we needed to consider the perspectives and shared problems of our XFN partners. To that end, our team hosted a Navigation workshop in February of 2016 with designers from across Facebook. We had two goals for the workshop. First, to capture ideas for primary, secondary, and tertiary navigation throughout our desktop product with the help of our enlisted design partners. Second, to document navigation-related issues faced by each of their respective teams.

The very first workshop I'd planned, organized, and led.

Through sketching and discussion, we came away with a number of ideas for each tier of our product's navigation. After the workshop, we transformed our ideas for Bookmarks into static mocks for user testing. Most research participants told us they simply ignored the entire left-hand side of feed. When we asked questions related to navigation more generally, the answers became more fruitful. Users told us that they frequently visited the profiles of friends, pages they follow or admin, their groups, and games which they play. Getting to the content to which they're connected meant everything.

Design process and methodology

Now that we had an understanding of our partner teams needs and the needs of our users as they related to navigation, it was time to analyze the current system. We pulled together a serviceable spreadsheet of every extant bookmark, along with its URL and icon. There were about eight different sections within the column and somewhere in the neighborhood of fifty bookmarks.

We then laid all of the bookmarks out within a single document. Stripping them of their icon and association to a particular product, we labeled each bookmark: content surface, discovery surface, settings page, or action. When labeled, we saw that every section in the column contained every type of bookmark. Up until that point, bookmarks were simply grouped together based on which product team had built them and not based on their functionality.

When we tried grouping together every bookmark purely by its function, something clicked. We were assuming too much about your familiarity and usage of specific Facebook products. Instead, we should sort bookmarks by their function and let ranking do the hard work of figuring out which bookmarks to show and in what order.

We finally had our design hypothesis: a system that emphasized your connections to individual entities, ranked by coefficient score, followed by a ranked list of Facebook features and creation actions. After we performed a few tweaks on this direction, we put it into lab testing alongside directions proposed during our navigation workshop. The feedback we received was clear: our design hypothesis was correct. We had uncovered an effective way to order the information within bookmarks.

Testing and iteration

After we had our hypothesis, we started the arduous process of testing and iteration. We ran many small tests, both individually and combined with other tests, in order to measure the impact of individual and cumulative decisions. Above, you can see an outline of the the initial set of individual changes and tests. This series was followed by many further experiments that improved our ranking model and incorporated the ad hoc ranking alterations made by our partner teams.

The design got tweaked in a few places over time. Originally a single button, we eventually changed the Create menu into a series of text-only links in order to improve the participation rate. Additionally, we built the column to be sticky: unlike past versions, it would stay in place beside feed while the user scrolled. This change ended up being particularly impactful, adding multiple percentage points to our overall participation rate.

Conclusion

In the end, we managed to increase the surface's participation rate substantially while reducing the number of bookmarks we show at once by half. After weeks of carefully watching metrics and communicating our results to every affected team, we had the green light to do the impossible: ship our redesign to 100%.

This solution isn't a radical departure from the current design: bookmarks is still a list of icons and links along the left hand side of the page. That's because this project wasn't about making something radically different. Instead, the future of bookmarks depended on us shipping an improved foundation upon which we can iterate. Through rigorous research, design, testing, and communication, we were able to fix a surface that has been a thorn in Facebook's side for nearly a decade.