Flipboard Onboarding

Chris Allen
Jun 18, 2015 · Unlisted

A detailed walkthrough of my design process

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?

First things first, I had to take a closer look at the existing category picker UI. Based on usability testing and usage analytics, people enjoyed the tile-based UI and proceeded quickly to the sign-up flow. The main problem was the tile-based UI simply would not scale to thousands of items. Maybe the high-level category tiles could expand to reveal the more specific topics that our new users are really looking for?

Quartz Composer / Origami Prototype: Click here to play video

Initial concepts included a follow button for each topic tag. While this allowed for imagery to be used for each row, there were several problems. First, only 4 or 5 topics could be displayed on screen at a time. This would unfortunately make it difficult for our new users to understand Flipboard has thousands of topics. Second, we certainly wouldn’t have 40,000 representative images for each topic!

While the second issue was certainly a problem, it was helpful to get a prototype working to get a sense of how quickly topics could be selected. Building this prototype also helped me understand the interaction for following a topic and how the user’s selection impacted the prompt (ie. “follow 4 more topics).

Sure, the prototype was helpful, but back to the sketchbook! It was clear the topic tags needed to be selectable in order to gain density on the screen. Once I had a better understanding of the topic tag UI, I could then build out the selection experience.

One issue I was concerned about early on was the amount of information displayed on screen in the brick-style topic UI. Would new users feel overwhelmed by the number of topics available for them to follow? Would it be difficult to read each of these topics as the user navigates through tens, if not hundreds of topics at a time?

Quick sketch to think through the topic tag UI

After a few more sketches, my higher-density topic tag design was starting to come together. The next challenge was to figure out how to best present related topics based on the user’s selection. Including a Show More button would allow for a new set of related topics to appear.

Left: Photoshop mockup exploring the header prompt and Show More button; Right: Another mockup with a more simplified prompt and subdued Show More link

Now that I felt pretty good about the topic-selection UI & UX, I shifted my attention to the overall signup experience, including the topic picker. For a while, I kept asking myself “will everyone want to sign up after they pick their topics, or would they rather get it over with in the beginning?”

HTML/CSS/JS prototype: Click here to play full video

The next step in the design process involved connecting a lot of different parts, including dynamic animations & transitions, as well as individual interactions on each of the topics. Therefore, I decided to build this in HTML/CSS/JS in order to give myself the most flexibility to get each aspect of the prototype exactly the way I envisioned.

Unlike Origami, creating this prototype in code gave me the ability me to experience my prototype on my phone. In addition, I could test my prototype with friends & family. As for the start screen, a fellow designer came up with the funny image, so I couldn’t resist including it!

First iteration of the Android implementation: Click here to play the full video

Now, most all of my prototypes were designed with iOS in mind, but in reality, my final design would be released on both iOS as well as Android. With my iOS prototypes getting closer and closer to final, it was time to change hats and focus on Android. Luckily for me the flow and UI was, for the most part, OS-agnostic, so it was a pretty simple process adapting the UX. That said, I immediately sat down with a few of our Android users to be sure they would enjoy and understand the new user experience. The Android engineer I worked with took my prototype and built a native version in a matter of days. I was amazed with the speed, but even more excited that we could now test the full flow with real users (something much easier to do on Android versus iOS).


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.

In addition, I never really liked how the sign up page broke up the new user flow. First of all, the stark visual design evoked something more boring, like filling out an IRS form. I’d love to make that part of the process as fun as the topic selection — something that might be possible to achieve with a refresh in UI in combination with more unique animations.


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

    Chris Allen

    Written by

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

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade