Flipboard Curation

9 min readJun 19, 2015

I recently attended Figma’s Config Conference and was inspired by a fellow Flipboarder, Craig Mod, who presented his printed archive of his designs and the entire team’s amazing work. It showcased all the design iterations & GitHub commits for the company’s first mobile release. I remember shortly after I joined Flipboard in 2013, I looked through that same book for inspiration on the design challenges I was about to embark on. Here is one of my first and favorite challenges in my career…

I began working on this project my very first day at Flipboard. Not only because my boss, Marcos Weskamp, asked me to, but because it was a part of the product I really wanted to tackle.

For a bit of context, Flipboard is an app that provides a beautiful reading experience for stories personalized to your interests. One of the main features is the ability to collect, or “flip,” articles into personal magazines. People flip stories into private magazines to read later (I have a private magazine called “Saved”), or curate stories publicly for a group of people sharing the same interest (for example, my public magazine called “Capture” containing my favorite landscape photos).

Curation was a key piece to growing daily user engagement and retention for Flipboard. The trick was designing a solution that worked for both new users as well as our best users. From the get-go, I had my list of requirements:

The new “Flip UI” needs to…

Be quick, requiring only one tap to collect stories.
Be able to search for a specific magazine.
Promote the creation of user captions.
Include cross-posting to Facebook & Twitter.
Be easy to navigate large set of magazines.
Display the story being collected.
Simplify the magazine creation process.

Now that I had established the basics, it was time to talk to a few Flipboard users (friends, colleagues, and of course, family) to get a sense for prioritizing these requirements. Since I use Flipboard to curate many magazines, my personal experience isn’t representative of the majority of our users. Therefore, it is always good idea for designers to talk to the people who don’t use their product as much as they do. In addition to talking to people one-to-one about how they curate on Flipboard, I took the time to go through our user test recordings. Online user tests are great in that they can produce valuable feedback from people in different parts of the world and with varied levels of tech savviness.

The “Flip UI” as it was before my redesign

In my research, I found that some of my assumptions about which requirements were critical turned out to be correct, while others weren’t as important as I thought they would be. Requirement #1 was clearly the most crucial. The old UI required users to tap on a magazine to select it, and then tap the “Add” button to finish the action. The next most important requirement was #6. The old UI used a modal window that covered most all of the screen, obscuring the actual story being collected. I was surprised to learn that most users never touched #3 and #4. Several people didn’t even notice you could add a caption or cross-post to a social network. I figured the caption and cross-posting features were missed mostly because the “Add” button was above the magazine tray, so users’ eyes never reached below the bottom row of magazines. Requirements #2 and #5 were only important to those who had many magazines (like the user depicted in the example above), so I knew I should think about these features as if I were a power/core user. Finally, #7 didn’t seem that important since most people didn’t create new magazines very often and therefore didn’t mind the existing process.

One of my favorite parts of the design process is the brainstorming step. I absolutely love finding a nice quiet place to sit down and sketch out idea after idea. I use the Moleskine Squared Notebook, in “Flipboard red” of course, for all of my sketches and daily notes. As you can see, having the grid comes in handy when designing for mobile screens:

Initial concepts for the bottom sheet UI

My first idea was to switch the magazine carousel from horizontally scrolling to vertically scrolling. This way, more magazines could be displayed on the screen at a time, not to mention the fact they could be much larger in size. I was also thinking since the bottom sheet would fill the width of the screen, it would be important to easily dismiss the UI by swiping the sheet down, or tapping on the article that peaks behind it. In the concept on the left, I explored having the caption field at the top near the item preview, while in the concept on the right, I moved the caption field to the bottom as its own fixed unit. Both of these concepts led me to believe I was on to something with the bottom sheet UI, but I wasn’t satisfied with the item preview and the way the caption field was treated.

After reviewing these sketches with the design team, I learned a few issues that would need to be addressed:

The caption should be separate from the article title (ie. the title should not be automatically inputted as the default caption).
Not all articles have images, therefore the snippet should not be dependent on having one.

With these considerations in mind, I moved on to higher-fidelity mockups in Photoshop:

In order to get a better sense for the interaction behind the bottom sheet, I brought my Photoshop designs into Quartz Composer/Origami:

Spending time understanding how the bottom sheet would work was very useful, but the design itself was missing a critical requirement — the caption field. I knew it was important to keep the “flip” action to one tap, but I decided to explore a different way to bring attention to the caption field by revealing it once a magazine is selected.

At this point, I was feeling better about the bottom sheet UI, but unsatisfied with the article snippet. Most of my designs displayed the story with an image, title, and source. I figured this was the best way to represent the article being shared, but it wasn’t until I shared a photo from the iOS Photos app when I realized the best way to tackle the problem. What better way to show the article than the article itself…

In most all of my prototypes, I was already pushing the story onto a lower level than the bottom sheet, so why not just use the story as the article snippet? It’s ideal because it represents the article in the best way possible. All layout and article types are supported using this method; full-bleed images, standard article layouts, galleries, videos, gifs, even articles without any images!

This opened the doors to refine the bottom sheet UI further. You can see the caption field is no longer cluttered with the article snippet. I also removed the “Add” button in order to address one of the most important requirements: single-tap performance. Finally, the search function was simple to access and didn’t draw too much attention.

Android

A few adjustments needed to be made for Android. First of all, the caption field fixed to the bottom of the screen caused a few miss-taps given how close it was to the system navbar (back, home, app switcher). In order to solve this problem, we moved the caption field to the top. In addition, we decided to use the new Material Design palette API to colorize the background with the story’s dominant color. We also decided to only display the social network cross-posting icons in the caption field when it was focused.

Reflection

I loved working on this project and feel proud of what we shipped. Two moments during the process particularly stand out to me:

Figuring out the vertically scrolling bottom-sheet approach would work just as great for users with only a few magazines as it would for those who have many magazines.
Realizing the story itself could be used as a thumbnail rather than repeating the information in a snippet.

This feature would not have been possible without the help of my fellow designers, product managers, and especially, engineers at Flipboard!

Results

While I can’t get into the specifics, I can say the improved UI increased our overall daily user retention numbers beyond our expectations. Along those lines, the number of users curating personal magazines also increased. Due to the positive feedback, we’ve adapted the bottom-sheet UI for our “More Options” menu as well, accessible by long-tapping a story. One of my favorite results of this project: we released the bottom-sheet UI for Android as an open source project on GitHub.

Improvements

The results have proven the new UI works very well for users with a couple magazines all the way up to dozens of magazines, but falls short for those who don’t have any magazines. I’m currently exploring better ways to onboard users to curate and create their own magazines. We launched the new UI with two “default” magazines — one private magazine called “Saved” and one public magazine called “My Flips,” but they have not performed very well for our new curators. I believe there are better ways to introduce the feature and showcase it’s value.