Skip to main content

How Facebook secretly redesigned its iPhone app with your help

How Facebook secretly redesigned its iPhone app with your help

/

With iOS 7, the company introduces a flat design, a new navigation bar, and a surprising new system for testing it all

Share this story

Facebook ios7 redesign
Facebook ios7 redesign

The App Store will be packed with updates today as developers roll out new designs and features to take advantage of Apple's new iOS 7. Facebook is no exception, but alongside the expected visual tweaking and trimming, the company is introducing a radically simplified navigation paradigm. Other developers sweat bullets when they make a big change like this, but Facebook isn't. It believes users will like the update because it's already tested it — with 8 million unsuspecting people.

We sat down with the engineers and managers behind the Facebook app for iOS to discuss the new design and how the team rallied to make it happen in time for iOS 7. Michael Sharon, product manager for iOS, along with a team of product managers and engineers including Rousseau Kazi, Scott Thomson, Ari Grant , and Monica Horak walked us through the process of how Facebook combined this new navigation with a ground-up rewrite of its app for iOS 7.

The redesign is only half of the story

What we discovered is that the redesign is only half of the story — the other half is a company that's testing iterations of its native app at a scale that's unprecedented in the iOS world. "This is the first time we know exactly the impact a huge native release will have on our users before we ship it out," Facebook tells us, and it has the data to back it up.

Back to the future

The biggest change to Facebook's new app is the navigation bar across the bottom, which replaces the sliding drawer on the left side of the app. At the exact same time that Apple itself has begun to move some of its own apps toward sliding to the left to reach up into an app's hierarchy, Facebook is abandoning it for something that feels a lot more like Instagram — or any number of other, more traditional iOS apps.

Facebook iOS 7 redesign hands-on photos

1/8

At the bottom of every screen are five relatively large buttons: News Feed, Requests, Messages, Notifications, and More. Within each section, however, users are presented with the familiar Facebook views they're used to. News Feed, still by far Facebook's most important asset, is unchanged. The team targeted the "minimal set of changes we could make to make this app feel at home on iOS 7, but also not disrupt the user experience too much." Chat Heads are also still present within the app, and can still be flung about the screen. The "composer" panel, the little buttons that actually let you post, still sits at the top of your News Feed, scrolling out of view as you browse down.

The More tab gives users access to all of the stuff that was previously available in that left-hand panel, including games, events, nearby places, groups, and all the rest. However, with this new setup, those items are "stateful." That means that if you go into "events," for example, that view will "stick" in the More tab after you leave it. (The iPad app, with its larger screen real estate, is keeping the old navigation model, at least for now).

Get ready to clear more unread badges

Last but not least, each of these five big tabs can be badged with notifications while you’re within the other tabs. The News Feed won't badge the main icon — but inside the app, it's a way to gently (or not-so-gently, if you hate unread badges) incentivize users to stay within the app.

Facebook actually needed to design the new navigation bar twice — once for the fully-redesigned iOS 7 version of the app and again for the iOS 5 and 6, which the company still supports despite the fact that only a tiny fraction of users don't upgrade.

Navbar

Building for iOS 7

Redesigning an app for iOS 7 seems like a deceptively simple project. Apple's flat design requires fewer graphical flourishes, drop shadows, and even buttons. The heavy focus on text and clean lines theoretically should make a designer's job easier since you don't need to re-create a ton of image assets. "So initially, we had the same thought as you," says Sharon. "[We thought] this can’t be so bad. We’ll just throw away half the images and be done!" As it turns out, flat design requires careful balance and an eye for detail — and that takes time.

More than just a new look

Not only did Facebook discover that it needed to recreate a huge number of buttons and elements in the new style, but making everything look good required repositioning lots of pieces. The team also needed to replace heavy buttons on nearly every screen, "It was just a massive effort across the whole app."

For Facebook, iOS 7 is more than just a new look with the same old stuff under the hood, but in a real way an entirely new OS for developers. Sharon tells us "it's a platform. It's not necessarily just the visual changes. [Apple has] rethought a lot of the way app underpinnings work, and that really changes how developers have to think about their apps."

Taking on iOS 7 as a new platform at a deep level meant rebuilding the app with the iOS 7 SDK, and simply plugging the old app into the new system caused a lot of things to break. The new SDK "required us to completely rewrite pretty significant parts of our app ... it became very clear that this was a massive change to iOS that we hadn’t seen [before]."

"It was just a massive effort across the whole app."

In fact, addressing those changes means that Facebook isn't yet taking advantage of some specific iOS 7 features, like background updates, though the team says that it's "planning on doing a lot more" and is looking specifically at "some of the cool new back-end features" in iOS 7.

Don't call it a beta test

Just over one year ago, Facebook switched from an HTML5-based app to native code, and the user benefits were felt immediately. The app instantly became faster, more responsive, and it was able to take advantage of animations. Yet while Facebook's users got a better app, Facebook's developer team now faced a new challenge: "The one thing we lost was the ability to test," and that sort of testing has always been at the core of Facebook's hacker culture.

"We lost the ability to test."

With the News Feed redesign back in the HTML5 days, for example, Facebook was able to change the background color for a subset of users and check the data, allowing the team to "realize that making the background color slightly darker actually has a 1 to 2 percent impact on engagement." With the native app, however, Facebook was constricted: it couldn't push out those sorts of tests to users. Apple needs to approve every version of the app that comes out, but more importantly the code sits on your phone, not on Facebook’s servers where it can simply make changes directly. It has to push the same app out to everybody, and it had to do so on a much slower basis.

To get around these issues, Facebook built an entire system for creating alternate versions of the native app within the native app. The team could then turn on certain new features for a subset of its users, directly, and measure the results. Starting in early 2013, the team put together a system of "different types of Legos — that we can reconfigure really easily ... and see the results on the server in real time."

Facebook tested, Apple approved

Apple doesn't allow developers to ship beta tests in its App Store, but Facebook insists that each test feature it hides inside its app is "production level" and the furthest thing from a series of "quick, janky experiments." The teams says it has been "very straightforward with Apple" about its methods.

What's most surprising is the scale of Facebook's user testing with the navigation bar. The team says it has tested the new navigation bar with as many as 8 million users, using various iterations of the layout since March. Yet despite this widespread testing, the feature hasn't garnered widespread attention from the tech press.

Why so little notice? It's likely that Facebook is just smart enough to know who is and isn't likely to take note of such a change — but the team also believes that the new navigation bar is so intuitive that users hardly notice it: "When we did UX studies, people just don't realize that there's a tab bar there."

Web meets native

Back when the company rolled out its major redesign in 2011, they showed it to Mark Zuckerberg, who "liked it so much he asked us to apply it to everything." And so Facebook did just that, unifying its design and navigation across iPhone, iPad, Android, and the mobile web. With iOS 7, however, Facebook is able to do what it loves: let user metrics augment — and even guide — its design sense. "We wanted to come at it with fresh eyes. This wasn't Mark sitting around going 'Tab bar, go!'"

"This is really the evolutionary winner."

Because of its size and and its culture, Facebook often thinks like Google: mixing design sense with relentless testing and just following the data. "We tested a lot of [variants] with real users so we could see what people were thinking of them, not just our internal opinion, and this is really the evolutionary winner."

With its new design and new system for testing in place, Facebook has applied web design philosophies to its native app. "This is the first time that we're going to make a major, native change that we know all the key metrics." Can 8 million people be wrong?