Coupons & Promotions UX Kit
If you are a designer in charge of building the frontend for promotion campaigns or a developer who wants to see what is possible with Voucherify underneath, our open source Coupon & Promotions UI Kit is for you.
Before you start
You need to have a Figma account to use the UI Kit. You can set up a free account by clicking this link.
Most UI kits for ecommerce focus on the shopping experience, skipping promotions altogether. With this UI Kit, you can leverage best practices from the Voucherify experience. If you are interested in learning more about coupons & promotions UX, please give this guide a read.
Contents
What's included in the kit?
- Editable components library
- Sales page
- My coupons page
- Coupon input fields
- Checkout views
- Cart views
Components
Accelerate time to market with a dynamic library of over 50 components, including promotion timers, error messages, or promotion application views. All are open for customization.
Sales page
Collecting all publicly available cart-level promotions and discount coupons on one page is a great way to make it easier for customers to find them. This way you can display the promotions also to new or not-logged-in customers.
My coupons page
Displaying all cart promotions and coupons a certain customer can access in a dedicated space helps customers understand which promotions are available specifically to them. It also allows you to display personal discount coupons, gift cards, loyalty points balance, or other rewards, as opposed to a sales page that displays only promotions available to the general public.
Input views
Users who have a coupon code want to enter it as soon as possible. You should provide a clear place for coupon codes in the shopping cart, before the first step in the checkout process. This UI approach enables people to check if it is valid before they enter any personal information and also allows the total to be updated appropriately early in the process.
Checkout & cart views
Depending on the discount type and stacking rules, the implementation of promotions can take multiple forms. Also, the cart page is often the last chance to catch users’ attention and help them discover available cart-level and coupon promotions. There they can still easily make changes to the order, so be sure to include any special offers users can qualify for, such as free shipping or discounts.
How to use the kit?
To download and customize the kit, follow the steps below:
- Go to the Figma Community to find Voucherify or follow this link.
- Click Duplicate to open the kit in your Figma account.
- Jump between pages and export single components or whole screens to use in your project. Remember that all elements are open for customization.
