Designing the new Flipboard

Designing the new Flipboard

What’s your passion?

Written in large letters along the wall of our office in Palo Alto is the phrase, “Great stories move the world forward.” On the facing wall, floor-to-ceiling photographs depict defining moments in our history — the Mars Curiosity rover crawling across the sands of the red planet; David Bowie as Ziggy Stardust; Jackie Robinson leaping to catch a fly ball. These images honor the great stories of our time that have moved the world forward. Stories like these embody the passions that drive people to improve our world: space exploration; musical expression and gender identity; sports and civil rights. At Flipboard we strive to create a product that gives people a place to find and engage with these kinds of stories.

Over the years, we noticed that people began to use Flipboard for more than just keeping up with the news. In fact, we observed that people got the most out of their Flipboard experience when engaging with things they cared about deeply — their passions. And so it was no surprise when our CEO Mike McCue tasked us with reimagining Flipboard to focus on people’s passions.

How & Why

Designer Frank Chimero, in his book, The Shape of Design, writes about the distinction between “How” and “Why” when designing. As Chimero says, it’s one thing to ask yourself “How” you might design something — the colors and type, the interaction model, the copy and messaging. It’s a different question to ask, “Why?”. Before thinking about how a new passion-focused Flipboard might look and feel, we first needed to establish a set of guiding principles that would inform our work.

We began with a handful of research initiatives aimed at uncovering how people think about, consume, and organize their passions. One of the initiatives focused on examining our internal “interest graph” — a visualization that shows the relationship between the tens of thousands of topics on Flipboard.

A slice of the Flipboard interest graph

We learned that people’s interests generally fall into high level categories — things like news, technology, and sports. In looking more closely, we observed that each high-level category contained smaller “clusters” of interest. For example, one cluster in photography included street photography, film, and black & white, while another included landscapes, DSLRs, and Photoshop. These clusters highlighted the fact that people tend to construct unique hierarchies of interest.

Our other research initiatives revealed similar findings. In-person interviews, surveys, and remote user-testing all showed that people’s passions were categorical at a high level, but uniquely different at their core. As a guiding principle, in order to focus Flipboard on people’s passions, we needed to design a system that would allow people to freely construct and access uniquely-tuned hierarchies of interest.

Personalizing Passions

Constructing a hierarchy of interest sounds like a lot of work. We wanted people to be able to create personalized reading spaces quickly and easily. Flipboard should do the heavy lifting, bringing the best stories directly to you.

Some of our early design explorations focused on organization and gave people the ability to explicitly group anything they followed. However, this grouping meant people would need to constantly manage and sort the things they followed. This direction gave people clear spaces for reading about their passions, but required too much upfront effort and ongoing organization.

Creating and controlling these reading spaces had to be lightweight. People needed an interface that could effortlessly reflect their unique set of interests, not task them with constant management.

Ultimately we arrived at a design that quietly guides people to define their interests for any given category. Rather than constantly needing to manage what you follow, this approach allows people to simply select the kinds of stories they want to read, and Flipboard takes care of the rest. We call these new personalized reading spaces, “Smart Magazines”.

Various iterations for making a smart magazine

You can make a smart magazine for anything — news, travel, climate change, classical music. Personalize them by selecting subtopics that reflect your specific interests. For example, you can make a design magazine that focuses on prototyping, information architecture, and interaction design, or make one for typography, identity, and color theory. (Each of us on the design team has made our own design smart magazines, and they’re pretty awesome.)

A New Home

Knowing how people would create and edit their smart magazines, we needed to design a way for people to navigate between them. Our research showed that people have different reading modes (catching up on the news in the morning; leaning back to read about travel in the evening). We wanted to respect these reading modes and give people a way to quickly switch between their passions.

Initially we tried an approach that modestly departed from our previous navigation model.

Exploring various navigation models

Although this approach built off of people’s existing Flipboard mental model, the bottom tab-based design was hard to navigate and didn’t truly focus the experience on people’s passions.

The final design is the result of over a year’s worth of sketching, prototyping, and testing — a new home space that brings a person’s passions to the front of the experience. No matter the reading mode, people can seamlessly move between their smart magazines, and effortlessly personalize them however they’d like.

Throughout this process, we also developed an entirely new set of visual and interaction standards — typography is more readable, interactions are smoother, and core UI components are more consistent. These new standards more clearly embody the Flipboard brand and aim to improve the overall experience.

A selection from the Flipboard standards guide

Looking Forward

This new Flipboard is just the beginning. We now have a new baseline to play with and build upon — a product that empowers people to engage with their passions and to discover stories that move the world forward.

Expect to hear more from the Flipboard design team in the coming weeks. We are eager to contribute to the shared body of knowledge started by our design colleagues across companies and industries. We believe that our collective stories can elevate the craft for all of us.

The update is available today on iOS and Android. We hope you’ll take the new Flipboard for a spin…or flip.

Best,
Matt Safian and Tyler Monteferrante

from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fmedium.com%2Fflipboard-design%2Fdesigning-the-new-flipboard-9e4eca6705d0%23.xhvqoarq7