Facebook lost its ability to “move fast and break things” when it switched its apps from HTML5 to native. But it’s gotten its mojo back. Today it announced a big iOS 7-style app redesign featuring bottom-screen “tab bar” navigation built with an advanced native mobile testing framework. Facebook knew to ditch the pull-out navigation drawer by testing different interfaces in 10 million-user batches.
[If you don’t see the new Facebook app in the App Store, give it an hour as the rollout seems to be a bit slow]
The new version of Facebook for iOS isn’t just for iOS 7. It’s rolling out to iOS 5 and 6 too, but with a black tab bar for navigation at the bottom of the screen that matches the old iOS style instead of the white tab bar for iOS 7. However, the tab bar won’t be coming to Facebook for iPad, as it sees the drawer as still a good fit for bigger screens.
For the little ones, the new tab bar delivers a super-charged “More” button. It appears on the far right next to one-tap buttons for News Feed, Requests, Messages, and Notifications.
More reveals your app bookmarks just like the old drawer did, but will save your place in whatever product you browse. Previously, if you opened your drawer and switched to look at Events or Photos, you’d lose your place in the News Feed or whatever else you were doing. The new More button essentially opens tabs over the top of the feed so your state and context are preserved. It even works between sessions so if you leave Events open in More, your parties will be waiting there at the ready any time you tap More.
As for aesthetics, Facebook has also made the top title bar translucent and redesigned many of its icons like the one for messages to match the line and arc style of Apple’s new mobile operating system. But Facebook didn’t flatten everything, leaving some texture and depth to the feed. You can see video of the redesigned app here.
The real story today isn’t the app, though, but how it was made.
HTML5 Was Slow, But Boy Could It Test
Facebook has never been afraid to try new things and see what sticks. It invented the “Gatekeeper” system to let it simultaneously test thousands of variations of Facebook on the web with subsets of users. It would collect data about usage and performance to inform what to roll out to everyone.
On mobile, it hoped to do the same thing, so it built its iOS and Android apps using a Frankenstein combination of native architecture and HTML5. The latter let it ship code changes and tests to users on the fly without the need for a formal app update. “With HTML5 we’d ship code every single day and be able to switch it on server-side”, Facebook product manager Michael Sharon tells me. That meant it could push a News Feed redesign one day to 5% of users, then to everyone a week later, and then fix a bug a few days after that.
But beyond testing, HTML5 was a disaster. It made Facebook’s apps sluggish and unresponsive, which hampered engagement, ad views, and their app store ratings. Users hated Slowbook. Mark Zuckerberg would later say on stage at TechCrunch Disrupt that “Our biggest mistake as a company…was betting too much on HTML5″.
So Facebook ditched HTML5 and rebuilt the apps entirely on native infrastructure last Summer. They were twice as fast. Suddenly their app store ratings shot up, and people read twice as many News Feed stories on average. It was a huge win for Facebook.
Except that it had to sacrifice HTML5’s testing abilities.
“We Use Testing Kind Of Religiously”
Sharon explains “One thing we lost was the ability to do testing. We use testing kind of religiously in both the web and HTML5 apps, and this is something we wanted to get back to as much as possible.”
Having to wait until its monthly app update cycle came around to test new versions of its apps was torture for the typically nimble company. It wanted to push changes and get immediate feedback. To solve the problem on Android, Facebook launched a beta tester club in June 2013 that let it use Android’s more permissive stance towards developers to let power users sign up to play with potential new features and catch bugs.
But iOS refuses to sully its simplicity with such beta capabilities. So over the past year Facebook quietly built out a new native mobile app testing framework and sprung it into action in March to build the app update released today.
How it works is that when you download Facebook for iOS, the app actually contains multiple different versions of the interface. However, you’re grouped with a few hundred thousand other users and you all only see one version of the app. This way Facebook can try out tons of variations all at once, without multiple app updates or any confusion for users. We’ve all been Guinea pigs in the mobile testing framework since March, but none of us knew it.
Sharon was adamant that these different tests aren’t half-baked betas, saying “We’re not shipping a subpar version of our app. We’re shipping full production-ready versions that could become the main experience”. When added up, Facebook would test major changes with between five and ten million users at a time — more than many apps have in total.
“I wouldn’t say we’re ‘data-driven’. We’re ‘data-aware’ or ‘data-informed’,” Sharon says. That means that while Facebook collects a bunch of testing data that sways its decisions, it won’t chuck out its intuition or a design it believes in just because the data says so.
The first big mission of the new testing framework was rethinking how users navigate on mobile. It wondered if there was something better than the navigation drawer that slides out from the side of the app.
It used the new testing framework to experiment with dozens of different interface designs, and compared them on metrics including “engagement metrics, satisfaction metrics, revenue metrics, speed metrics, perception of speed metrics” until it found that when looked at holistically, the row of buttons at the bottom of the feed or main screen was the best design. This is what’s becoming available for iOS today.
And that’s how Facebook got its testing groove back.
Comment