Whats a good way to show that a user gets a free coffee in a loyalty app?

Question

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. 

These are the designs I have tested:

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:

1. 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.")
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!

Answer 1

I'm not a fan of physical loyalty cards, so why translate the idea to mobile? How many loyalty cards do you have in your wallet?

Just use a simple speedometer style graphic it's easy to ascertain current reward status. Also include numbers as a cue -> 8/12

Answer 2

Show the number of earned units using a representative icon, and show progress toward the next earned as a percentage-filled icon.

I'm on a mobile now, without access to my digital sketching tools, so I'll approximate using ASCII.

Let V represent a filled coffee cup icon and a v be a partially-filled cup. Let B represent a filled bread icon and b be half-filled. In all cases, let _ represent an unfilled outline of the corresponding icon. Then you might start out as:

_
_

As one buys coffee and bread, one earns rewards:

v
_

(Partially earned coffee, no earnings on bread)

v
b

(Partially earned coffee and bread)

Vv
B_

(Earned a whole coffee and working on second, earned a bread -- but hasn't started earning a new bread)

Vv
BB_

(Earned a coffee and 2 breads, part of the way on next coffee, none so far on next bread)

And so on. Allow clicking/tapping an icon to show date earned. If hover supported, do same.

The important points are:

1. Use a whole filled icon to represent earned and redeemable.
2. Use a partial fill to represent progress toward next earned.

Edit

Questions were raised in the comments. Here are my responses:

How do you show how close you are to getting a free cup?

The icon will be filled with the percentage you are toward goal. Thus, if it takes 4 purchases to earn a free coffee, then the first purchase would show a coffee 1/4 filled. The second purchase would show 1/2 filled. And so on. If exact percentages are infeasible, then round to the nearest possible unit. Thus if you can only visually show an icon in 1/4 filled increments owing to the size and resolution for the icon, and it takes 6 purchases to fill a cup, then "snap" the purchases to the closest possible fill: 1 or 2 purchases would show as 1/4 filled, 3 would show as 1/2, 4 or 5 as 3/4, and finally 6 as filled. In all cases, if possible, allow the user to click/tap the icon to find the exact details.

[How to show lots of filled cups?] i.e. having 22 cups (which obviously won't happen a lot, cause people probably will spend the free ones much more often than saving up 22 coffee). It would look rather cluttered to have 22 coffee icons, if you have 22 free

The exact number earned is likely irrelevant when the quantity is large. I.e., Knowing I have one, two, maybe three coffees is important and exciting. Beyond 4, the number earned might as well be infinite.

So, I'd either create a tally icon or use a small label. By tally, I mean to use something like tally marks to indicate a group of earned items. For example, you might shrink your full coffee icon 1/4 size, then arrange 4 of them into a square. That tally icon would then represent 4 coffees, which would shrink your space requirements by 300%. In this example, I've earned 10 (4 + 4 + 1 + 1):

V V  V V  \ /  \ /
V V  V V   V    V

Or, the small label could be like your original idea of the yellow text, but instead it would be overlaid on the icon, something like this (again, ASCII)

\   / \   / \   / \   /
 \ /   \ /   \ /   \ +10 more
  V     V     V     V

Answer 3

I would suggest not using the images in the way you've done because it looks as though each one darkened up should mean entitlement to a free coffee/bread/pig-ear, which makes the numbers at the end of the row particularly puzzling.

Consider using a card like a tram pass, with rows of spots to be turned into holes, and a coffee/bread/pig-ear showing at the end of the row. When the "path" has been fully punched out, the customer has reached the coffee/etc. and gets to consume it.

[edit] I'd something like this in mind (this is very rough!)

Answer 4

Instead of showing the 7th coffee which is free and gets confused with paid ones, and then adding all those 7th coffees, my proposal is to just display the free coffee in this way:

Each coffee fills a sixth part of the next free coffee. In order not to confuse the amount of free coffes avoid including an icon for those, simply write it in the text (there are better ways of expressing that text for sure).

---

In my opinion it is strange that a free coffee is accumulated and not consumed after reaching the 6th, instead of paying the next one, but you might have reasons I'm missing. If what you are tracking is the amount of free coffees already reached and consumed consider instead to track the total amount of paid coffees consumed, it might be easier to understand.