Flipboard Onboarding
--
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!”
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?
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?
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.
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?”
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!
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
Thanks for learning a bit about my design process!
