The Flipboard Makeover, Powered By Framer
Designer Matt Safian shares how Framer is helping Flipboard reinvent the way we consume our news.
Matt Safian is a product designer at Flipboard. Like most of us, he also has a spate of interests outside of the workplace, from technology and fashion to beautifully-designed spaces. But engage this New Yorker in more than just casual chit-chat and what becomes obvious is his passion for street photography. If you’re lucky, he might even whip out his iPhone and show you long exposure shots of waves crashing near his San Francisco home, or the pastel-colored rooftops he shot on vacation in Monteressa del Mar, Italy. During a recent pitstop in Amsterdam, Safian stopped by our office to talk us through how the Flipboard design team used Framer to reinvent the way we consume our news.
A data-driven design strategy.
Since its very inception, Flipboard has championed the niche, allowing users to corral popular topics into beautiful broad-topic collections. The app also integrated with Facebook, LinkedIn, and Twitter, so it wasn’t out of the ordinary for users to flip through a magazine of social posts curated from their feed. Its strength was its dominance at the time, as well as its visually appealing layout, all of which landed the app several accolades early on, including Time’s 50 Best Inventions of 2010 and iPad App of the Year 2010.
But for the most part, Flipboard’s evolution over the last seven years remained conservative, if deeply true to its original mission of connecting users to their interests and each other. At 90 million monthly active users across iPhone, Android and Web, this strategy had proven more than satisfactory. But with formidable rivals like Apple News, Paper, and the ubiquitous Facebook feed all vying for a share of our limited attention spans, Flipboard CEO Mike McCue knew that the company needed something fresh to stay relevant. Internally, McCue galvanized the product team into action and they started with the one thing at their disposal — mounds of user data.
“Early on, we observed that people’s interests could be organized into high-level categories, like news, technology, and photography. But in looking more closely, we saw that for each category, there existed clusters of more specific and niche sub-interests. Our most engaged users were reading stories within those clusters,” says Safian, a Connecticut College graduate with a background in computer science, graphic design, and psychology. The team eventually mapped out the ‘interest graph’ above, which helped visualize the relationship between the tens of thousands of topics on Flipboard: “We wanted to make it easier for everyone to tap into those clusters, and shift the focus from general interests to personalized passions.”
Prototyping, the mother of reinvention.
This idea of passions would go on to form the foundation of the fourth version of Flipboard, a complete overhaul that tackled the flaws of a random reading experience in favor of hyper-personalization. Though the goal was concrete, Safian shared that early explorations remained intentionally abstract. That’s where Framer came in.
“At this point, Framer was already an integral part of our design process. But this reimagining of the product is where we really got to employ it at a high level,” says Safian, one of two product designers tasked with the redesign.
“When a new idea is still fuzzy, everyone in the room — product leads, designers, engineers, PMs — holds a different vision in their heads. Framer gives us a way to turn our concepts into something tangible.”
“While working on the new Flipboard, we started exploring a navigation model that moved away from a traditional tab bar and towards a more spatial design system. This system allowed you to move between different content spaces in a more fluid way,” says Safian. “Such an inherently spatial system needs to be experienced — that’s where Framer came in.”
Prototyping very quickly gave way to user testing. Safian says the team put Framer prototypes in the hands of real users pretty early on. “We recognized that the new model we were exploring was a pretty significant departure from our existing one.
“Testing Framer prototypes with real users allowed us to see first-hand how people reacted to the new model and which directions were most effective.”
Smart Magazines, a whole new way to read.
Today when you launch Flipboard, you’ll be prompted by the question ‘What’s your passion?’. This experience asks people to self-categorize themselves on a deeper level, effectively building their very own ‘Smart Magazines.’ Typing a topic is quickly followed by a prompt to personalize further, along with tons of user-curated suggestions and hashtags.
“For any given high-level interest — like photography, design, or fashion — Flipboard lets you specify the topics you particularly like. For me, in photography, I’ve specified things like “mirrorless cameras”, “Fujifilm”, and “Henri Cartier-Bresson””, says Safian. “On the backend, Flipboard boosts my affinity to these topics in the context of photography. This allows me to have dedicated spaces for my interests that are highly personalized. And for everything that I follow — say people or other publications — Flipboard will highlight the stories that relate to the my specified topics.” The result is a carousel of clean and hyper-personalized niche magazines, ones that cater not just to interests, but to deep-seated passions.
Despite their remarkable staying power, the team isn’t resting on their laurels. Safian says that if anything, the recent launch has inspired a deeper sense of purpose. “Flipboard has always been a place where people, their perspectives, and their passions intersect. We think there’s a big opportunity to elevate and amplify these intersections.”
To learn more about how Framer can improve your product team’s workflow, check out all the features included in our integrated design, prototyping and collaboration tool. Or talk to us to find out more about the additional features included in our Team plans.
Want more design articles?
5 Ways Facebook Scales Their Design System
Read more ›
Design Systems in Framer X
Read more ›
Creating Code Components
Read more ›