[Case Study 06]
SmartNews Coupon 2.0
News Aggregation
SmartNews： Coupon 2.0 — Monetization-Aware Coupon Discovery Redesign
Balancing ad monetization with coupon experience through UX exploration and user validation
Scale: MAU: 8.1M, DAU: 1.2M (Coupon Channel)
Goals: Monetization + Coupon Discovery
Key Metrics: Coupon Channel Impressions, Open Coupon UU, Revenue
Outcome: Released version did not win A/B test; qualitative research signals aligned with quantitative results
My Impact
Led UX exploration on ad insertion and coupon information hierarchy, validated multiple design directions with users, and provided evidence-based recommendations under strong product constraints.
[Industry]
News
Coupon
[My Role]
Lead Designer
[Platforms]
iOS, Android
[Timeline]
2024-2025
[01. Context & Constraints]
Coupon Channel 1.0
A daily-use discount feature serving 50,000+ physical stores nationwide.
1.2M daily active users within the coupon channel
Simple tap-to-use flow
No direct monetization prior to this project
Historically, the coupon channel operated as a user retention and satisfaction driver, providing value to both users and merchants without revenue exchange.
Coupon 2.0 introduced monetization for the first time on this high-traffic surface.
There are two goals but also introduced tension:
Monetization
Inserting ads into an already dense coupon list
Discovery
Reducing cognitive load and improving clarity
My design focus was:
How might we insert ads without interfering with the coupon experience, while simultaneously improving coupon information structure, hierarchy, and visual clarity?
[Design Process]
click on each section to fast forward!
[02. Problem Definition]
[Problem 1]
Coupon information lacked systemized structure and visual consistency
Before Coupon 2.0, coupon creation was highly manual:
There was no structured system for managing coupon metadata.
Key information such as:
discount amount
brand name
product name
was manually composed in Photoshop by graphic designers.
This process led to several issues:
Operational inefficiency:
Manual production was time-consuming and difficult to scale or update.Lack of metadata hierarchy:
Important information was visually flattened, making coupons harder to scan and compare.Inconsistent visual presentation:
Background colors were often dictated by product imagery
Text color varied between black and white depending on the image
While individual coupons could look visually appealing, the channel lacked overall cohesion
[Problem 2]
Ad insertion in a visually dense coupon environment is inherently high-risk
Breaking visual rhythm: The coupon page relies on consistent scanning patterns, while ads vary significantly in aspect ratio, motion, and visual weight.
Reducing user trust: Inserting many ads among coupons risks confusing users or making the experience feel deceptive.
Increasing cognitive load: Users must constantly re-interpret visual patterns, slowing down decision-making and reducing efficiency.
SmartNews’ business model relies heavily on ads revenue, resulting in a wide variety of ad formats across the platform
[03. Hypothesis]
In a high-intent utility surface like the coupon channel,
ads can be integrated effectively when the coupon experience remains clear, trustworthy, and easy to scan.
[04. Exploration]
Part 1. Redesigning the Coupon Cell
1) Establish a clear and consistent information hierarchy
This allowed users to:
Scan coupons faster
Compare discounts more easily
Build familiarity with the structure over time
2) Collaborate with engineering to enable dynamic layouts
From static images to a system-driven coupon cell
This redesign shifted coupon creation from a manual, image-based workflow to a scalable, system-driven UI that engineering and operations could easily maintain.
Label
Description text here
Label
Description text here
Label
Action buttons
Label
Description text here
Label
Description text here
Meta data layer
Establish a structured metadata hierarchy (brand, product name, discount)
Make discount value visually dominant and easier to compare
color coded discount tags for different discount types
Label
Description text here
2. Action buttons
Enable fast secondary actions (save, share) without disrupting the main layout
Support future feature expansion with minimal layout changes
micro interaction animation I created in After effects for save coupon
Label
Description text here
Product Image
Support image reuse across coupon cell and detail page
Significantly reduce graphic designer workload and production time by using raw product images provided by brands
Examples of raw images from brands
Label
Description text here
Dynamic background color
Replace image-based backgrounds with admin-controlled color tokens
Allow seasonal or campaign-based theming without redesign
Example of how same product works with different background color tokens
Label
Description text here
3) Explore on visual design
The goal was not to find “the best-looking coupon,” but to understand how different visual decisions affect scanability, trust, and scalability.
I explored multiple directions across:
Layout density (compact vs. spacious)
Image prominence (product-led vs. text-led)
Discount emphasis (numeric vs. badge-based)
Color usage and background treatment
Part 2. Strategies for Inserting Ads into the Coupon Channel
Native ads perform better when they visually and behaviorally match surrounding content.
Research in native advertising and perceptual psychology suggests that ads that align with surrounding content structure reduce cognitive friction and improve engagement. Modern feed-based platforms such as Instagram and TikTok adopt similar strategies, ensuring sponsored content blends structurally while remaining clearly labeled.
Direction 1: Content-Led Harmonization
Redesign both coupon and ad cells, prioritizing coupon user experience as the foundation.
[Pros]
✅
Ad content naturally blends with coupon content, making the feed appear richer and more engaging, potentially improving ad CTR
✅
Best balance between monetization and user experience
✅
Since ads feel like a part of the content, we could naturally increase ad load
[Cons]
🔴
Higher engineering and coordination cost
🔴
Requires alignment across product, ads, and design systems
Direction 2: Ad-Led Convergence
Align coupon design to existing ad formats to minimize ad-side changes.
In this direction, coupons are redesigned to visually align with existing ad components.
The goal is to minimize engineering effort on the ad side by allowing ads to be inserted seamlessly without modification.
[Pros]
✅
Simple evolution from current coupon format
✅
Leverages all existing ad formats
[Cons]
🔴
Limits coupon UX improvement
🔴
Coupon experience becomes constrained by ad design limitations
🔴
Existing ad units still intrusive/not seamless with content
[05. Validating Coupon Experience Before Ad Integration]
Given strong business pressure toward the Ad-Led Convergence direction, I first sought to validate which coupon experience users genuinely preferred — independent of advertising.
To isolate coupon UX quality, I conducted user testing across three variations:
A
Current app (baseline)
B
Ad-Led Convergence
C
Content-Led Harmonization
[User Testing]
Objective
Understand user’s overall thoughts on the new coupon feed, if they have any dissatisfaction with the current coupon feed or the new coupon feed
Methods
Prototype-based concept testing + Qualitative interviews
Participants
3 existing coupon users +
3 new users
Insights
Prototype A&C achieved the strongest overall visual impact.
However, users consistently prioritized brand visibility and discount clarity when navigating the coupon channel.
Discoverability was driven more by informational hierarchy than by visual richness.
Over-reducing image size weakened brand recognition.
Visual storytelling remains important for attracting users at entry points, but within the coupon feed, clarity outweighs aesthetics.
[06. Final Decision & A/B Test Outcome]
Following internal discussions, the Ad-Led Convergence direction (Prototype B) was selected for A/B test. The decision prioritized:
Lower implementation cost
Faster revenue enablement
Compatibility with existing ad inventory
A/B Test Results
Coupon impressions: +4.84%
User engagement: Neutral
No significant lift in deeper interaction metrics
The increase in impressions was largely attributable to reduced coupon cell height, allowing more coupons per screen.
However, other performance metrics remained flat.
The final decision favored scalability and revenue capability over experiential differentiation.
After Release
Although coupon impressions increased, ads were not rolled out.
Follow-up A/B testing revealed a substantial decline in user engagement when ads were introduced into the coupon feed.
[07. Reflection]
While Prototype B achieved short-term monetization efficiency, the experiment reinforced several earlier research findings:
Reducing visual prominence did not improve perceived value.
Brand and discount clarity remained primary drivers of discoverability.
Visual compression increases exposure but not necessarily engagement.
Notably, qualitative signals from earlier user testing aligned closely with post-launch quantitative outcomes.
This strengthened my conviction that early UX validation can serve as a leading indicator of performance — especially when balancing short-term revenue gains with long-term user experience.
Although the Content-Led Harmonization direction was not implemented, the research established:
A validated information hierarchy framework
A scalable coupon component system
A foundation for future iteration
