Loyalty Programs UX and UI Best Practices 

Introduction to loyalty programs and UX

Many companies launch loyalty programs. No wonder, as according to McKinsey research, about 20% of the company’s profits can come from loyalty programs alone. However, to have a successful loyalty program, you need to carefully plan your loyalty program strategy. Starting from the loyalty program software architecture, through loyalty program rules, rewards, adding in some gamification or innovation all through the UX/UI design – all these elements can make or break your rewards program. 

We have written this guide to help you with planning your loyalty program UX & UI design or improving your existing one. We will go through various best practices and examples from real-life companies who have successfully implemented loyalty programs into their day-to-day business. 

Note: All desktop screenshots were made on Mac, Chrome and all mobile screenshots were made using the iPhone X resolution on Chrome.

If you have any questions or would like to know more about Voucherify, our Promotion Engine, please feel free to contact us. We offer a fully-white label solution for loyalty programs to allow you for 100% customization.

{{EBOOK}}

{{ENDEBOOK}}

Learn more: Explore Voucherify's Open Source Loyalty Accelerator

Summary 

• Give your loyalty program a creative name and design your own loyalty currency.
• Promote your loyalty program through landing pages and other widgets.
• Inform customers about all ways to earn rewards and list all available rewards.
• Inform customers on how to cash out their rewards.
• Explain the different program levels (tiers) and the difference between them.
• Be clear about the expiry date of the rewards and keep your rules simple and understandable.
• Loyalty program sign-up form design.
• Personalize communications with loyalty program welcome emails and progress notifications.
• Inform loyalty program members about their rewards and points status.
• Use visuals to convey reward progress.
• Use a dedicated customer cockpit (digital wallet).
• Include the rewards and point status information in newsletters.
• Gamify the experience with bonus campaigns and challenges.
• Do not forget about mobile-friendliness.
• Master the cross-channel experience.
• Display the earned rewards/points post-purchase.
• Display loyalty points and rewards history.
• Design an opt-out process.

Loyalty Programs UX Kit

Achieve faster time to market with ready loyalty components from our Loyalty Programs UI Kit available on Figma. Learn more.

[Webinar] eCommerce Hacks for Loyalty UX

Your promotions and loyalty programs stopped moving the needle? Have you checked their UX lately? Join experts from Divante and Voucherify who discuss the ins-and-outs of designing effective promotions and loyalty programs. From common UX fails to the best practices to avoid them. But, that's not all – explore how to test promo UX to ensure that your promotions are driving engagement and increasing loyalty. Watch now.

The best practices for the best loyalty program UX

1. Give your loyalty program a creative name 

Do not call your scheme simply "XYZ loyalty program." Try to come up with something more memorable and interesting! Even better, if you align your loyalty program’s values with your brand objectives for increased effectiveness.

Example:

‍E.L.F, a cosmetics company, has a loyalty program called The Beauty Squad.

2. Design own loyalty currency 

If your customer loyalty program offers points, you can name them differently. Try to find something that will be in line with your brand, your products, or your rewards program name. For example, if you sell wine, you can name your points "corks."

Here are some real-life examples of creative loyalty points names:

• The Starbucks rewards program calls their points "stars."
• Frequent flyer programs often call them "miles."

3. Promote your loyalty program 

You will not grow your loyalty program participation if you do not advertise your loyalty program enough and via the right channels. Start off with your platforms and include links or banners directing users to your loyalty program in the most important touchpoints. Here are some inspirations:

Homepage 

Homepage is the most visited page of your website. Your loyalty program, as a core part of your offering, should be mentioned there. There are various ways to include it on the homepage, like:

Menu, Footer or Ribbon 

You can add your loyalty program link to the main website menu, on the top website ribbon or in the footer. Then, it will be visible throughout all the pages of your website. Mind that the footer is the least visible place out of the three but all three help you to make the loyalty program reachable from any subpage. 

Example:

‍UGG has the loyalty program linked on the top website ribbon and in the website footer.

Pop-ups 

Pop-ups are a great way to draw attention to your loyalty program, although they may be considered intrusive. It is a good strategy to advertise your loyalty program post-launch or, if you have content personalization on the website, to display it only to new visitors. It would be too pushy to display a loyalty program pop-up various times to the same person or every time they visit your website. 

Example:

‍The Pulse Boutique used a pop-up to promote their loyalty program, Pulse Perks.

Banners 

Homepage banners are a very visible placement to advertise your loyalty program. They are not, however, visible throughout all sub-pages, therefore they should be used in pair with some of the permanent placements like menu, ribbon or footer for the highest site-wide visibility. 

Example:

‍Pomelo Fashion promoted their loyalty program, Pomelo Perks, on the homepage banner.

{{CUSTOMER}}

{{ENDCUSTOMER}}

Emails 

You can invite your current customers or newsletter subscribers to join your rewards program. You can do it automatically by, for example, sending the information about the program to all new customers or subscribers after X days from subscribing to the newsletter. 

Example:

‍Kiehl’s sends an email to currency customers promoting the rewards program. The message highlights their main program perk (10 pounds off every 120 pounds spent), CTA to join the program, a list of all the ways to earn points with information on how many points you can get for each action and all available rewards in the program. 

Other online channels 

You can use other online owned channels like your social media, community, blog, Slack, help center or any other communication channels you use to advertise your loyalty program and improve the customer experience with your program. 

Offline

If your loyalty program is working offline (in-store), you could also advertise it there using, for example, flyers, posters or information on physical receipts about it. You should also train your staff to inform customers about the program and invite customers to join at the check-out. However, beware not to repeat H&M mistake that invited customers to download the loyalty app at the checkout causing other customers to wait in a long line – this is why if you decide to promote the program in-store, make sure that it’s either very quick to join or that a customer can go to a designated space to sign up. 

Paid advertising 

You can use paid advertising like social media ads, PPC, retargeting, radio, TV, print, or any other channel you can imagine to advertise your loyalty program. We recommend, however, to start with building the loyalty program presence all over owned channels first to build a consistent user journey for the visitors coming from paid advertising. 

4. Loyalty program landing page design 

Your loyalty program should have a landing page (website or a mobile app page) that will collect all information about it. This should be the information hub about the program, directing visitors to join your loyalty club. You should keep the branding and style consistent with your brand so that visitors can clearly connect the program with your brand. There is various information that such a page should contain: 

Inform customers about all ways to earn rewards 

You should clearly list all possible ways to earn rewards. If there are any new ways to earn points or rewards, update your landing page with this information. You can add one paragraph to your landing page where you list all “temporary” actions like double point days etc. as well. If you want your customers to engage with your brand and participate in your loyalty program, you need to tell them how they can do it first. 

Example:

‍MAC loyalty program has a straightforward explainer page that goes through the program’s rules. It also entices customers to join the loyalty program by offering 15% off the next purchase if one enters the program. 

List all available rewards 

Let’s be honest, in most cases customers participate in loyalty programs for the rewards. You should clearly list all possible prizes to encourage your customers to participate in the loyalty scheme.

Be careful not to overburden your customers with too many options – striving to get the best option possible can make some customers anxious and unwilling to make any choice at all.

Example: 

Sephora Beauty Insider loyalty program lets customers choose benefits they want from their Rewards Bazaar. Members earn one point for each dollar spent. Points are redeemable for various rewards that the members can choose from the catalog, like gift cards, free products, limited edition products, in-store beauty tutorials, events entrance, and more. 

Inform customers on how to cash out their rewards

You should inform your customers how they can obtain the rewards. For example, if your loyalty program is point-based and customers can exchange their points for the rewards, you should list the points cost of the rewards. If certain actions qualify for certain rewards, you should mention that too, for example if the customer can get a 10% off discount coupon for filling out their profile. 

Example:

‍Marriott Loyalty Program has a section on their loyalty program landing page titled “How to redeem.” They use this section to explain all the ways customers can redeem their points and what they can redeem them for, including donations and transferring points to other customers. 

Explain the different program levels (tiers) and the difference between them

If you introduce tiers (levels) to your loyalty scheme, you should clearly explain how to qualify for each tier (for example, by spending a certain amount of $ in a calendar year), when the membership expires and what are the benefits of belonging to each membership level. We find a comparison table to be the most user-friendly, especially if there are many differences between the tiers and their rewards. 

Example:

‍UGG has a comparison table explaining the difference between the loyalty tiers.

Be clear about the expiry date of the rewards

State clearly when the points or rewards expire, starting on the landing page. Mention all basic conditions of the program on the landing page. You can add details in the terms and conditions of the program (that should be linked on the landing page) but do not hide any basic information there. For example, if all earned points expire in 12 months from assignment, you should mention it straight on the landing page, as it is an essential information related to the rewards earned. 

Keep your program rules simple

Explain your program rules in a simple language, do not repeat yourself and use visuals to support the explanations. Do not overcomplicate your loyalty program by introducing too many rewards or too many ways to earn points. If customers find your loyalty program difficult to participate in or if they do not understand the benefits clearly, they will not participate. 

For example, if you assign a certain number of points for each $ spent, either make these numbers very easy to follow or translate them to simple terms. For example, 1 point for $1 spent is a simple calculation to make. If you have a little bit more complex scenario, for example offer 1 point for each $1 spent but allow to exchange points for cash only every 100 points earned and each 100 points equals $5, instead of writing this, you could simply write “get $5 off every $100 spent” as this will be much more understandable to your customers. You can keep all the other calculations and rules for your terms and conditions. The most important part from the UX perspective is to clearly explain the benefit to the user. 

Example: 

Chubbies Shorts has a very simple landing page for their loyalty program that explains clearly how to earn and redeem the points. 

5. Loyalty program sign-up form design 

You should make it easy to opt-in your loyalty program. Ideally, the sign-up step could be a part of customer onboarding or creating an account. The form should be short and easy to fill. You can add more questions in surveys or customer profiles later on and offer an incentive to motivate customers to fill them out. 

On your landing page or in the subscription form you should clearly state how a customer with and without an existing account can join the loyalty program.

Your sign-up form should be easy to find. From the UI perspective, it’s best to place it straight on the loyalty program landing page.

Example: 

Abercrombie loyalty program called myAbercrombie has a very simple sign-up form design. They ask only for email and password. If you already are a registered user, you can log in with your current credentials and your account will be connected with the loyalty program automatically. If you do not have an account, after you provide email address and password, you will be prompted to enter your first and last name and to opt-in (or out) to marketing permissions as well as to accept the program terms and conditions. 

6. Loyalty program welcome email

Most companies send a welcome email to customers who have subscribed to their loyalty program. This kind of message should include information about your program benefits and ways to participate and/or a link to your landing page if someone wants to find more information about it. Especially those customers who sign up from a different source than your landing page (email, ad, etc.) may not know all the information about your program. It is recommended from the UX standpoint to send it to them as part of the onboarding process. You can also add the first reward or incentive there.  

Example:

Welcome email from UGG Rewards loyalty program.

7. Personalize your communications 

To maintain a coherent brand image and the best possible user experience, you should personalize all your communications, for example by including customer’s name, loyalty program level, points, and rewards status. This will make them feel special and appreciated as well as give them immediate access to their loyalty account information which may increase their participation rate.

Inform loyalty program members about their rewards and points status 

To encourage more purchases and participation in your loyalty program you should regularly inform your customers about their points balance and membership status. Here is a couple of UX best practices you can use:

Use visuals to convey reward progress

Use visuals to guide user understanding of which rewards are available. You can, for example, show which loyalty tier they currently are and how many points they are missing until the next one. You can display how many points they need to get a next reward (for example, 10 more points until your $20 off coupon). You can also show “locked” rewards, informing users about how many points are needed in total to get them. This will make it easier for your customers to understand the program rules and how they apply to their specific situation. 

Example:

The reward unlocking mechanism is the same as a well-known stamp collection in bars, cafes, or restaurants. McDonald’s has a loyalty program where if you collect five stamps for ordering drinks, the 6th drink will be free of charge. 

Send notifications 

Send notifications to the customers, for example, if they have earned a reward, if their reward is close to expiration or if they have reached a new milestone (like entering a new level). This will remind your customers about your loyalty program and encourage them to participate in it. Remember that automatic notifications are critical to maintaining customer engagement in the long-run. 

Example:

‍Adidas sends a notification to their customers when they earn a loyalty reward. 

‍Olay sends an email informing customers that they have earned loyalty points. 

NB Rewards sends an email informing customers about their earned rewards (in this example, a birthday reward).

Send reminders 

To keep your customers up-to-date and to keep your loyalty program top of their minds you could remind your customers about:

• Expiring rewards.
• Ways to earn rewards they have not used yet (for example social media activity).
• The benefits waiting for them if they earn X points more.
• Available perks and discounts.
• Any special events, double-point days, giveaways they should participate in.
  

Example:

‍Rue 21 sends a recap of all available rewards, missing points until next rewards and ways to earn rewards to remind their loyalty program members about their program. 

Chatime Rewards loyalty program sends mobile app notifications about soon to expire rewards.

Loft sends a reminder when a special loyalty program offer is close to expiration. 

Show the rewards status in customer profiles 

For the best customer experience, your UI should be designed in a way that allows users to always find the information about their loyalty level, points and rewards available in one place. That can be, for example, a customer account. You can also use a dedicated loyalty program customer cockpit. 

Example:

‍Abercrombie shows myAbercrombie loyalty program link in the customer account. Upon clicking on it, the loyalty program dashboard (customer cockpit) appears. It contains: 

• The loyalty points status. 
• The available rewards. 
• Missing spend (purchases) until the VIP status. 
• Ways to earn points.
• Comparison of Basic and VIP tiers.
• FAQ link.

8. Use a dedicated customer cockpit (digital wallet) 

You can create a special customer view with all the information about their loyalty program participation. This could be a part of their customer account or a completely different page (or a dedicated loyalty app). The most important element is to add all relevant information about their loyalty program participation history, current rewards and points and possible future rewards and loyalty program levels. You can also merge it with all other promotional information, for example gift card status, available promotions and coupons or referral rewards status for the ultimate promotional experience. 

Example:

H&M loyalty program comes with a customer cockpit where customers can see all vouchers, rewards, membership status, earned points, and how many points are missing to reach the next tier level or the next discount.

9. Include the rewards and point status information in newsletters

You can include the information about the available rewards and points collected in the newsletters to regularly remind your customers about your loyalty program. 

Example:

‍Hollister adds loyalty points and available rewards information to all newsletters they send to customers. 

10. Gamify the experience

Besides the basic rules of the loyalty program, you could also add in some temporary campaigns to spice it up a bit. This will keep your loyalty program members on their toes and make them check your loyalty program page or app regularly. 

Design campaigns 

Campaigns are time-limited or segment-specific events that enrich the core loyalty experience by offering double points, instant rewards, or other perks. You can add such events from time to time and inform your loyalty club members about them to increase engagement and participation. 

Example:

‍DM launches extra point days, extra points for purchases of specific products and more. Such campaigns are displayed on their mobile app called “Payback” which is part of a bigger loyalty scheme. The campaigns are available as coupons that have to be “activated” to be used. This forces the loyalty program members to regularly check the loyalty app.

Example:

‍Sephora Beauty Insider has point multiplier events, sweepstakes and other events to keep the loyalty members interested long-term.

Add challenges

Challenges are a series of actions that members have to complete to earn a reward. You could launch, for example, a special challenge “Invite 3 friends to join our loyalty program. If they join, you will get 1000 points to your account. Only valid in August 2021.” Keep the challenges expiry date short and advertise them widely. This UI trick will increase the engagement and participation in your loyalty program. 

Both challenges and special campaigns should be mentioned on the main communication channels of the loyalty program – the landing page and the customer account/cockpit. You could also send notifications about it through other channels like email, social media, and community.

Example:

‍TOMS launched a giveaway for all new loyalty program members, boosting the number of participants. It was only available from October 5 2017 till October 20 2017.

11. Do not forget about mobile-friendliness

Data suggests that 75% of consumers would engage more with customer loyalty programs that make rewards mobile-friendly. This includes points, discount codes, vouchers, and gift cards. You can offer a dedicated loyalty program mobile app, include your loyalty program in your existing mobile app, make a progressive website or simply make sure your website is responsive (however, in that case, you will not be able to allow offline redemptions of rewards). 

Example:

‍American Eagle Outfitters offers a loyalty program mobile app.

12. Master the cross-channel experience

Understand that loyalty doesn’t just exist though website login credentials and point balances. Users desire (and expect) their loyalty programs to be present in all aspects of the user experience, whether it’s at the check-in kiosk for a flight or the brick-and-mortar retail store register. Explore the areas where your channels cross and ensure that the experience is seamless for earning, viewing, and redeeming points for rewards.

Many companies send emails with reward status updates and offers for loyalty program members. Consider the weight and frequency of these touchpoints and the communication channel used to ensure that what you’re sending to loyal customers is relevant for their experience and goals and doesn’t end up as spam.

13. How to apply loyalty points or rewards in the basket or at checkout?

One very important aspect of the loyalty program UX and UI design is how users can use their rewards at the checkout (or in their baskets). If the points can be used as payment means, tell them during the checkout process if their purchase is eligible for payment using their points balance. You could let them choose how many points they want to use towards that purchase. 

If the points can be exchanged for rewards, you could let users exchange them at the checkout or direct them to another page where they can pick their rewards and then back to the basket (although this UI solution may increase your cart abandonment rate). 

The most user-friendly way is to list all available rewards (points, coupons, discounts, products etc.) in the basket and let your customers apply them to their orders. This will make it clear for customers what their rewards are, make it very easy for them to use the rewards and will not affect your cart abandonment rate (like linking out to rewards catalog or customer cockpit would). 

If you would like to see how you can design the customer experience in the basket or at the checkout for: 

• Gift cards redemption – See our Gift Card UX & UI Best Practices Guide. 
• Coupons or promotions redemption – See our Coupon and Cart Promotions UX & UI Best Practices Guide.
  

A great example of displaying all available rewards and points is the AEO (American Eagle Outfitters) checkout flow. They display them as small banners with an “apply” button. They also display the newly earned rewards immediately post-purchase. Their loyalty program is called Real Rewards instead of AEO connected since 2020 and has slightly changed branding. 

Example:

‍Chubbies Shorts show the available points and rewards (and allow points to reward conversion) directly in the basket. 

14. Display the earned rewards/points post-purchase 

You should immediately show to your customers how many points or rewards they earned thanks to their purchase. You can do it even before the purchase is completed, by displaying “You will earn XX points for this purchase” message and recalculating the amount if the content of the basket changes. You should definitely do it after the purchase is completed, for example on the thank you page and order summary emails. 

Example:

‍Vape Club sends an email with the earned points post-purchase. 

15. Display loyalty points and rewards history 

To make tracking of their rewards and their use easier for customers (which can offload your customer service agents), you should show the points and rewards history to them. You should display earned and redeemed points and rewards. They could be displayed in the customer account’s order history or, if you offer a separate loyalty program “cockpit”, you could display it there. 

Example:

‍Chatime Rewards loyalty program displays the points history on the app. 

16. Design an opt-out process

For better UX, you should make it clear to your loyalty club members how they can opt out from the program. This should be a part of your terms and conditions and can be a part of the customer account/cockpit or email communications with the customers. You should carefully draft the opt out form and consider asking your customers for providing feedback or selecting a reason why they’re leaving.

The most user-friendly option would be to allow customers to resign from the loyalty program membership on their accounts, by themselves. You should also allow them to do it via Customer Service (especially in the case of not so tech-savvy customers or if you have an offline program). 

Example:

‍American Eagle Outfitters allows customers to resign from their loyalty program only by calling the customer service. That is not the most user-friendly option but they do have paragraphs in their FAQ explaining the process, which is the basic best practice you should follow. Unfortunately, many of the loyalty program terms and conditions we have seen skip that information completely. 

{{CTA}}

Ready to launch a better loyalty program? 

Get started 

{{ENDCTA}}