Facebook Business is the website for businesses of all sizes to get started advertising and gets over 20M monthly active visitors from around the world. My role when I joined in January 2018 was to overhaul the old, fragmented website and design a new cohesive design framework and navigation working within the constraints of an old CMS and across teams with multiple stakeholders.

Problem:

Shipping org lines: There were over 200 Family of Apps and Services pages under the FBB ecosystem that competed for traffic and conversions. The resulting IA and website were a mess, lacking cohesion due to pages siloed by different business teams, making it difficult for users to navigate and find helpful content.

Visual appearance: The UI was old, inconsistent, and did not reflect the global FB brand due to a severely outdated CMS that leadership had no interest investing in at a foundational level. I advocated for more infrastructure support at a design systems level.

Maintenance & Tech debt: The website maintained five different sites with engineering, front end and backend, content creation and strategy. Work outsourced to agencies in the past proved expensive to maintain on our stack.

___

Goal | Solution:

Create an accessible experience that ensures all advertisers understand how to make the most of FB’s products and services by:

• Unifying and bringing FBB to modernity while respecting the individual identities of FB’s Family of Apps (e.g. Instagram, WhatsApp, Messenger) and Services (e.g. Blueprint, FBIQ Marketing Insights, Creative Hub)

• Improving usability and simplifying IA to serve visitors relevant content. The goal was to at least double traffic for partner brands/teams.

With so many pages to overhaul, and UI and IA on each page to audit and make consistent, I started by reworking the confusing navigation before focusing on a cohesive design system/framework based on the content of the pages.

Things didn’t go as expected.

We learned from early user testing that users were still getting lost in the Horizontal and Vertical mega top nav. Further, working with content strategy, we tested different taxonomies and words like “Getting started” and “Basics”. People were still not understanding the difference between first-level items like “How to” and “Resources”. Both the horizontal and vertical mega top navs performed poorly despite our hypotheses that showing the first level all at once is good for transparency; it turned out to be too much information to surface all at a time.

Dropdown Nav Explorations

We then landed in the dropdown experience, and this performed much better in user testing. I believe this was due to the three levels of navigation being too content-heavy, that they needed to appear one by one. So while the dropdown doesn’t show all dotted-line items at once, users were able to drill down on the topic of their choice.

Since nested accordions that expand downward are painful to navigate, and to avoid sending users down a rabbit hole, I proposed using breadcrumbs to show a path like Google Drive does. That solution didn’t scale with long localized strings. In the final version, the design compromised on showing only the previous level for navigation.

SEO was a consideration and challenge when designing the footer. Leadership and the SEO manager wanted to include many common queries to promote discoverability, which increased vertical height especially when translated and localized. I mocked the footer in a few long languages to determine the wrapping behavior of worst case scenarios. For mobile, I followed the same pattern on desktop for parity, using accordions to expand second-level items. The above is the resulting and final design we landed on. It was truly a great experience working cross-functionally and across teams balancing business objectives with the new progressive framework.