Reddit: Designing the In-Feed Entry Points for Reddit News
2018 • USER RESEARCH • UX • UI • PRODUCT DESIGN • NATIVE IOS
About Reddit News & the Problems to Solve
Please refer back to the Reddit News Entry Points Overview for more context.
Results & Solutions
Designed in-feed entry points from the user’s home screen, largely with the help of quantitative research (UsabilityHub), design critiques and Principle animations.
The resulting discovery unit designs are scalable can be used for other use cases across the overarching Reddit product.
Role & Timeline
Owned the entirety of the project as the main Product Designer, while working with multiple PMs and a User Researcher
The in-feed solutions were designed in 2 weeks.
In-Feed News Entry Points
While working under the “Knowledge” (think Search and Discovery) branch of Reddit, I became very familiar with our use of discovery units to help users uncover new content and communities while browsing through their feed. Also, prior to this project, I had designed a few of my own for Reddit Events on mobile. Therefore, the Ideation phase of my design process had already been kicked into full gear (in my mind, mostly), once the problems to solve and primary needs were defined. In addition, I was able to take some inspiration from another designer on my team who was working on a similar project.
Reddit Product Audit
First and foremost, by conducting a brief audit of the Reddit app, it showed the clear differences between the Reddit News design versus the rest of the product. Furthermore — note the discovery units that are placed in the news feed! As I said previously, our team’s data have shown that these in-feed discovery units drive users to discover and follow new content and communities, respectively.
Ideation Mocks (for Testing)
After making a ton of explorations, as well as iterations during the Ideation stage, I arrived at five in-feed designs to test with users (using UsabilityHub) to decide which ones were worth the engineering efforts.
VALIDATION THROUGH QUANTITATIVE RESEARCH
UsabilityHub Testing and Heatmap Results
The User Researcher on my team and I ran 5 separate tests (170-180 participants per test) with each of the mocks above, but without visually distinguishing the in-feed units. We asked a simple and single question, “If you’re looking for today’s top news, where would you click?” — with the main goal being that each user would select a major CTA driving them into the News experience, rather than a News post.
Focusing on the primary goal and ignoring the fluff of the random clicks — we found that enough users were able to locate the primary CTA. However, the 4th mock (which was animated, as you will see below) was the most successful. In any case, the 2nd mock was also considered as one of the final solutions as the horizontal discovery unit designs have already been built for other products. In terms of the 5th mock, while it may appear as the most successful but simply looking at the heat maps…it actually took users, on average, double the time to locate the CTA.
HI-FIDELITY MOCKS + PROTOTYPING WITH pRINCiPLE
Final In-Feed Solutions
Based on the research and further critiques, I continued to iterate and arrived at these two final solutions.
I. IMAGE-FOCUSED HEADLINES DISCOVERY UNIT
This discovery unit fits particularly well into the “News” use-case, considering the fact that most news content from reputable news sources have high quality images. However, it’s definitely not only limited to “News” and can be used for future products across Reddit. The interaction may be automated, but it still allows users to navigate back to a headline if they’re interested in reading more into that particular post.
II. HORIZONTAL CAROUSEL NEWS DISCOVERY UNIT
This second solution only differs in carousel scrolling interaction, and is less media-focused but allows users to dive further into sub-topic news experiences through the sub-topic flairs in each of the carousel news units. Furthermore, it’s far simpler to build and can similarly be used across the rest of Reddit for future products.