Facebook: Mobile Navigation

Introduction

In 2016, Facebook’s leadership sought to address a problem with the product’s navigation system. There were dozens of new Facebook subproducts (Groups, Marketplace, Video, etc.) being added every year, but the existing navigation channels weren’t providing them with enough traffic to be successful. To remedy this, a new team called Product Distribution, led by myself and the PM Alexa Andrzejewski, was created to solve Facebook’s navigation scaling issues. In this project, I’m going to walk you through my process for solving an extremely complex series of system design issues, followed by the solutions I recommended to company leadership.

My involvement

I was the design lead for the team. I was responsible for problem framing, creating presentations, visual and interaction design, synthesizing research and quantitative data, and prototyping.

Goals

As previously stated, the original goal of this work was finding ways to more evenly distribute Facebook’s traffic so that subproducts had a better chance of succeeding. However, we weren’t actually sure if this was in the best interests of the company. Since 90% of time spent on Facebook happened on News Feed, diversifying the flow of traffic inherently meant taking traffic away from Feed. Making it easier for people to spend time away from Facebook’s most profitable and polished surface is obviously a huge risk with an unclear payoff. This risk added a new constraint to our work: anything we sent traffic to needed to be as useful and profitable as News Feed.

Problem framing and auditing

To find the root cause of Facebook’s navigational woes, we needed to understand the individual navigation channels. I began by auditing the five primary channels: the Tab Bar, the More menu, News Feed, Notifications, and Search. In this audit, my goal was to determine where each channel sent traffic and how well this was satisfying Facebook’s goals around product growth. These detailed audits provided my team and I with the raw information we needed to analyze the existing navigation ecosystem and make decisions on how to move forward.

After many audits, I had identified the three key problems with Facebook’s navigation channels. First, News Feed couldn’t offer pivots to new products or content, effectively isolating 90% of Facebook’s traffic in a loop. Second, our best navigation channels for sending people to subproducts, the tab bar and blue bar, could only display a few options at a time. Finally, new subproducts needed to take advantage of Facebook’s Search and Notifications systems in order to be successful, but were limited by the existing systems.

Problem #1: News Feed and Connected Content

Since so much time gets spent on News Feed, most people only see the content that is ranked to appear there. Since News Feed only shows connected content (posts from friends, groups, pages, etc. that you have connected to), this means that most people only saw content that they already elected to engage with. There was no opportunity for ranking unconnected content that you might enjoy into feed. This made growing a new Facebook subproduct so much harder: in order for anyone to see your content, they first had to elect to connect with your product. This paradoxical relationship between distribution and connected content meant that almost no Facebook subproducts got any distribution in News Feed, the primary surface where people spent time.

Problem #2: Limited Global Entry Points

Facebook’s best channels for navigating to subproducts were the Tab Bar and Blue Bar, the strips of icons at the bottom and top of the app respectively. These two areas, which contain roughly nine navigation options, are the only entry points within the app that are always visible. The only other surface for subproduct navigation was the More menu, which paled drastically in visibility and traffic.

For example, a subproduct called Marketplaces was tested in both the tab bar and blue bar. There was a literal 100x difference in the traffic that Marketplace received while in the More menu (0.14% participation rate) versus the tab bar (14% participation rate). Since there were only nine global entry points, this meant that dozens of Facebook products would launch, iterate, and die within the More menu unless a strategy was found to bring more users to these subproducts.

Problem #3: Duplicative Notification Channels

Additionally, multiple subproducts needed notification functionality in order to be successful. However, Notifications had previously been a global system that didn’t direct traffic to other tabs or surfaces within the product. If subproducts were going to use Notifications specific to their content, it meant that they’d either need to create a second, product-specific channel or hijack the global surface to send traffic to their products.

Creating solutions

The process of creating, iterating upon, and presenting solutions for these problems was long and challenging. Different stakeholders had different ideas about the best way to diversify Facebook’s traffic, especially Zuck. Additionally, new products like the Facebook Camera meant there was constantly another product asking for high-visibility placement within the app. We learned that any solutions we recommended needed to be flexible enough to change depending on what subproduct offered Facebook the greatest opportunity at any given time. This realization helped us frame our solutions in a way that emphasized agility and the flexibility to change.

Solution #1: Distributing unconnected content

Since diverting traffic away from News Feed was so dangerous, I tried to find a solution that kept people in Feed but still gave new Facebook subproducts a way to reach users. To accomplish this, I recommended the creation of a new News Feed story type that any product team could use to promote their content. It would allow new subproducts to break the connected content loop and make their way into someone’s feed.

Turning News Feed into a launchpad for new subproducts meant that hey could get distribution on the day they launched, rather than waiting for users to discover them accidentally or navigate to a product discovery surface. If these stories are inserted into Feed after the user has seen their top stories, it could provide a welcome injection of fresh content into feed without feeling intrusive or annoying.

Solution #2: Dynamic tab bar

Since we only had nine visible navigation entrypoints and dozens of subproducts to promote, how could we create a system that gave every subproduct a chance of being discovered? The answer was, of course, ranking. We sought to create a ranked tab bar that could surface any part of the product depending on what was most relevant at the moment. For example, let's say it's your birthday. What if we surfaced a tab that allowed you to see all of your birthday notifications in one place? Instead of being locked into just a few permanent options, a ranked tab bar gave us the ability to surface whatever product is best for you right now.

A terrific visual and interaction designer, William Van Hecke, handled the visuals of the dynamic tab bar project while I worked on the system rules. I had to determine which products were eligible for placement in the tab bar, when they might be visible, and to whom they might be useful. I also had to figure out what the right rate of change for products in the tab bar might be.

Solution #3: Global notifications and routing

Finally, in order to scale Facebook’s notifications channel, we needed to create a flexible system that any subproduct could use to direct traffic to their surface. My recommendation was to elevate Notifications to a global channel within the blue bar and to bundle together product-specific notifications into a single item that could route users to any relevant surface in the app. This solution freed up a slot in the tab bar and allowed any product team to create notifications for their surface that were easy to distinguish from content notifications like a comment.

This recommendation spun off into an entirely new body of work. I began consulting with the Notifications team, led by the inimitable Geoff Teehan, on the best way to structure Notifications so that it could scale with Facebook’s ever-growing product offering. Along with bundling notifications and routing them to product surfaces, the project included suggestions for previewing content, offering inline actions, and ways to style the visual language of notifications for increased clarity and differentiation between product-specific notifications.

Conclusion

Redesigning the navigation of the world’s most used piece of software is a daunting task, but I did my best to provide realistic solutions that addressed the core problems of Facebook’s navigation system. The work was met with approval by many teams and individuals within the company. At the time of this writing in August of 2017, these solutions are in various states of development and refinement.