Why Facebook redesigned Facebook.com

If you haven't got it already, you soon will.

Twelve months ago, Facebook CEO Mark Zuckerberg unveiled a major redesign of the company's behemoth social network. Dubbed 'The New Facebook,' or FB5, it was a visual marker for the company's pivot toward privacy-focused communications. "The future is private," Zuckerberg told attendees during his F8 developer conference keynote. "This is the next chapter for our services."

The changes were widespread and dramatic. Facebook's iconic shade of blue was stripped from the top navigation bar, for instance, and an overhauled Groups tab made it easier to find and keep up with communities that were relevant to you. Facebook started rolling out the mobile version immediately and promised that the desktop equivalent would be available later in the year. A small group of web-based users were granted beta access last October, followed by a slightly larger group in January and "the majority of people" last month.

The redesign is long overdue. While Facebook's website is constantly changing, its general look and navigation have remained the same for many years. The old design, known as "Classic Facebook" feels clunky and chaotic in 2020, with cramped sidebars that bury new features such as Watch and Facebook Gaming. Various sections have multiple entry points, too, which adds to the site's clutter and complexity.

The website's slow decay can be traced back to 2011. At the time, Facebook's smartphone apps were built on HTML5, the same web-based language as the mobile website. It was an efficient way of working, but the mobile apps were known for being horrifically slow and buggy. In early 2012, Zuckerberg told his engineers to stop and start over with native apps. While embarrassing and time consuming, the do-over worked. The native apps were a huge success and helped Facebook establish a "mobile first" culture that could stave off rivals such as Twitter and Snapchat.

“We shifted a lot of our attention to really catching up on mobile,” Tom Occhino, director of engineering for the Facebook app, told Engadget.

Facebook continued to maintain and update its website. The platform was a lower priority, though, which inevitably affected its design and performance over time. “The site became pretty slow and cluttered from a user-experience perspective," Occhino said. "The technology stack that supported it didn’t receive a lot of love, and a lot of the updates and modernization that we were seeing in the mobile technology stacks.”

Five years later, the company stopped and reconsidered its approach. The bulk of Facebook's traffic was coming from mobile devices, but a large sum of people were still visiting via the desktop site. Some extra digging revealed that a number of users had neatly split their Facebook usage between the two platforms. They might use their phone for most things -- scrolling through the News Feed and checking comments they've been tagged in, for instance -- but prefer a larger screen for discrete tasks such as managing private groups and buying big-ticket items from Marketplace.

Not everyone forks their usage so neatly though. And there will always be some who use one platform exclusively. But in general, Facebook realized that select features were still popular on the web and should, therefore, be prioritized. The inverse was also true. Lots of pixels on the homepage were "being taken up by features that don't get a lot of usage at all," Occhino explained. Similarly, the areas that had become important — or that Facebook expected to become pillars of the desktop experience — were buried because they didn't fit into a design structure established years ago.

"Our [old] website, which was designed for the old stuff that you would do on Facebook.com, didn’t really fit the new patterns that people were using their desktop for,” Occhino said.

Facebook ramped up these conversations and formalized the redesign project in 2018. The team established three principles for the revamp: fast, modern and relevant. The latter meant emphasizing the parts of Facebook that desktop holdouts use most often and raising elements that the company wants more people to know about. Balancing the two, the company hoped, would make the site a more compelling and useful place to visit.

Facebook's answer hinges on the top navigation bar. It's no longer blue, which is visually refreshing but also necessary so that the team could experiment with more colorful iconography at the top of the page. "The new white chrome really enabled us to draw attention to the things in the interface that we needed to draw attention to," Dan Lebowitz, lead product designer at Facebook, told Engadget. It was also necessary so the site could support an frequently requested dark mode. "Going with a simpler set of colors enabled us to just quickly switch from white to black," Lebowitz added.

The slither at the top of the page is a little taller than before and has five centrally-aligned icons, which represent Home, Watch, Marketplace, Groups and Gaming. The search bar, which used to dominate the top navigation, has been condensed and shuffled to the left with the new-but-still-blue Facebook icon.

Clicking the Home icon will take you to Facebook's familiar News Feed. Ephemeral Stories now sit above the post box, which is no doubt to increase their visibility and adoption. (The format is hugely popular on Instagram, but doesn’t seem to have found the same success on Facebook.) The text and iconography in the sidebars are larger, making them more noticeable and easier to read, and the margins on the far-left and right sides have been removed entirely. The middle column, which contains the News Feed itself, is the same width as before, though. It's now a "flexible" element, according to Occhino, and the team has experimented with a focus mode that hides the sidebars as you start scrolling. For now, though, individual posts will appear as they normally do in the feed.

"You can't just take, say, a portrait image and just stretch it all the way across the screen," Lebowitz added. "So we have to be very careful with how wide we go."

The homepage feels like Facebook's anchor. A touchstone that can mitigate some of the company's more ambitious changes. Next to the Home icon, for instance, is Watch. Facebook's relationship with video has changed over the years. Around 2015, Facebook prioritized video in the News Feed and publishers — desperate for audience growth and anything resembling a business model — dogpiled the format. That same year, Facebook added video calling to Messenger and launched a Periscope rival called Facebook Live.

The news industry's "pivot to video" didn't last though. In January 2018, Facebook tweaked the News Feed algorithm so it would prioritize content posted by friends and families. Publishers were already struggling to monetize views — which had been artificially inflated anyway — and quickly wound down their social video efforts. Eight months later, Facebook expanded Watch, a place for higher-budget web shows and independent content normally found on YouTube, from a US pilot to a global service.

For now, it's unclear how successful Watch has been. Facebook has canceled two of its biggest exclusives and reportedly slashed its budget for original content. Still, Watch's placement in the navigation bar signals its importance to Facebook. And it's possible that Watch's previous placement in the sidebar hampered its growth. Video streaming is a massive part of the internet, and industry-wide viewership will only increase as the coronavirus pandemic wears on. It's understandable, therefore, that Facebook doesn't want to give up and forfeit the potential traffic just yet.

The Watch section itself has been subtly redesigned with the same typefaces and iconography established on the homepage. It's a big improvement and should persuade more people to sift through the company's programming. "Fullscreen and immersive premium experiences are just better, I think, on a bigger monitor," Lebowitz said. The interface still pales in comparison to a platform like Netflix, though. Facebook Originals, for instance, are promoted with tiny thumbnails in the Shows sub-section. You can hover over them for an expanded preview but it's less dynamic and engaging than what you would find on services like Apple TV+ and Disney+.

Next to Watch is Marketplace, a fee-free alternative to Ebay and Craigslist that lets users buy and sell secondhand goods. According to Occhino, the majority of Facebook's e-commerce traffic comes from mobile. Smartphone and tablet purchases only represent a third of total spend, however. That means many people are happy to make a quick purchase on their phone but prefer to buy more expensive items on a desktop.

According to Facebook, many Marketplace sellers like the option of using a laptop or monitor. They might send some quick messages on their phone, but it's easier to compare offers and bulk-respond on a larger screen. "You can manage your [Marketplace] listings and chat simultaneously with potential buyers," Lebowitz explained. "That’s just impossible on a mobile app. You can’t have a chat tab open and manage your listings at the same time, you have to hop back and forth."

Groups have been shifted to the Facebook nav bar, too, and given a dedicated feed that algorithmically sorts recent activity. The elevation of the feature isn't a huge surprise, given Groups’ popularity and functionality as modern message boards. Smaller communities have found other places to prosper, such as Discord and Reddit, but Facebook remains a popular place for people to gather in groups -- large and small, public and private -- and discuss a particular topic or interest together.

Group administrators will find a revamped sidebar with useful management and moderation tools.  These include member requests, auto-flagged and member-reported content, group rules, and various draft, pending and scheduled posts. There's also an "insights" section which offers various growth and engagement metrics. Page managers, meanwhile, have a slightly different set of options that includes job listings and applications, an advertising hub, and a unified inbox for Messenger and Instagram Direct messages, as well as Facebook and Instagram comments.

The final icon in the navigation bar is dedicated to Gaming. Facebook has a history, for better or worse, of being a destination for so-called 'social games' like FarmVille. It's still possible to play casual titles on the social network, including Instant Games -- a library of cross-platform titles that were once part of Messenger but are now restricted to the core Facebook platform. The company has pivoted, however, toward being a game livestreaming platform in recent years. A dedicated portal was launched in 2018, followed by a tab in the mobile app and, just last month, a Gaming-branded Android application.

“We’re really investing in the Facebook Gaming brand,” Lebowitz said.

The initiative is a direct competitor to Twitch, YouTube Gaming, Mixer, and smaller streaming platforms such as Caffeine. Facebook isn't the market leader at the moment -- streaming specialist StreamElements estimated that it had an 8.5 percent market share last year -- but the company clearly wants a bigger slice of the ever-growing audience. Over the last 12 months, Facebook has signed a number of exclusivity deals with high-profile streamers including Jeremy "Disguised Toast" Wang, Gonzalo "ZeRo" Barrios, and WWE superstar Ronda Rousey.

Early versions of the redesign had seven icons in the middle portion of the navigation bar, rather than five. Shortcuts for Messenger, notifications and the user’s profile page were eventually shuffled back to the top right-hand corner, though, similar to their positioning in the old version of Facebook. "We realized pretty quickly that people were maybe missing notifications or not seeing them because we had moved where they appear on the interface," Lebowitz said. A shortcut for Gaming was added to the top later.

On the right-hand side of the top navigation bar, next to the user's picture and name, is a new button with a "+" symbol. It's a Create shortcut that helps users quickly get started with a new Page, Advertisement, Group, Event, Marketplace Listing or Fundraiser.  Each of these areas also has a brand new WYSIWYG (what you see is what you get) editor with various text fields that update the preview in real time. You can also switch to a mobile preview, too, to see how your page or party invite will appear on phones.

These editing tools are approachable and should, therefore, encourage more people to be creative and create something both personal and unique. "This is just one of those things that we know is better on a desktop computer where you can really take advantage of the screen real estate," Lebowitz said.

The website should also feel slightly snappier than before. That's because the visual redesign was supported by a massive infrastructure revamp. “We know from tons of data and research that every time we make our products faster or simpler, people use them more," Occhino said. "They share it more, they have a more rewarding experience. And so that was table stakes. The most important feature was that this thing is going to be fast and responsive.”

All of these improvements have led to a site that, Facebook hopes, doesn’t feel like an afterthought. It’s now similar to the mobile app -- both visually and from an engineering perspective -- and reflects how desktop usage is evolving.

Public reaction has been mixed, though.

"I want to meet the person in charge of the recent Facebook business redesign so badly," Scott Chasen, a reporter for 247Sports, tweeted. "I just want to meet them. I want them, in words, to explain to me how they thought it was a good idea and didn't ruin every single functional thing that previously existed." Some think the design is a shameless copy of Twitter. "Just saw Facebook's redesign," Twitter user @PEAJAEwascher said. "Guess it should be a compliment they decided to replicate Twitter."

User backlash is common whenever a company as large as Facebook redesigns one of its products. Many could change opinion, too, once they've used the new version for a few months and overcome the initial shock factor. Not everyone is upset though. Troy J. Thomas, creative director of design studio A Small Team, said: "Cheers to the Facebook design team! I'm sure I'm late to the party, but I can only imagine the work that went into the new update. Such a needed evolution of the product. Well done!" Another Facebook user tweeted: "The new Facebook is the first website redesign that I haven't formed a protest group about."

The much-needed revamp could give the site a small traffic boost. However, it's unlikely that desktop usage will ever come close to rivaling native app traffic again. But that's perfectly fine. Facebook's redesign isn't some wild swing for hyper growth. Instead, it's meant for the people who still enjoy loading up the website every day or who don't have a mobile device capable of using the company's apps. It's recognition that the legacy portal -- the one that started Facebook's colossal empire -- deserves more than the bare minimum. If nothing else, the new foundation should help the site age gracefully for many years to come.