Discover available offers
Promotion Discovery
Pre-loan
Enter amount & match offers
Coupon Selection
Review & select an offer
Track status & re-engage
Post-loan
Offer Changes Were Hard to Follow
The offer disappeared during loading and returned in a different form and location.
[01]
overview
Connecting the Lending Promotion Experience
Connected multiple promotion-related initiatives across the lending journey, improving the experience from offer discovery and coupon selection to post-loan engagement.
Timeline
Jun โ Jul 2026
Status
Shipped
Role
Analysis
UX/UI
QA
Team
1 Designer
1 PM
2 Engineers
key impact
38.87%
Checked Unavailable Offers
75%
Offer Recovered
50.39%
Proceeded with the Loan
Status
Loan Submitted
Loan amount ยฅ8,000.00
Expected in CMB Debit Card (8746) within 2 hours
Bank Approved
Funds Sent to Your Account
background
Understanding the Complexity
Fenfu allows users to borrow to their bank accounts, with coupons dynamically matched to the loan amount. As promotion scenarios expanded, new requirements emerged across display, eligibility, selection, and post-loan engagement.
challenge
01
Connecting Fragmented Requirements
Connecting evolving requests across the lending journey.
02
Translating Needs into Solutions
Turning product intent into appropriate patterns, interactions, and rules.
03
Building Context Beyond the Brief
Proactively filling context gaps through flows, rules, and existing experiences.
approach
Mapping the Experience
Discover available offers
Promotion Discovery
Pre-loan
Enter amount & match offers
Coupon Selection
Review & select an offer
Track status & re-engage
Post-loan
Too many offers?
Why did it disappear?
Where are the rules?
Can I tap this while itโs processing?
What about borrowing again?
What if the offer is no longer eligible?
Why did it change after selection?
How do we communicate the offer status?
01 Discovery
Making the Offer Value Stand Out
A clearer hierarchy and benefit-first design to help users quickly recognize the value of the offer.
Understanding the Requirements
Existing Experience
Pain Point 02
Information Overload
Competing numbers distracted from the core offer.
Pain Point 01
Unclear Information Hierarchy
The credit limit was misplaced within the coupon.
Design Goals
Pain Point 01
Unclear Information Hierarchy
1
Rebuild the Information Hierarchy
Pain Point 02
Information Overload
2
Strengthen the Core Offer
Design Decisions
[01]
Prioritize Information by Importance
Organize scattered information into a clear hierarchy, from the most to the least important.
Iteration 01 ยท Interest-Free Coupon
Iteration 01 ยท Single-Loan Rate Coupon
0.03%
0.04%
Expires Oct 1, 2026
93% Off Rate
Borrow Now at a Lower Rate
30 days free
Interest-Free
Expires Oct 1, 2026
Borrow Now Interest-Free
Gathering Feedback
Attention Stayed on the Headline
Research indicated that most users still focused on the headline rather than the offer value.
The Offer Lacked Visual Contrast
The contrast within the coupon was not strong enough to highlight the core benefit.
[02]
Rethink the Coupon Format
Instead of refining the copy within the same format, I reconsidered the format itself and made the benefit the visual focus.
[03]
Use Business Context to Strengthen Perceived Value
Understanding the underlying interest-rate logic revealed a stronger way to communicate the offer. Compared with the daily rate, the annual rate showed a larger reduction, making the value of the discount more apparent to users.
Final Design
02 Pre-loan
Making Offers Clear and Easy to Follow
Clarifying coupon boundaries and guiding users to the right offers before entering an amount.
Understanding the Context
Fenfu Home
More on Fenfu Home
My Offers
Loan Page
merchant discount coupon
loan coupon
Users may mistake coupons shown in My Offers for those eligible for bank-account loans, making eligible offers seem to โdisappearโ and causing confusion and complaints.
Pain Point 01
Misaligned Expectations
Design Goals
Pain Point 01
Misaligned Expectations
1
Clarify Coupon Boundaries
Design Decisions
[01]
Communicate the Rule, Not Irrelevant Details
Unavailable counts added no value and could create negative perceptions. Instead, I clarified the rule with a lightweight notice: only bank-loan coupons are shown.
After clarifying the coupon scope, another issue remained:
all coupons were still displayed before users entered an amount.
Pain Point 02
Information Overload
Design Goals
Pain Point 02
Information Overload
2
Strengthen the Best-Matched Offer
Design Decisions
[02]
Focus on the Best, Keep the Rest Accessible
Too many coupons made it harder to quickly identify the best offer.
Current design
Before
My Approach
After
Focus on the Best Match
Show both offer types while giving the best-matched offer stronger emphasis.
Preserve Context & Access
Keep the scope notice and View All Offers for clarity and full access.
After narrowing the offer display, I mapped the states before and after amount entry and found that the offer changed significantly in both position and presentation.
Pain Point 03
Disconnected Offer Experience
Design Goals
Pain Point 03
Disconnected Offer Experience
3
Keep Offer Changes Clear with a Consistent Visual Anchor
Design Decisions
[03]
Keep the Anchor, Update the Content
Connect the States
Add lightweight matching feedback and support both forward and fallback transitions for a continuous experience.
Maintain a Visual Anchor
Keep the offerโs position, color, and typography consistent while updating the matched content.
Current design
My Approach
Before Input
Coupons Available
Generic Loading
Offer Applied
While Updating
After
After Input
Final Design
9:41
Loan
Loan Amount
ยฅ
Available Loan Amount ยฅ9550.00
Usable on orders over ยฅ1
10 days interest-free
Due on October 1
Interest-Free Coupon
0.03%
0.04%
Single Loan Rate 0.7 Discount Coupon
Usable on orders over ยฅ2000
Due on October 1
Only showing some coupons available for "Loan to Bank Card," view all
Coupons
Interest-Free Coupon
Minimum loan ยฅ100
10 Days Interest-Free
Expires Oct 1ใใ
Interest-Free
Expires Oct 1ใใ
Interest-Free
Minimum loan ยฅ1000
7 days interest-free
Minimum loan ยฅ1000
3 Days Interest-Free
Due on July 11
Interest-Free Coupon
Interest Discount Coupon
0.03%
0.04%
Minimum loan ยฅ2,000
Expires Oct 1
30% Off Interest
0.04%
0.05%
Minimum loan ยฅ1,500
Expires Oct 1
30% Off Interest
03 Coupon Selection
Making Offer Changes Clear and Predictable
Help users understand which offer is applied, when it becomes unavailable, and why.
Understanding the Context
Users lacked clear feedback on which offer was applied, when it became unavailable, and why. This created a gap between the offer users expected and the final borrowing result.
[01]
[02]
[03]
Offer Details (Coupon Unavailable)
Offer Details (Coupon Available)
Offer Selection Page
Loan Amount Entry Page
Offers can disappear without explanation when they become unavailable.
Users cannot tell which specific coupon is currently applied.
Available and unavailable coupons are not clearly distinguished or explained.
Pain Point 01
Unclear Offer Status
Pain Point 03
Unclear Coupon Availability
Pain Point 02
Unclear Applied Offer
Design Goals
Pain Point 02
Unclear Offer Status
1
Clarify Offer Status Changes
Pain Point 02
Unclear Applied Offer
2
Clarify the Applied Offer
Pain Point 03
Unclear Coupon Availability
3
Distinguish Coupon Availability
Design Decisions
[01]
Define the Offer Bar Across Different States
State 1 All Coupons Available
State 2 Some Available, Some Unavailable
State 4 No Coupons
Rate
Details
0.03% daily, 16.5% APR
Interest accrues daily. Repay any amount early from the next day.
ยฅ0 for 10 days, then ยฅ0.24/day
Rate
Details
0.03% daily, 16.5% APR
Interest accrues daily. Repay any amount early from the next day.
ยฅ0 for 10 days, then ยฅ0.24/day
State 3 All Coupons Unavailable
State 4 Selected Coupon Becomes Invalid
[02]
Differentiate Availability and Explain the Reason
Make coupon status easy to distinguish, and provide clear reasons for ineligibility.
Final Design
04 Post-loan
Lightly Surface Remaining Offers to Increase Borrowing
Help users notice unused coupons after a loan and encourage future borrowing.
Understanding the Context
Loan Processing
Loan Completed
After completing a loan, users may still have unused coupons, but the current processing and completion pages provide no reminder, making remaining offers easy to miss.
Analyzing the Requirement
Users likely borrow what they need in one go. How many would actually take another loan because of a promotional banner?
Do we have evidence that a banner can drive additional borrowing after a loan?
PM
+ 5%
Face-to-Face Payments
Merchant Payments
+ 4%
Transfers
+ 4%
The data suggested potential, but unclear test users and reborrowing intervals limited its validity.
Design Goals
1
Lightly Surface Remaining Offers for Potential Reborrowing
Design Decisions
[01]
Start Lightweight, Validate Before Scaling
Use a lightweight banner and track engagement. If users borrow again soon but bypass the banner, increase its prominence.
Loan Completed
Loan Completed
Why Start Lightweight?
Reduce distraction from the loan result.
Validate real reborrowing demand.
Allow for future iteration based on data.
High Emphasis
More exposure, but may distract from the loan result before reborrowing demand is validated.
[02]
Show the Banner
After Status Continuity Is Secured
Once loan progress became accessible from Fenfu Home, users no longer needed to stay. Both Done and the banner could then be enabled without breaking the flow.
Avoid user confusion and incorrect taps while the result is still pending.
After progress can be checked elsewhere, we can enable the banner earlier.
Status Continuity Secured
Users can check loan progress from Fenfu Home.
No need to stay on the page until the result.
Both the banner and Done button can be enabled without breaking the flow.
Loan Processing
Loan Processing
Loan Completed
Loan Completed
Interaction Conflict
The original flow required users to stay for the result, making a tappable banner conflict with the disabled Done button.
Final Design
Key Takeaways
Turn Uncertainty into Something Testable
When evidence is limited, define what needs to be validated and move the discussion toward measurable next steps rather than debating assumptions.
Communication
Recheck the Assumptions When Requirements Change
When requirements shift, realign on what changed, why it changed, and what conditions the solution depends on before revising the design.
Communication
Translate System Rules into User-Relevant Feedback
Instead of exposing complex rules, communicate what users need at that moment: what is applied, what changed, and why something is unavailable.
Design
Design the Experience Across States, Not Screens
Map key states, transitions, and edge cases to keep the experience coherent as conditions change.
Design
shuyii0315@gmail.com
resume