

No matter what icon we would land on, it was clear from our user research that we would need supporting copy for users to quickly understand what the indicator described. We not only need to consider our international audience, who have different currency symbols, but also take into account that not all publishers require a paid subscription to gain access to a story. A discussion with members from different parts of the company also helped us see that a $ icon is not inclusive.

The lock, on the other hand, was familiar and recognizable to our users. They wondered if the $ icon meant they could pay for a single article or if the article was sponsored content. Through user research, we found the $ caused slight confusion for our users.

The first contenders to indicate the content may be hidden behind a paywall were simple icons such as a lock or dollar sign ($). How did we land on the design and implementation of our paywall indicator? The process included brainstorming, wireframing, and tons of user research. USING DATA TO VALIDATE OUR DESIGN EXPLORATIONS Our goal was to accommodate all use cases, while educating users on the new feature to ultimately create more clarity and address the feedback we’ve seen in our surveys. We created multiple iterations of design treatments for both our iconic flip interface, as well as our optional scroll mode, in both light and dark themes, focusing on legibility and accessibility. We explored a visual cue that would empower our users to identify paywalled content and make an informed choice before navigating to the publisher site. In the belief that transparency about subscriptions will benefit both users and publishers, we set out to develop an approach that balances the needs of people who use Flipboard to consume, curate and share quality content, with the needs of our publisher partners, who may have business models based on a paywall. Conversely, we also know subscriptions are a key monetization strategy for publishers and an increasing number of them use a paywall or subscription model.

The results have consistently been telling us that paywalled content is a point of frustration. Every quarter, we conduct a survey to gauge user satisfaction. Here at Flipboard, we’re constantly listening to our users to improve our web and app experiences. Let me give you a look behind the scenes. We put a lot of thought and care into this seemingly small addition. When you open Flipboard on your phone starting today, you will notice a new design element that lets you know a story may require a subscription: a paywall indicator.
