I am designing a loyalty card iOS app where users would get a "Stamp" for each coffee and bread purchase. Once the user has 6 stamps, shown with darker filled icons, the seventh would be for free. In other words, “Buy 6, get the 7. for free”.
I looked at this list, but was really convinced with how they solved it. Most loyalty programs I have found don’t let you collect the rewards, but you have to claim them once you get it. Ex. Loyalzoo where it says “Target reached. Claim in store.” Starbucks have points one can collect, so that has a complete separate logic which I believe cant really be transferred to my app unfortunately.
In this app one can collect rewards, and it should show the number of free coffee or bread the user has saved up. It is highly unlikely that this will be more than two digits. This means that the largest number displayed would be 99 and the design ought to have enough space for this.
How can I in the best manner show that one can get a free coffee / bread? The current till shows it "Saldo 0" (Balance: 0). (See "0.") Just writing "Free coffee: 22" below the cups, is not very easy to spot and not visually appealing. (See "1.")
What should it look like when one has no free coffee/bread? I see two options:
- Only displaying 6 cups until one has earned a free coffee, and then another cup/number appears. The problem with this is that the layout would change according whether one has a free cup or not. (See "2.")
- Having the seventh stamp shown is nice if one has loads of free coffee, but for most users the number would be zero. Which is kinda sad and not very motivating. (See "3." and "0.")
How can I show that amount of free coffee / bread one has collected? Having the number inside the coffee cup works (See "4"), but for the bread it doesn't. (See "5.") I therefore tried only showing the number (see "6."), but its not very self-explanatory what this means.
An option is therefore to have a badge (or something similar) behind the number. (See "7.") But, using a badge still leaves the question regarding what to display when one has no free coffee...
Ought I to include the word "Free" or is this not necessary? See "8." and "9."
If anyone has any experience with apps or websites that have similar features and show it in a good and user friendly way, it's appreciated!