IMPACT: Redesigning the navigation resulted in a usability benchmark two times better than previous scores, along with an increase in time spent per vertical (product) - along with increase usage of the navigation itself (increased CTR)
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 that our users were not using the navigation.
Problem
Click through rating was low on the pills
Low percentage of users scrolling through the pills to see additional content
UX Research reported that users did not feel like the 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 & 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, vision and defining research needs
Project management: developed project expectations and timeline
Cross Collaboration: responsible for alignment with leadership 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 CTR, 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
Facebook Design Navigation
There are 4 types of navigational components currently existing within the Facebook Design System. We started here to determine if these would fit our needs.
Subsurface: Navigates to a brand new page/surface.
Filter: Takes content which is already loaded, and filters it down to only show the content selected.
Pivot/lens: Reloads the feed to show content which is selected
Flat Feed: Navigation is done more passively through the feed
Subsurface Pathing
Navigates to a brand new page/surface.
Considerations
Users provided feedback around confusion around pathing.
Filters
Takes current content and filters to content selected
Considerations
Design per content space is restricted to what already exists. Questions about why have a separate space at all?
Pivot
Reloads the content below the navigation to show content selected.
Considerations
Able to design a unique experience for each content space without moving to a new surface.
Flat Feed
Content is primarily passive scrolling and more heavily reliant on machine learning for targeting, and springboards.
Considerations
Some users do not want to passively scroll, but come to gaming with an intent. This type of navigation is also not consistent.
Principles
Grounding our decisions on principles
Predictable: I know where to find it
Scalable: Content will scale with new architecture
Approachable: Easy to understand
Personalized: Caters to my needs
Results
Hybrid / Pivots
Summary
Based on these behaviors, the project was successful in an experience which allowed users to answer: What can I do here, and what is this space for?
