Flipboard Onboarding

The Problem

The existing 18-category picker will not scale to accommodate the new 40,000 topics to be introduced with the Flipboard 3.0 release.

The Goal

Create a fun and easy way to find & follow the niche interests readers love.

My job was to figure out how to get new Flipboard readers to find & follow the niche topics they love. The solution was vital to the Flipboard 3.0 release given the expansion from 18 high-level categories like TECHNOLOGY and FOOD to over 40,000 topics like VIRTUAL REALITY and COFFEE BEANS.

In order to create the best possible on-boarding experience, it was critical that the “ah-ha” moment occurred as early in the process as possible. In other words, we needed to get the point across that Flipboard is the best place to find and follow each and every one of your interests. Not only that, it needed to be fun! We knew that if the personalization step took a long time or felt laborious for any reason, people would drop off pretty quickly. So, I was completely focused on creating an experience that ended with our new users thinking to themselves “well, that was easy — now I can use Flipboard to see interesting stories about all the topics I love!”

How can we get people to view related topics as easily & quickly as possible?
Quartz Composer / Origami Prototype: Click here to play video
Quick sketch to think through the topic tag UI
Left: Photoshop mockup exploring the header prompt and Show More button; Right: Another mockup with a more simplified prompt and subdued Show More link
HTML/CSS/JS prototype: Click here to play full video
First iteration of the Android implementation: Click here to play the full video

Reflection

One of my favorite aspects of the final design was the way related topics lazy-load as you scroll down to see more. We decided on a 50% mix of topics related to those already selected with new & serendipitous topics. This way, we could present the most popular topics above the fold and have the user narrow down their interests naturally. It was fun to see people choose a broad topic like PHOTOGRAPHY and then continue to follow more niche topics like MACRO PHOTOGRAPHY and MICRO FOUR THIRDS.

Results

After several weeks of data, it was obvious the topic picker new user experience was a success. Not only did people pick almost seven times more topics than we expected, they arrived at their home feeds with lots of great content based on their personal interests. The signup conversion rate also exceeded expectations. Most importantly, our new users quickly understood that they could use Flipboard to follow all the niche topics they love!

Improvements

One area that I’m currently looking into is bucketing certain topics into larger categories. After seeing how people use the topic picker, it was clear that a lot of real estate and visual bandwidth was given to topics which were of no interest. If a user doesn’t care about FASHION, why should we present any topics related to it? There may be a better way to tune the topic selection with a negative signal rather than solely relying on positive signals.

Appendix

Different approaches for the Android start screen (middle one was a looping video)
Mockups of a concept that showcases Flipboard readers and their favorite topics
Working through the account creation UX and form validation
Exploring the search function and the topic selection UX
Concept for the topic picker for tablets (content on the right updates as topics are selected on the left)

Thanks for learning a bit about my design process!

Unlisted

--

--

--

Head of Design, SAP New Ventures & Technologies. Previously at Flipboard, Peapod, and Motorola. More at ckcallen.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chris Allen

Chris Allen

Head of Design, SAP New Ventures & Technologies. Previously at Flipboard, Peapod, and Motorola. More at ckcallen.com