Referral Programs UX Kit
To help you get started with referral marketing, we've prepared a ready UI kit for referral programs.
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.
With this UI Kit, you can leverage best practices for running effective referral programs that we have collected in our Referral Programs UX Guide.
Contents
What's included in the kit?
- Editable library of components
- Several referral widgets
- Customer cockpit views with milestones
- Referral code input fields
- Referral sharing views
Components
Accelerate time to market with a dynamic library of over 50 fully-customizable components, including customer profile UI elements and referral milestones progress bars.
Referral widgets
If you want to get as many referrals as possible, you should make it easy to join and participate in your program. Require potential referrers only to fill out basic information, like their name and email address. Do not include too many extra questions or options you don’t really need to run your program. This will help you convert interested customers into advocates better.
Referral cockpit view
If you allow for multiple referrals and offer rewards for each referral, it would be very useful for the referrers to see their progress. You can also allow them to send a reminder to their friends who have not redeemed the reward yet. This way, you let them manage their referrals and avoid confusion on the status of their referrals.
Checkout & cart views
If you already have an effective cart flow UX ready, adding referral program components on top should not take long. You can use the same coupon code input box to accept referral codes or split them into two separate boxes. If you need help designing a better promotion experience at the checkout, take a look at our Ecommerce Coupons and Promotions UI Kit.
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.
