Impact

Redesigning the navigation resulted in scores 2x usability benchmark scores than before. Additionally, it increased vertical time spent and click through ratings

Introduction

Gaming tab lives within the Facebook app. Within the tab itself are a number of content areas which users can explore. Our problem starts with the data point that our users are not utilizing the navigation.

Problem

Our problem starts with the data point that our users are not utilizing the navigation. Click through rating was low on pill navigation Low percentage of users scrolling through the pills to see additional content UX Research reported that users did not feel like gaming content was “for them” despite being the target audience

Goal

To develop a navigation in which users can answer: “what can I do here?” and “what is this space for?”

Purpose of Navigation

Navigation and discovery: Allow users to navigate to different content areas Help users to understand what other content is available

My role

• Led design effort: explorations on design, content strategy, and research needs
• Project management: developed project expectations and timeline
• Cross collaboration: led leadership alignment and outward communication to other teams

Process

The navigation redesign took 3 phases of development: design exploration, engineering experimentation, and user research

Shipped Impact

Navigation and IA resulted in higher click-through-rating, and increased traffic to subsurfaces

IA Approaches

Personal Following / Discover / Browse As a user, I want to navigate through content based on it’s relationship to me Action Play / Video / Communities As a user, I want to navigate through content based on the action I can take Hybrid For you / Play / Video / Communities As a user, I want to navigate through content both through their relationship to me and the actions I can take

Navigation types

There are 4 types of navigational components within the Facebook Design system. We started here to determine if these could fit our needs:

• Subsurface: navigates to a brand new page/surface
• Filter: takes content which is already loaded and filters down to only show selected content
• Pivot/lens: reloads the feed to show selected content
• Flat feed: navigation is done more passively through the feed

Principles

Grounding decisions on principles Predictable: I know where to find what I want Scalable: Content will scale with new architecture Approachable: Easy to understand Personalized: Caters to my needs

Solutions

In addition to these, we iterated more within these areas to fine tune our results. We measured success based on:

Outcome

Hybrid & pivots was the only solution that respected the principles and goals set for navigation

Summary

Based on these behaviors, the project successfully allowed users to answer: What can I do here and what is this space for? Increased click through rating: navigation usage increased significantly Time spent: Users were found to spend more time within each of the content areas Usability: Users research showed our usability benchmark increased by 2x with these changes