Inside Flipboard’s Project to Rethink Its iPad App for the iPhone

12/7/11Follow @wroush

Any iPad owner who uses Flipboard a lot knows the familiar disappointed feeling: You left your iPad at home, you’re waiting in line at the grocery store, and you just want to pull out your iPhone and spend a minute or two browsing the app’s beautiful lineup of stories pulled from your Twitter, Facebook, RSS and feeds. But wait, you can’t—Flipboard doesn’t have an iPhone app.

Or it didn’t until today. At midnight Wednesday the Palo Alto, CA-based startup released the long-awaited iPhone version of its popular news browsing app. It brings users all the same stories that showed up on the iPad version, but the interface has been redesigned from the ground up for the iPhone’s smaller screen. The signature “flip” or page-forward action in the app now works vertically instead of horizontally, for example, to allow easier single-handed operation of the app with a free thumb. The app also includes a few interesting new features, including “Cover Stories” and “Fast Flip,” that are designed to speed users’ journeys to the content that interests them most.

The Cover Stories screen on Flipboard for the iPhone

Flipboard has raised just over $60 million in venture financing on a reported valuation of $200 million, and to justify the high expectations it has set with investors and users, it had to make its first smartphone app truly amazing. Marci McCue, a spokesperson for the company and the wife of co-founder and CEO Mike McCue, told me yesterday that the company’s designers and engineers went back to the drawing board several times before they came up with a way of presenting content that felt right on the iPhone. This Steve Jobs-like perfectionism was the reason for the long delay in delivering the app, which was originally expected by mid-summer.

Making a great iPhone app, in other words, wasn’t just a matter of shrinking down the iPad version of the app. “We went through a lot of interaction design changes,” says McCue. “On the iPad stories flip right to left. How does a story open on the iPhone? How does it flip? Should it flip at all?”

For the most part, the company has come up with elegant solutions to those questions. There are, however, a few first-day hiccups with the app. I had trouble signing in (it worked on the third try), the content for many sections wouldn’t load at all, and I wasn’t able to add new social accounts from the app.

But the problems will likely be short-lived, and are probably due to the huge crush of people downloading the app, signing up for the first time as Flipboard users, and linking the app to their social-media accounts. Flipboard is, in essence, a social magazine that grabs and reassembles the headlines, images, and text for online stories mentioned by your friends on Facebook, Twitter, LinkedIn, Flickr, Instagram, Tumblr, 500px, and other services. That involves a lot of behind-the-scenes processing, and the glitches today are probably just a repeat of Flipboard’s July 2010 launch, when virtually everyone with an iPad wanted to add the app simultaneously.

McCue and Flipboard co-founder Evan Doll (who are pictured above) spent about an hour walking me through the new app yesterday at the company’s crowded-to-bursting headquarters (McCue says the company is looking for a larger space, but doesn’t want to leave downtown Palo Alto). The trick with the iPhone app, McCue says, was to preserve all the elements that make using Flipboard feel like an efficient, streamlined news browsing experience, while still finding a place for key social elements, such as the icons showing which of your friends originally shared the story.

“Ultimately, it’s about having this immersive imagery, style, and typography that gives you a sense of a real reading experience, plus the social content piece so that you know where it’s coming from and why it’s there,” McCue says. “People make decisions about what to read based on who is sharing it. If your mom sends you and article on eating well, you’re more likely to read it versus just seeing it on the Web. That is what makes Flipboard a personal magazine. It’s very different from the news aggregators out there. We’re about giving you what your friends care about, and what the people you follow are recommending.”

Doll, who leads Flipboard’s iOS engineering team, says the project to transform Flipboard into something that works on the iPhone started from the observation that “the uses cases are entirely different. You use the iPhone standing in line at the coffee shop.” And you’re probably holding it in one hand—which means a vertical swipe with your thumb is a much more natural gesture for advancing through stories than a left-to-right swipe with your index finger, as on the iPad.

The next difference: “On the iPhone we try to highlight one story per page,” in contrast to the three or more stories per page on the iPad, where there’s obviously a lot more display real estate to fill up. “You might initially think that is too low, but you can flip really quickly through a huge amount of content. We are not holding you back—we try to combine pagination with really insane speed, by doing a lot of caching on the server side and predictively loading the next couple of items so that it’s all ready to go. We call that Fast Flip.”

The highlight page for each story on Flipboard shows a full-screen image (if the story has one), a headline, and sometimes the first line or so of body text. There’s also an attribution line showing which publication the story came from, what date it was published, and how many times it’s been retweeted or otherwise shared.

But the centerpiece of the iPhone app is the new Cover Stories feature, which is analogous to the main feature in a real magazine. “It’s a digest of the most interesting things across all your feeds,” Doll explains. “We try to find the highlights, the gems, and let you browse them in one place. This is the feed you browse when you’re standing in line and you just have a couple of minutes to spare. It brings some clarity to this huge amount of content, especially when you have limited time and attention.”

Doll says it was clear almost from the beginning of the iPhone app development process that iPhone users want to get to information faster, and have less time to explore multiple categories of content. “We needed to do something better than give you the same old sections and make you jump between a bunch of different feeds,” he says. “You can still do that if you want, but Cover Stories is pretty essential on a device like this.”

How does the app decide which stories to promote to the Cover Stories section? Doll says Flipboard uses an “intentionally vague” set of algorithms and heuristics—which I took to mean that the company doesn’t want individual publishers to figure out how to game the system. “The bottom line is it’s based on your usage,” Doll says. “If you tend to view articles from a certain source, and in particular if you share that article with someone else, that will make that source more likely to come up in your Cover Stories.”

The Flipboard app for the iPad will soon be retrofitted with Cover Stories feature. And Doll and McCue say it’s just the first example of a series of personalization features that are coming to both versions of the app.

Last year the company acquired a startup called Ellerdale and said that its semantic analysis technology and its index of social-media messages would ultimately become the “relevancy engine” for future releases of Flipboard. Ellerdale co-founder Arthur van Hoff, one of the original developers of the Java programming language at Sun Microsystems, is now Flipboard’s chief technology officer, and McCue says he’s hard at work on new ways to surface the stories that best match users’ interests.

“We’re just dipping our toes in the water on this,” she says. “The goal is to try to make it easier to access all the things that are important to you. Do you keep liking the photos that Evan is posting to his Instagram account? Then next time we have a photo let’s make sure that is in your Cover Stories.”

For any veteran Flipboard user, the new iPhone app will feel comfortable—and in many ways more convenient than the iPad version. But over time, Flipboard expects that the iPhone app will help it reach an entirely new audience of users who don’t have iPads or haven’t tried news-reader apps on their tablets. For them, the goal was to keep the app clean, elegant, and intuitive.

“I think the core principles remain the same,” says Doll. “Those are basically a focus on the content, not letting in too much chrome, letting the content be the interface. You need information density without clutter. We have a stellar design team, and the amount of polish that has gone into every single one of these screens—deciding hat information to show, how big it should be, and what do leave in and leave out—has been borderline obsessive. But it pays off.”

[Update, April 2, 2012: Craig Mod, a former employee at Flipboard, has published a fascinating personal essay about the creation of Flipboard for the iPhone, and about the physical book he created to document the project.]

Wade Roush is a contributing editor at Xconomy. Follow @wroush

By posting a comment, you agree to our terms and conditions.