Home
Designing Smarter Offers: From Merchant Setup to User Checkout
Over the years, offers and coupons have transformed from simple discount codes to powerful incentives. As e-commerce has taken off, merchants have leaned heavily on these promotions - not just to attract new shoppers, but also to reinforce brand loyalty, increase average order values, attract fresh customers, and strategically move inventory - all while providing a more engaging, rewarding experience that underpins long-term business success.
Project Context
At BoxPay, we needed a scalable way for merchants to configure promotional offers ( for MVP we focused on instant discounts, low and no cost EMI offers). The goal was to create an intuitive, robust “Create Offer” workflow that handles complexity but remains easy to use. I designed an end-to-end Offer Creation module that is flexible & simple enough for merchants.
Note: When working in the B2B2C model, you've gotta be thinking simultaneously for two types of users - your client (merchants) and their clients (consumers). In short, I was designing a system that our users will use to design for their end users.
Data mapping was done to ensure that every offer configured by the merchant was accurately reflected and clearly visible to the end user.
I worked on several use cases, but I’ll be sharing just a few highlights here. If you’d like to explore the full scope, drop me a note at sainialisha1218@gmail.com
Final Design for Offer Management (B2B)
Seamless Setup: Create Instant Discount Offers in Minutes
Create No-Cost & Low-Cost EMI Offers
Edit Offer Flow: Refine with ease
Quick Competitor Analysis for better understanding
Before jumping into design, I explored how other platforms like Stripe, Razorpay, & PayU handle offer creation. Reviewing their developer documentation and related coupon case studies on Medium helped me uncover key pain points from both merchant and user perspectives. These insights shaped a more informed design direction, even within limited time.
Create Offers Flow
Workflow Efficiency Matrix
Discount Types
Post Creation Metrics
Offer Creation Workflow Comparison
Other Flows & Use Cases
Now, let’s move to the B2C experience: designing for the end user
Final Screens for Offer (B2C)
Offer Discovery & Application
Offer Application
initial Sketching & Brainstorming
Insights From Competition (b2C)
- Most players had their coupon tray accessible on the Cart page. This was to maximise the coupon visibility early in the purchase funnel aiding in persuasion to continue the checkout flow.
- Most players had a separate listing page for all available coupons aiding in discovery.
- Listing page mostly have sorting logic to present the best available coupons towards the top while unavailable coupons at the bottom.
- If some coupons are unavailable, then we inform the user what action he/ she may perform in order to become eligible for the coupon.
- Good to have clear offer callouts with exact savings to help users take informed decision upfront on which can give the best value.
- We can also indicate difference in coupon types with the help of easily recognisable icons in addition to coupon codes- these become mostly useful to differentiate between pay-modes & platform level coupons.
- Finally having a manual entry box for coupons is mandatory for users having some coupon already in mind or might have won from some other platform
Design Decisions & Impact
As there were tech constraints, the idea of “auto-application of best coupon automatically” was discarded.
09:41
Offers
View All
Enter coupon code
Apply
Order Summary
3 items
Payment Summary
$51.00
Delivery Address
Alisha Saini |
+9140342871
Home
320 | Orchid Island | Sector 51 | Gurgaon
Haryana | India | 122010
Recommended
HDFC Credit Card
****9855
ay418700@oksbi
Anil Yadav
UPI
Saved UPI IDs
Gpay
Phonpe
Paytm
Others
Add New UPI ID
Cards
Saved Cards
HDFC Credit Card
****9855
Add New Card
Secured by
BoxPay
Showing details for
+9140342871
Logout
All Payment Options
Wallets
Netbanking
EMI
Pay Later
Offers
Enter Coupon Code
Apply
AXIS500
Apply
Flat 500 off on Axis Bank cards on orders above 1200
T&C
HDFC10
Apply
10% off on HDFC Bank cards on orders above 1200
T&C
SBI10
Apply
10% off on SBI Bank cards on orders above 1200
T&C
UPI10
Apply
10% off on UPI payments on orders above 1200
T&C
Brand Color Customization:
Enabled full brand color customization so merchants could reflect their identity at checkout; secondary backgrounds used 10% opacity of the primary color to maintain hierarchy and cohesion.
Primary Color (P.C)
Secondary color = 10% of P.C
Removed Bank Logos:
Bank logos were excluded from the “offer title heading” after identifying recurring backend fetch failures (logos often failed to load or rendered inconsistently).
(Instead of showing broken or missing assets that could damage credibility, the interface leaned on brand-driven color systems as a reliable, scalable visual anchor)
Conclusion
Designing the Offer Management System taught me how powerful it can be to simplify complexity. Working within a B2B2C setup meant thinking for two users at once - merchants configuring offers, and customers discovering them. Each design decision, from data mapping to color hierarchy, aimed to make configuration effortless and checkout transparent.
Starting with an MVP helped us focus on solving the core problem first, then scale intelligently based on user feedback and behavior. What began as a merchant dashboard feature gradually shaped into a scalable system that connects business goals with user delight. For me, this project reinforced that great design is about clarity, adaptability, and the courage to evolve — one version at a time.
Home
Designing Smarter Offers: From Merchant Setup to User Checkout
Over the years, offers and coupons have transformed from simple discount codes to powerful incentives. As e-commerce has taken off, merchants have leaned heavily on these promotions - not just to attract new shoppers, but also to reinforce brand loyalty, increase average order values, attract fresh customers, and strategically move inventory - all while providing a more engaging, rewarding experience that underpins long-term business success.
Project Context
At BoxPay, we needed a scalable way for merchants to configure promotional offers ( for MVP we focused on instant discounts, low and no cost EMI offers). The goal was to create an intuitive, robust “Create Offer” workflow that handles complexity but remains easy to use. I designed an end-to-end Offer Creation module that is flexible & simple enough for merchants.
Note: When working in the B2B2C model, you've gotta be thinking simultaneously for two types of users - your client (merchants) and their clients (consumers). In short, I was designing a system that our users will use to design for their end users.
Data mapping was done to ensure that every offer configured by the merchant was accurately reflected and clearly visible to the end user.
I worked on several use cases, but I’ll be sharing just a few highlights here. If you’d like to explore the full scope, drop me a note at sainialisha1218@gmail.com
Final Design for Offer Management (B2B)
Seamless Setup: Create Instant Discount Offers in Minutes
Create No-Cost & Low-Cost EMI Offers
Edit Offer Flow: Refine with ease
Quick Competitor Analysis for better understanding
Before jumping into design, I explored how other platforms like Stripe, Razorpay, & PayU handle offer creation. Reviewing their developer documentation and related coupon case studies on Medium helped me uncover key pain points from both merchant and user perspectives. These insights shaped a more informed design direction, even within limited time.
Create Offers Flow
Criteria
Flow Structure
Offer Types
Targeting & Eligibility
Usage Controls
Checkout Experience
Lifecycle & Guardrails
Strengths
Gaps
Razorpay
Stepper wizard: Decryption → Discount Type → Applicable On → Validity → Overview
Instant, Cashback, Already Discounted
Min order, payment method, issuer, card network, IIN/BIN, per-card usage
Global usage cap, per-card limit, start/end validity, failure behavior
Offers can show on checkout; customers can select best offer; not supplied on international currency
Non-editable after creation → disable only; review screen for confirmation
Deep payment-method targeting, BIN/IIN rules, India market fit
Limited international support; weaker on customer-segmentation
Stripe
Two-object model: Coupons (benefit) + Promotion Codes (distribution); attach via Checkout/Payment Links
Coupons (flat/percent; once/forever/repeating) + Promotion Codes
Min order, first-time customer, max redemptions, per-customer limits, expiry
Max redemptions, expiry, per-customer limits
Promo codes applied in Checkout UI; supports min order validation; reflected in Payment Links
Safe iteration via coupon + promo code separation; strong expiry/limits
Elegant separation of benefit vs. distribution; first-time user flag; strong API
Weak on issuer/network targeting
PayU
5-step flow: Basic details → Payment modes → Offer rules → Subvention → Review
Instant Discount, Cashback, No-Cost EMI, SKU/Product-based
Min order, payment modes, No-Cost EMI, SKU rules, subvention
Max redemptions, validity windows, EMI-specific rules
Offers apply on hosted/merchant checkout; EMI & issuer-specific flows
Review step + dashboards;subvention attribution ensures upfront clarity
Wide offer coverage (EMI, SKU, Cashback, Subvention); strong local alignment
Globalization/documentation less consistent
Metric
Time to Create
Configuration Depth
Learning Curve
Flexibility
Error Prevention
Razorpay
Moderate
Moderate
Stripe
Fast
Easy
PayU
Slow
Steep
Workflow Efficiency Matrix
Feature
Percentage Discount
Fixed Amount
Instant Discount
Cashback
Pre-discounted
No-Cost EMI
Low-Cost EMI
Razorpay
(requires agreement)
Stripe
PayU
(requires agreement)
Action
Edit Offer
Disable/Pause
Archive Codes
View Analytics
Duplicates
Razorpay
(must recreate)
Disable toggle
Transaction details
Stripe
Name Only
Delete Coupon
Archive promo codes
Dashboard reporting
PayU
Edit sections
Not specified
Offers dashboard
Discount Types
Aspect
Entry Point
Activation
Steps
Complexity
Edit Capability
Razorpay
Dashboard → Offers → Create New Offer
Requires account activation
4-step wizard
Moderate
Cannot edit (must disable & recreate)
Stripe
Products → Coupons → +New
Default enabled
2-step (Coupon Promo Code)
Simple to Moderate
Name only (after creation)
PayU
Offers & Promotions → Create an Offer
Requires Pro Plan or Enterprise
5-step wizard
High
Not Specified
Post Creation Metrics
Offer Creation Workflow Comparison
Other Flows & Use Cases
Now, let’s move to the B2C experience - designing for the end user
Final Screens for Offer (B2C)
Offer Discovery & Application
Offer Application
initial Sketching & Brainstorming
Insights From Competition (b2C)
- Most players had their coupon tray accessible on the Cart page. This was to maximise the coupon visibility early in the purchase funnel aiding in persuasion to continue the checkout flow.
- Most players had a separate listing page for all available coupons aiding in discovery.
- Listing page mostly have sorting logic to present the best available coupons towards the top while unavailable coupons at the bottom.
- If some coupons are unavailable, then we inform the user what action he/ she may perform in order to become eligible for the coupon.
- Good to have clear offer callouts with exact savings to help users take informed decision upfront on which can give the best value.
- We can also indicate difference in coupon types with the help of easily recognisable icons in addition to coupon codes- these become mostly useful to differentiate between pay-modes & platform level coupons.
- Finally having a manual entry box for coupons is mandatory for users having some coupon already in mind or might have won from some other platform
Design Decisions & Impact
09:41
Offers
View All
Enter coupon code
Apply
Order Summary
3 items
Payment Summary
$51.00
Delivery Address
Alisha Saini |
+9140342871
Home
320 | Orchid Island | Sector 51 | Gurgaon
Haryana | India | 122010
Recommended
HDFC Credit Card
****9855
ay418700@oksbi
Anil Yadav
UPI
Saved UPI IDs
Gpay
Phonpe
Paytm
Others
Add New UPI ID
Cards
Saved Cards
HDFC Credit Card
****9855
Add New Card
Secured by
BoxPay
Showing details for
+9140342871
Logout
All Payment Options
Wallets
Netbanking
EMI
Pay Later
Offers
Enter Coupon Code
Apply
AXIS500
Apply
Flat 500 off on Axis Bank cards on orders above 1200
T&C
HDFC10
Apply
10% off on HDFC Bank cards on orders above 1200
T&C
SBI10
Apply
10% off on SBI Bank cards on orders above 1200
T&C
UPI10
Apply
10% off on UPI payments on orders above 1200
T&C
Brand Color Customization:
Enabled full brand color customization so merchants could reflect their identity at checkout; secondary backgrounds used 10% opacity of primary color to maintain hierarchy.
Primary Color (P.C)
Secondary color = 10% of P.C
Removed Bank Logos:
Bank logos were excluded from the “offer title heading” after identifying recurring backend fetch failures (logos often failed to load or rendered inconsistently).
(Instead of showing broken or missing assets that could damage credibility, the interface leaned on brand-driven color systems as a reliable, scalable visual anchor)
As there were tech constraints, the idea of “auto-application of best coupon automatically” was discarded.
Conclusion
Designing the Offer Management System taught me how powerful it can be to simplify complexity. Working within a B2B2C setup meant thinking for two users at once - merchants configuring offers, and customers discovering them. Each design decision, from data mapping to color hierarchy, aimed to make configuration effortless and checkout transparent.
Starting with an MVP helped us focus on solving the core problem first, then scale intelligently based on user feedback and behavior. What began as a merchant dashboard feature gradually shaped into a scalable system that connects business goals with user delight. For me, this project reinforced that great design is about clarity, adaptability, and the courage to evolve — one version at a time.
Home
Designing Smarter Offers: From Merchant Setup to User Checkout
Over the years, offers and coupons have transformed from simple discount codes to powerful incentives. As e-commerce has taken off, merchants have leaned heavily on these promotions - not just to attract new shoppers, but also to reinforce brand loyalty, increase average order values, attract fresh customers, and strategically move inventory - all while providing a more engaging, rewarding experience that underpins long-term business success.
Project Context
At BoxPay, we needed a scalable way for merchants to configure promotional offers ( for MVP we focused on instant discounts, low and no cost EMI offers). The goal was to create an intuitive, robust “Create Offer” workflow that handles complexity but remains easy to use. I designed an end-to-end Offer Creation module that is flexible & simple enough for merchants.
Note: When working in the B2B2C model, you've gotta be thinking simultaneously for two types of users - your client (merchants) and their clients (consumers). In short, I was designing a system that our users will use to design for their end users.
Data mapping was done to ensure that every offer configured by the merchant was accurately reflected and clearly visible to the end user.
I worked on several use cases, but I’ll be sharing just a few highlights here. If you’d like to explore the full scope, drop me a note at sainialisha1218@gmail.com
Final Design for Offer Management (B2B)
Seamless Setup: Create Instant Discount Offers in Minutes
Create No-Cost & Low-Cost EMI Offers
Edit Offer Flow: Refine with ease
Quick Competitor Analysis for better understanding
Before jumping into design, I explored how other platforms like Stripe, Razorpay, & PayU handle offer creation. Reviewing their developer documentation and related coupon case studies on Medium helped me uncover key pain points from both merchant and user perspectives. These insights shaped a more informed design direction, even within limited time.
Create Offers Flow
Criteria
Flow Structure
Offer Types
Targeting & Eligibility
Usage Controls
Checkout Experience
Lifecycle & Guardrails
Strengths
Gaps
Razorpay
Stepper wizard: Decryption → Discount Type → Applicable On → Validity → Overview
Instant, Cashback, Already Discounted
Min order, payment method, issuer, card network, IIN/BIN, per-card usage
Global usage cap, per-card limit, start/end validity, failure behavior
Offers can show on checkout; customers can select best offer; not supplied on international currency
Non-editable after creation → disable only; review screen for confirmation
Deep payment-method targeting, BIN/IIN rules, India market fit
Limited international support; weaker on customer-segmentation
Stripe
Two-object model: Coupons (benefit) + Promotion Codes (distribution); attach via Checkout/Payment Links
Coupons (flat/percent; once/forever/repeating) + Promotion Codes
Min order, first-time customer, max redemptions, per-customer limits, expiry
Max redemptions, expiry, per-customer limits
Promo codes applied in Checkout UI; supports min order validation; reflected in Payment Links
Safe iteration via coupon + promo code separation; strong expiry/limits
Elegant separation of benefit vs. distribution; first-time user flag; strong API
Weak on issuer/network targeting
PayU
5-step flow: Basic details → Payment modes → Offer rules → Subvention → Review
Instant Discount, Cashback, No-Cost EMI, SKU/Product-based
Min order, payment modes, No-Cost EMI, SKU rules, subvention
Max redemptions, validity windows, EMI-specific rules
Offers apply on hosted/merchant checkout; EMI & issuer-specific flows
Review step + dashboards;subvention attribution ensures upfront clarity
Wide offer coverage (EMI, SKU, Cashback, Subvention); strong local alignment
Globalization/documentation less consistent
Workflow Efficiency Matrix
Metric
Time to Create
Configuration Depth
Learning Curve
Flexibility
Error Prevention
Razorpay
Moderate
Moderate
Stripe
Fast
Easy
PayU
Slow
Steep
Discount Types
Feature
Percentage Discount
Fixed Amount
Instant Discount
Cashback
Pre-discounted
No-Cost EMI
Low-Cost EMI
Razorpay
(requires agreement)
Stripe
PayU
(requires agreement)
Post Creation Metrics
Action
Edit Offer
Disable/Pause
Archive Codes
View Analytics
Duplicates
Razorpay
(must recreate)
Disable toggle
Transaction details
Stripe
Name Only
Delete Coupon
Archive promo codes
Dashboard reporting
PayU
Edit sections
Not specified
Offers dashboard
Offer Creation Workflow Comparison
Aspect
Entry Point
Activation
Steps
Complexity
Edit Capability
Razorpay
Dashboard → Offers → Create New Offer
Requires account activation
4-step wizard
Moderate
Cannot edit (must disable & recreate)
Stripe
Products → Coupons → +New
Default enabled
2-step (Coupon Promo Code)
Simple to Moderate
Name only (after creation)
PayU
Offers & Promotions → Create an Offer
Requires Pro Plan or Enterprise
5-step wizard
High
Not Specified
Other Flows & Use Cases
Now, let’s move to the B2C experience - designing for the end user
Final Screens for Offer (B2C)
Offer Discovery & Application
Offer Application
initial Sketching & Brainstorming
Insights From Competition (b2C)
- Most players had their coupon tray accessible on the Cart page. This was to maximise the coupon visibility early in the purchase funnel aiding in persuasion to continue the checkout flow.
- Most players had a separate listing page for all available coupons aiding in discovery.
- Listing page mostly have sorting logic to present the best available coupons towards the top while unavailable coupons at the bottom.
- If some coupons are unavailable, then we inform the user what action he/ she may perform in order to become eligible for the coupon.
- Good to have clear offer callouts with exact savings to help users take informed decision upfront on which can give the best value.
- We can also indicate difference in coupon types with the help of easily recognisable icons in addition to coupon codes- these become mostly useful to differentiate between pay-modes & platform level coupons.
- Finally having a manual entry box for coupons is mandatory for users having some coupon already in mind or might have won from some other platform
Design Decisions & Impact
09:41
Offers
View All
Enter coupon code
Apply
Order Summary
3 items
Payment Summary
$51.00
Delivery Address
Alisha Saini |
+9140342871
Home
320 | Orchid Island | Sector 51 | Gurgaon
Haryana | India | 122010
Recommended
HDFC Credit Card
****9855
ay418700@oksbi
Anil Yadav
UPI
Saved UPI IDs
Gpay
Phonpe
Paytm
Others
Add New UPI ID
Cards
Saved Cards
HDFC Credit Card
****9855
Add New Card
Secured by
BoxPay
Showing details for
+9140342871
Logout
All Payment Options
Wallets
Netbanking
EMI
Pay Later
Offers
Enter Coupon Code
Apply
AXIS500
Apply
Flat 500 off on Axis Bank cards on orders above 1200
T&C
HDFC10
Apply
10% off on HDFC Bank cards on orders above 1200
T&C
SBI10
Apply
10% off on SBI Bank cards on orders above 1200
T&C
UPI10
Apply
10% off on UPI payments on orders above 1200
T&C
Brand Color Customization:
Enabled full brand color customization so merchants could reflect their identity at checkout; secondary backgrounds used 10% opacity of the primary color to maintain hierarchy and cohesion.
Primary Color (P.C)
Secondary color = 10% of P.C
Removed Bank Logos:
Bank logos were excluded from the “offer title heading” after identifying recurring backend fetch failures (logos often failed to load or rendered inconsistently).
(Instead of showing broken or missing assets that could damage credibility, the interface leaned on brand-driven color systems as a reliable, scalable visual anchor)
As there were tech constraints, the idea of “auto-application of best coupon automatically” was discarded.
Conclusion
Designing the Offer Management System taught me how powerful it can be to simplify complexity. Working within a B2B2C setup meant thinking for two users at once - merchants configuring offers, and customers discovering them. Each design decision, from data mapping to color hierarchy, aimed to make configuration effortless and checkout transparent.
Starting with an MVP helped us focus on solving the core problem first, then scale intelligently based on user feedback and behavior. What began as a merchant dashboard feature gradually shaped into a scalable system that connects business goals with user delight. For me, this project reinforced that great design is about clarity, adaptability, and the courage to evolve — one version at a time.
Home
Designing Smarter Offers: From Merchant Setup to User Checkout
Over the years, offers and coupons have transformed from simple discount codes to powerful incentives. As e-commerce has taken off, merchants have leaned heavily on these promotions - not just to attract new shoppers, but also to reinforce brand loyalty, increase average order values, attract fresh customers, and strategically move inventory - all while providing a more engaging, rewarding experience that underpins long-term business success.
Project Context
At BoxPay, we needed a scalable way for merchants to configure promotional offers ( for MVP we focused on instant discounts, low and no cost EMI offers). The goal was to create an intuitive, robust “Create Offer” workflow that handles complexity but remains easy to use. I designed an end-to-end Offer Creation module that is flexible & simple enough for merchants.
Note: When working in the B2B2C model, you've gotta be thinking simultaneously for two types of users - your client (merchants) and their clients (consumers). In short, I was designing a system that our users will use to design for their end users.
Data mapping was done to ensure that every offer configured by the merchant was accurately reflected and clearly visible to the end user.
I worked on several use cases, but I’ll be sharing just a few highlights here. If you’d like to explore the full scope, drop me a note at sainialisha1218@gmail.com
Final Design for Offer Management (B2B)
Seamless Setup: Create Instant Discount Offers in Minutes
Create No-Cost & Low-Cost EMI Offers
Edit Offer Flow: Refine with ease
Quick Competitor Analysis for better understanding
Before jumping into design, I explored how other platforms like Stripe, Razorpay, & PayU handle offer creation. Reviewing their developer documentation and related coupon case studies on Medium helped me uncover key pain points from both merchant and user perspectives. These insights shaped a more informed design direction, even within limited time.
Create Offers Flow
Criteria
Flow Structure
Offer Types
Targeting & Eligibility
Usage Controls
Checkout Experience
Lifecycle & Guardrails
Strengths
Gaps
Razorpay
Stepper wizard: Decryption → Discount Type → Applicable On → Validity → Overview
Instant, Cashback, Already Discounted
Min order, payment method, issuer, card network, IIN/BIN, per-card usage
Global usage cap, per-card limit, start/end validity, failure behavior
Offers can show on checkout; customers can select best offer; not supplied on international currency
Non-editable after creation → disable only; review screen for confirmation
Deep payment-method targeting, BIN/IIN rules, India market fit
Limited international support; weaker on customer-segmentation
Stripe
Two-object model: Coupons (benefit) + Promotion Codes (distribution); attach via Checkout/Payment Links
Coupons (flat/percent; once/forever/repeating) + Promotion Codes
Min order, first-time customer, max redemptions, per-customer limits, expiry
Max redemptions, expiry, per-customer limits
Promo codes applied in Checkout UI; supports min order validation; reflected in Payment Links
Safe iteration via coupon + promo code separation; strong expiry/limits
Elegant separation of benefit vs. distribution; first-time user flag; strong API
Weak on issuer/network targeting
PayU
5-step flow: Basic details → Payment modes → Offer rules → Subvention → Review
Instant Discount, Cashback, No-Cost EMI, SKU/Product-based
Min order, payment modes, No-Cost EMI, SKU rules, subvention
Max redemptions, validity windows, EMI-specific rules
Offers apply on hosted/merchant checkout; EMI & issuer-specific flows
Review step + dashboards; subvention attribution ensures upfront clarity
Wide offer coverage (EMI, SKU, Cashback, Subvention); strong local alignment
Globalization/documentation less consistent
Workflow Efficiency Matrix
Metric
Time to Create
Configuration Depth
Learning Curve
Flexibility
Error Prevention
Razorpay
Moderate
Moderate
Stripe
Fast
Easy
PayU
Slow
Steep
Discount Types
Feature
Percentage Discount
Fixed Amount
Instant Discount
Cashback
Pre-discounted
No-Cost EMI
Low-Cost EMI
Razorpay
(requires agreement)
Stripe
PayU
(requires agreement)
Post Creation Metrics
Action
Edit Offer
Disable/Pause
Archive Codes
View Analytics
Duplicates
Razorpay
(must recreate)
Disable toggle
Transaction details
Stripe
Name Only
Delete Coupon
Archive promo codes
Dashboard reporting
PayU
Edit sections
Not specified
Offers dashboard
Offer Creation Workflow Comparison
Aspect
Entry Point
Activation
Steps
Complexity
Edit Capability
Razorpay
Dashboard → Offers → Create New Offer
Requires account activation
4-step wizard
Moderate
Cannot edit (must disable & recreate)
Stripe
Products → Coupons → +New
Default enabled
2-step (Coupon Promo Code)
Simple to Moderate
Name only (after creation)
PayU
Offers & Promotions → Create an Offer
Requires Pro Plan or Enterprise
5-step wizard
High
Not Specified
Other Flows & Use Cases
Now, let’s move to the B2C experience - designing for the end user
Final Screens for Offer (B2C)
Offer Discovery & Application
Offer Application
initial Sketching & Brainstorming
Insights From Competition (b2C)
- Most players had their coupon tray accessible on the Cart page. This was to maximise the coupon visibility early in the purchase funnel aiding in persuasion to continue the checkout flow.
- Most players had a separate listing page for all available coupons aiding in discovery.
- Listing page mostly have sorting logic to present the best available coupons towards the top while unavailable coupons at the bottom.
- If some coupons are unavailable, then we inform the user what action he/ she may perform in order to become eligible for the coupon.
- Good to have clear offer callouts with exact savings to help users take informed decision upfront on which can give the best value.
- We can also indicate difference in coupon types with the help of easily recognisable icons in addition to coupon codes- these become mostly useful to differentiate between pay-modes & platform level coupons.
- Finally having a manual entry box for coupons is mandatory for users having some coupon already in mind or might have won from some other platform
Design Decisions & Impact
09:41
Offers
View All
Enter coupon code
Apply
Order Summary
3 items
Payment Summary
$51.00
Delivery Address
Alisha Saini |
+9140342871
Home
320 | Orchid Island | Sector 51 | Gurgaon
Haryana | India | 122010
Recommended
HDFC Credit Card
****9855
ay418700@oksbi
Anil Yadav
UPI
Saved UPI IDs
Gpay
Phonpe
Paytm
Others
Add New UPI ID
Cards
Saved Cards
HDFC Credit Card
****9855
Add New Card
Secured by
BoxPay
Showing details for
+9140342871
Logout
All Payment Options
Wallets
Netbanking
EMI
Pay Later
Offers
Enter Coupon Code
Apply
AXIS500
Apply
Flat 500 off on Axis Bank cards on orders above 1200
T&C
HDFC10
Apply
10% off on HDFC Bank cards on orders above 1200
T&C
SBI10
Apply
10% off on SBI Bank cards on orders above 1200
T&C
UPI10
Apply
10% off on UPI payments on orders above 1200
T&C
Brand Color Customization:
Enabled full brand color customization so merchants could reflect their identity at checkout; secondary backgrounds used 10% opacity of the primary color to maintain hierarchy and cohesion.
Primary Color (P.C)
Secondary color = 10% of P.C
Removed Bank Logos:
Bank logos were excluded from the “offer title heading” after identifying recurring backend fetch failures (logos often failed to load or rendered inconsistently).
(Instead of showing broken or missing assets that could damage credibility, the interface leaned on brand-driven color systems as a reliable, scalable visual anchor)
As there were tech constraints, the idea of “auto-application of best coupon automatically” was discarded.
Conclusion
Designing the Offer Management System taught me how powerful it can be to simplify complexity. Working within a B2B2C setup meant thinking for two users at once - merchants configuring offers, and customers discovering them. Each design decision, from data mapping to color hierarchy, aimed to make configuration effortless and checkout transparent.
Starting with an MVP helped us focus on solving the core problem first, then scale intelligently based on user feedback and behavior. What began as a merchant dashboard feature gradually shaped into a scalable system that connects business goals with user delight. For me, this project reinforced that great design is about clarity, adaptability, and the courage to evolve — one version at a time.
Home
Designing Smarter Offers: From Merchant Setup to User Checkout
Over the years, offers and coupons have transformed from simple discount codes to powerful incentives. As e-commerce has taken off, merchants have leaned heavily on these promotions - not just to attract new shoppers, but also to reinforce brand loyalty, increase average order values, attract fresh customers, and strategically move inventory - all while providing a more engaging, rewarding experience that underpins long-term business success.
Project Context
At BoxPay, we needed a scalable way for merchants to configure promotional offers ( for MVP we focused on instant discounts, low and no cost EMI offers). The goal was to create an intuitive, robust “Create Offer” workflow that handles complexity but remains easy to use. I designed an end-to-end Offer Creation module that is flexible & simple enough for merchants.
Note: When working in the B2B2C model, you've gotta be thinking simultaneously for two types of users - your client (merchants) and their clients (consumers). In short, I was designing a system that our users will use to design for their end users.
Data mapping was done to ensure that every offer configured by the merchant was accurately reflected and clearly visible to the end user.
I worked on several use cases, but I’ll be sharing just a few highlights here. If you’d like to explore the full scope, drop me a note at sainialisha1218@gmail.com
Final Design for Offer Management (B2B)
Seamless Setup: Create Instant Discount Offers in Minutes
Create No-Cost & Low-Cost EMI Offers
Edit Offer Flow: Refine with ease
Quick Competitor Analysis for better understanding
Before jumping into design, I explored how other platforms like Stripe, Razorpay, & PayU handle offer creation. Reviewing their developer documentation and related coupon case studies on Medium helped me uncover key pain points from both merchant and user perspectives. These insights shaped a more informed design direction, even within limited time.
Create Offers Flow
Criteria
Flow Structure
Offer Types
Targeting & Eligibility
Usage Controls
Checkout Experience
Lifecycle & Guardrails
Strengths
Gaps
Razorpay
Stepper wizard: Decryption → Discount Type → Applicable On → Validity → Overview
Instant, Cashback, Already Discounted
Min order, payment method, issuer, card network, IIN/BIN, per-card usage
Global usage cap, per-card limit, start/end validity, failure behavior
Offers can show on checkout; customers can select best offer; not supplied on international currency
Non-editable after creation → disable only; review screen for confirmation
Deep payment-method targeting, BIN/IIN rules, India market fit
Limited international support; weaker on customer-segmentation
Stripe
Two-object model: Coupons (benefit) + Promotion Codes (distribution); attach via Checkout/Payment Links
Coupons (flat/percent; once/forever/repeating) + Promotion Codes
Min order, first-time customer, max redemptions, per-customer limits, expiry
Max redemptions, expiry, per-customer limits
Promo codes applied in Checkout UI; supports min order validation; reflected in Payment Links
Safe iteration via coupon + promo code separation; strong expiry/limits
Elegant separation of benefit vs. distribution; first-time user flag; strong API
Weak on issuer/network targeting
PayU
5-step flow: Basic details → Payment modes → Offer rules → Subvention → Review
Instant Discount, Cashback, No-Cost EMI, SKU/Product-based
Min order, payment modes, No-Cost EMI, SKU rules, subvention
Max redemptions, validity windows, EMI-specific rules
Offers apply on hosted/merchant checkout; EMI & issuer-specific flows
Review step + dashboards; subvention attribution ensures upfront clarity
Wide offer coverage (EMI, SKU, Cashback, Subvention); strong local alignment
Globalization/documentation less consistent
Workflow Efficiency Matrix
Metric
Time to Create
Configuration Depth
Learning Curve
Flexibility
Error Prevention
Razorpay
Moderate
Moderate
Stripe
Fast
Easy
PayU
Slow
Steep
Discount Types
Feature
Percentage Discount
Fixed Amount
Instant Discount
Cashback
Pre-discounted
No-Cost EMI
Low-Cost EMI
Razorpay
(requires agreement)
Stripe
PayU
(requires agreement)
Post Creation Metrics
Action
Edit Offer
Disable/Pause
Archive Codes
View Analytics
Duplicates
Razorpay
(must recreate)
Disable toggle
Transaction details
Stripe
Name Only
Delete Coupon
Archive promo codes
Dashboard reporting
PayU
Edit sections
Not specified
Offers dashboard
Offer Creation Workflow Comparison
Aspect
Entry Point
Activation
Steps
Complexity
Edit Capability
Razorpay
Dashboard → Offers → Create New Offer
Requires account activation
4-step wizard
Moderate
Cannot edit (must disable & recreate)
Stripe
Products → Coupons → +New
Default enabled
2-step (Coupon Promo Code)
Simple to Moderate
Name only (after creation)
PayU
Offers & Promotions → Create an Offer
Requires Pro Plan or Enterprise
5-step wizard
High
Not Specified
Other Flows & Use Cases
Now, let’s move to the B2C experience - designing for the end user
Final Screens for Offer (B2C)
Offer Discovery & Application
Offer Application
initial Sketching & Brainstorming
Insights From Competition (b2C)
- Most players had their coupon tray accessible on the Cart page. This was to maximise the coupon visibility early in the purchase funnel aiding in persuasion to continue the checkout flow.
- Most players had a separate listing page for all available coupons aiding in discovery.
- Listing page mostly have sorting logic to present the best available coupons towards the top while unavailable coupons at the bottom.
- If some coupons are unavailable, then we inform the user what action he/ she may perform in order to become eligible for the coupon.
- Good to have clear offer callouts with exact savings to help users take informed decision upfront on which can give the best value.
- We can also indicate difference in coupon types with the help of easily recognisable icons in addition to coupon codes- these become mostly useful to differentiate between pay-modes & platform level coupons.
- Finally having a manual entry box for coupons is mandatory for users having some coupon already in mind or might have won from some other platform
Design Decisions & Impact
09:41
Offers
View All
Enter coupon code
Apply
Order Summary
3 items
Payment Summary
$51.00
Delivery Address
Alisha Saini |
+9140342871
Home
320 | Orchid Island | Sector 51 | Gurgaon
Haryana | India | 122010
Recommended
HDFC Credit Card
****9855
ay418700@oksbi
Anil Yadav
UPI
Saved UPI IDs
Gpay
Phonpe
Paytm
Others
Add New UPI ID
Cards
Saved Cards
HDFC Credit Card
****9855
Add New Card
Secured by
BoxPay
Showing details for
+9140342871
Logout
All Payment Options
Wallets
Netbanking
EMI
Pay Later
Offers
Enter Coupon Code
Apply
AXIS500
Apply
Flat 500 off on Axis Bank cards on orders above 1200
T&C
HDFC10
Apply
10% off on HDFC Bank cards on orders above 1200
T&C
SBI10
Apply
10% off on SBI Bank cards on orders above 1200
T&C
UPI10
Apply
10% off on UPI payments on orders above 1200
T&C
Brand Color Customization:
Enabled full brand color customization so merchants could reflect their identity at checkout; secondary backgrounds used 10% opacity of the primary color to maintain hierarchy and cohesion.
Primary Color (P.C)
Secondary color = 10% of P.C
Removed Bank Logos:
Bank logos were excluded from the “offer title heading” after identifying recurring backend fetch failures (logos often failed to load or rendered inconsistently).
(Instead of showing broken or missing assets that could damage credibility, the interface leaned on brand-driven color systems as a reliable, scalable visual anchor)
As there were tech constraints, the idea of “auto-application of best coupon automatically” was discarded.
Conclusion
Designing the Offer Management System taught me how powerful it can be to simplify complexity. Working within a B2B2C setup meant thinking for two users at once - merchants configuring offers, and customers discovering them. Each design decision, from data mapping to color hierarchy, aimed to make configuration effortless and checkout transparent.
Starting with an MVP helped us focus on solving the core problem first, then scale intelligently based on user feedback and behavior. What began as a merchant dashboard feature gradually shaped into a scalable system that connects business goals with user delight. For me, this project reinforced that great design is about clarity, adaptability, and the courage to evolve — one version at a time.
Home
Designing Smarter Offers: From Merchant Setup to User Checkout
Over the years, offers and coupons have transformed from simple discount codes to powerful incentives. As e-commerce has taken off, merchants have leaned heavily on these promotions - not just to attract new shoppers, but also to reinforce brand loyalty, increase average order values, attract fresh customers, and strategically move inventory - all while providing a more engaging, rewarding experience that underpins long-term business success.
Project Context
At BoxPay, we needed a scalable way for merchants to configure promotional offers ( for MVP we focused on instant discounts, low and no cost EMI offers). The goal was to create an intuitive, robust “Create Offer” workflow that handles complexity but remains easy to use. I designed an end-to-end Offer Creation module that is flexible & simple enough for merchants.
Note: When working in the B2B2C model, you've gotta be thinking simultaneously for two types of users - your client (merchants) and their clients (consumers). In short, I was designing a system that our users will use to design for their end users.
Data mapping was done to ensure that every offer configured by the merchant was accurately reflected and clearly visible to the end user.
I worked on several use cases, but I’ll be sharing just a few highlights here. If you’d like to explore the full scope, drop me a note at sainialisha1218@gmail.com
Final Design for Offer Management (B2B)
Seamless Setup: Create Instant Discount Offers in Minutes
Create No-Cost & Low-Cost EMI Offers
Edit Offer Flow: Refine with ease
Quick Competitor Analysis for better understanding
Before jumping into design, I explored how other platforms like Stripe, Razorpay, & PayU handle offer creation. Reviewing their developer documentation and related coupon case studies on Medium helped me uncover key pain points from both merchant and user perspectives. These insights shaped a more informed design direction, even within limited time.
Create Offers Flow
Criteria
Flow Structure
Offer Types
Targeting & Eligibility
Usage Controls
Checkout Experience
Lifecycle & Guardrails
Strengths
Gaps
Razorpay
Stepper wizard: Decryption → Discount Type → Applicable On → Validity → Overview
Instant, Cashback, Already Discounted
Min order, payment method, issuer, card network, IIN/BIN, per-card usage
Global usage cap, per-card limit, start/end validity, failure behavior
Offers can show on checkout; customers can select best offer; not supplied on international currency
Non-editable after creation → disable only; review screen for confirmation
Deep payment-method targeting, BIN/IIN rules, India market fit
Limited international support; weaker on customer-segmentation
Stripe
Two-object model: Coupons (benefit) + Promotion Codes (distribution); attach via Checkout/Payment Links
Coupons (flat/percent; once/forever/repeating) + Promotion Codes
Min order, first-time customer, max redemptions, per-customer limits, expiry
Max redemptions, expiry, per-customer limits
Promo codes applied in Checkout UI; supports min order validation; reflected in Payment Links
Safe iteration via coupon + promo code separation; strong expiry/limits
Elegant separation of benefit vs. distribution; first-time user flag; strong API
Weak on issuer/network targeting
PayU
5-step flow: Basic details → Payment modes → Offer rules → Subvention → Review
Instant Discount, Cashback, No-Cost EMI, SKU/Product-based
Min order, payment modes, No-Cost EMI, SKU rules, subvention
Max redemptions, validity windows, EMI-specific rules
Offers apply on hosted/merchant checkout; EMI & issuer-specific flows
Review step + dashboards; subvention attribution ensures upfront clarity
Wide offer coverage (EMI, SKU, Cashback, Subvention); strong local alignment
Globalization/documentation less consistent
Workflow Efficiency Matrix
Metric
Time to Create
Configuration Depth
Learning Curve
Flexibility
Error Prevention
Razorpay
Moderate
Moderate
Stripe
Fast
Easy
PayU
Slow
Steep
Discount Types
Feature
Percentage Discount
Fixed Amount
Instant Discount
Cashback
Pre-discounted
No-Cost EMI
Low-Cost EMI
Razorpay
(requires agreement)
Stripe
PayU
(requires agreement)
Post Creation Metrics
Action
Edit Offer
Disable/Pause
Archive Codes
View Analytics
Duplicates
Razorpay
(must recreate)
Disable toggle
Transaction details
Stripe
Name Only
Delete Coupon
Archive promo codes
Dashboard reporting
PayU
Edit sections
Not specified
Offers dashboard
Offer Creation Workflow Comparison
Aspect
Entry Point
Activation
Steps
Complexity
Edit Capability
Razorpay
Dashboard → Offers → Create New Offer
Requires account activation
4-step wizard
Moderate
Cannot edit (must disable & recreate)
Stripe
Products → Coupons → +New
Default enabled
2-step (Coupon Promo Code)
Simple to Moderate
Name only (after creation)
PayU
Offers & Promotions → Create an Offer
Requires Pro Plan or Enterprise
5-step wizard
High
Not Specified
Other Flows & Use Cases
Now, let’s move to the B2C experience - designing for the end user
Final Screens for Offer (B2C)
Offer Discovery & Application
Offer Application
initial Sketching & Brainstorming
Insights From Competition (b2C)
- Most players had their coupon tray accessible on the Cart page. This was to maximise the coupon visibility early in the purchase funnel aiding in persuasion to continue the checkout flow.
- Most players had a separate listing page for all available coupons aiding in discovery.
- Listing page mostly have sorting logic to present the best available coupons towards the top while unavailable coupons at the bottom.
- If some coupons are unavailable, then we inform the user what action he/ she may perform in order to become eligible for the coupon.
- Good to have clear offer callouts with exact savings to help users take informed decision upfront on which can give the best value.
- We can also indicate difference in coupon types with the help of easily recognisable icons in addition to coupon codes- these become mostly useful to differentiate between pay-modes & platform level coupons.
- Finally having a manual entry box for coupons is mandatory for users having some coupon already in mind or might have won from some other platform
Design Decisions & Impact
09:41
Offers
View All
Enter coupon code
Apply
Order Summary
3 items
Payment Summary
$51.00
Delivery Address
Alisha Saini |
+9140342871
Home
320 | Orchid Island | Sector 51 | Gurgaon
Haryana | India | 122010
Recommended
HDFC Credit Card
****9855
ay418700@oksbi
Anil Yadav
UPI
Saved UPI IDs
Gpay
Phonpe
Paytm
Others
Add New UPI ID
Cards
Saved Cards
HDFC Credit Card
****9855
Add New Card
Secured by
BoxPay
Showing details for
+9140342871
Logout
All Payment Options
Wallets
Netbanking
EMI
Pay Later
Offers
Enter Coupon Code
Apply
AXIS500
Apply
Flat 500 off on Axis Bank cards on orders above 1200
T&C
HDFC10
Apply
10% off on HDFC Bank cards on orders above 1200
T&C
SBI10
Apply
10% off on SBI Bank cards on orders above 1200
T&C
UPI10
Apply
10% off on UPI payments on orders above 1200
T&C
Brand Color Customization:
Enabled full brand color customization so merchants could reflect their identity at checkout; secondary backgrounds used 10% opacity of the primary color to maintain hierarchy and cohesion.
Primary Color (P.C)
Secondary color = 10% of P.C
Removed Bank Logos:
Bank logos were excluded from the “offer title heading” after identifying recurring backend fetch failures (logos often failed to load or rendered inconsistently).
(Instead of showing broken or missing assets that could damage credibility, the interface leaned on brand-driven color systems as a reliable, scalable visual anchor)
As there were tech constraints, the idea of “auto-application of best coupon automatically” was discarded.
Conclusion
Designing the Offer Management System taught me how powerful it can be to simplify complexity. Working within a B2B2C setup meant thinking for two users at once - merchants configuring offers, and customers discovering them. Each design decision, from data mapping to color hierarchy, aimed to make configuration effortless and checkout transparent.
Starting with an MVP helped us focus on solving the core problem first, then scale intelligently based on user feedback and behavior. What began as a merchant dashboard feature gradually shaped into a scalable system that connects business goals with user delight. For me, this project reinforced that great design is about clarity, adaptability, and the courage to evolve — one version at a time.