Coupons & Promotions UI 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.

Ecommerce UI Kit Promotional Image

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

Download Coupon & Promotions UI Kit on Figma

Contents

  1. What’s included in the kit?
  2. How to use the kit?

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 open for customization.

Components View

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.

Sales Page Screenshot

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.

My Coupons page

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.

Input views

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.

Checkout & cart views


How to use the kit?

To download and customize the kit, follow the steps below:

  1. Go to the Figma Community to find Voucherify or follow this link.
  2. Click Duplicate to open the kit in your Figma account.
  3. Jump between pages and export single components or whole screens to use in your project. Remember that all elements are open for customization.

Duplicate the kit

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us