Coupon Template
Campaign Coupon Creation Tool
This project was completed during my time at The Mall Group. The work is shown here for portfolio purposes only.
Tools behind the build
The core stack used to shape the product experience, interface, and implementation.
Coupon Template is an internal tool designed to help marketing teams quickly create and validate coupon concepts before moving into final production. Instead of requesting new designs for every campaign idea, users can generate coupon mockups, test different promotional formats, preview branding variations, and export assets directly from a single interface.
Pain Points Before Coupon Template
- Slow idea validation — Marketing teams couldn't quickly visualize campaign concepts without requesting support from designers.
- Multiple revision cycles — Small changes to copy, discount values, or customer segments often required new design requests.
- Inconsistent branding — Different coupon versions could result in inconsistent use of colors, logos, tiers, or card assets.
- Difficult stakeholder discussions — Meetings often relied on verbal descriptions instead of realistic coupon previews.
- Limited mobile visibility — There was no easy way to preview how coupons would appear inside the actual application experience.
What It Does
The tool is centered around a dynamic coupon builder that allows users to configure customer segments, promotion types, branding elements, and coupon content in real time.
Users can select M Power tiers or BBLM cardholder groups, and the system automatically applies the appropriate visual identity, including colors, logos, and footer assets. Promotion values such as discount amounts, M Point redemptions, e-coupons, or percentage discounts are generated dynamically without requiring manual design updates.
A built-in preview system displays the coupon at production size, allowing users to upload backgrounds, adjust image positioning, and verify content before export. The generated coupon can then be downloaded as a high-resolution PNG in multiple scales.
To support campaign reviews, the tool also includes a mobile simulator where coupons can be previewed within different application screens and device mockups, helping teams validate the final appearance before implementation.
Interaction Walkthrough
The motion demo works best as a quick overview — giving a sense of the full experience before diving into the details.
Product Screens
A detailed look at the key workspace modules, showing the template settings, layout configuration, and the dynamic coupon live preview.
Details Worth Mentioning
- Supports 8 coupon types with dynamic value generation.
- Automatically applies branding based on M Power tier selection.
- Includes automatic BBLM footer generation based on card type.
- Built-in image crop and zoom controls for background customization.
- Supports PNG export from 1040px up to 4160px resolution.
- Mobile preview supports multiple device models and application screens.
- Asset library section prepared for logo, footer, and mockup management.
- Designed to accelerate campaign planning while maintaining branding consistency across all coupon variations.
