2019The New Facebook: Process
The Problem
Facebook on web was perceived as being slow, dated, and cluttered.
Over the years, Facebook prioritized building new features and updates on mobile and neglected the web surface until it lost parity in performance and appearance.
The Goal
Deliver fast, modern and relevant experiences to people on Facebook.com.
DESIGN: Create a design framework that standardizes components site-wide. Ensuring we have consistent visual hierarchy, are accessible, and look great on any screen size.
BUILD: Develop a built-from-scratch page web application using an entirely new architecture to deliver an app-like experience on the web.
User Journeys
As a team, we started by defining the core actions on Profile. With help from our Researcher, Amy, we were able to put together user journeys that led our prioritization.
MISSION STATEMENT
“Profile is an identity tool that allows for users to express themselves on Facebook. Along with creating content that represents who they are, Profile is also a place for users to reminisce on memories and create new ones.”
Audit and Cleanup
We wanted to take this opportunity to audit all the features and collectively agree to invest more into, leave as is, or remove based on our missions statement.
I led the audit and made recommendations, my PM looked over bandwidth for on-going maintenance, my DS looked at usage rates, and my engineers costed implementing the experience into the rebuild of web.
Self Profile
About Tab
Inline likes (Removed feature)
Check-in Map (Removed feature)
Creating Components
After we completed our audit and were confident in our core feature set, I was able to bring the main areas that needed support to brainstorm with the design team on unified components.
Each area lead presented their surface needs, we took notes on similar flows and interactions, and discussed how we could create consistent designs that served all our purposes but reduced the variations.
Profile redesign spec
After these discussions, we created standardized templates for surfaces across Facebook. We all agreed that these layout variants served our user’s needs and we moved forward to build them. These templates were not rigid however, they could be modified and adapted.
Standardized page templates
Once the page templates were realized, we were able to iterate on manifestations of these early wireframes. For entity headers that lived across Profiles, Groups, Pages, and more, we decided to create a consistent navigational pattern. However, we agreed that differences in layout to highlight important information for each surface was crucial.
Entity header explorations
Migrating the Build
As we began to build the new version of Facebook, we decided to work in phases. We learned from our mobile migration that if we make both stylistic changes and structural changes all at once, we are unable to parse the data on what is affecting metrics and mitigate regressions.
For web, we decided to do stylistic changes first. This meant adopting new components but maintaining the existing layout. This allowed us to simultaneously test changes to the structure on a by-feature basis which gave us clean data and good signal on our success rate.
v1 Self Profile
v1 About Tab
v1 Friends Tab
This is the collective effort of designers from the design systems team and design area leads for each surface. A huge shoutout to Dan Lebowitz and Sarah Han for their support on the Profile redesign.