Reddit Ads
Reddit Ads Promoted Trending
Reddit Ads is a platform that connects advertisers and helps build awareness about their business to the Reddit communities. Video has become the most effective way for advertisers to reach their customers, so redesigning the video ads experience was an extremely high priority for Reddit.
My Role:
UX design, Usability testing, Prototyping, QA
Duration:
Jun - Jul, 2019
Tools:
Figma, InVision, ProtoPie
Problems & Goals
Promoted Trending
There are only 2 types advertisements: one is a promoted post, the second is a sidebar ad. The metrics for the ad redesign were: how can we improve engagement, targeting, performance-based bidding and measurement capabilities for advertisers.
Video
Video ads weren’t clickable, so it didn’t effectively share information with customers who were interested in the product.
The aspect ratios of videos wasn’t consistent on different devices, and there were no standards for aspect ratio on different devices based on testing or heuristics.
Balance
How can we keep balance between ensuring advertisers can post high priority ads, but not adversely affect the user experience with overly intrusive ads?
Our Solutions
To improve the video ads experience for both users and advertisers, we came up with these solutions:
Design a new look for trending cards vs. regular cards, to make these ads more visible and engaging for users, while keeping the difference subtle and not glaring.
Enabling a new landing page on mobile that combines a seamless viewing experience with additional branding and product information that directs to the advertiser’s website.
Establish aspect ratios for video ad products on multiple platforms, enabling advertisers to increase engagement and make the ads appropriate for the device.
End-to-end Design Process
1. Design Concept: Mid-Fi wireframe sketch via Figma after deep understanding our users.
Promoted trending ads Concepts - Mobile: the promoted card is 1.25x wider than previous.
Promoted trending ads Concepts - Website: Trending cards are the same size, but the promoted trending card has “PROMOTED” tag on the top.
2. A Focus on Details: exploring aspect ratios and trending card styles on mobile app vs. desktop/tablet
Aspect Ratios - Including all sizes.
Desktop web mockup with “light box” focus effect after post has been clicked by the user.
I created different styles for promoted cards based on the Reddit design system and the standard design style.
Website trending card styles
Mobile App trending card styles
After extensive testing, we realized the 2x width is too wide, and the 1.25x is not obvious enough, therefore, the 1.5x width is best on various platforms.
3. Hand-Off: Final design for product development and launch:
Left side is the final design for the mobile app.
Right side is the final design file for desktop.