Punch cards

Try it

This is the card as a customer sees it in their account. Place a few orders, redeem the reward, then refund an order to see how the card responds. Flip on “Make the next request fail” to see the error state.

Loam Coffee Co.J

Welcome back, Jordan

Loam Rewards

3 of 8

Eight bags, then one on us. Rewards unlock automatically.

1. Order 1, reached
2. Order 2, reached
3. Order 3, reached
4. 10% off, not reached yet
5. Order 5, not reached yet
6. Order 6, not reached yet
7. Order 7, not reached yet
8. Free bag, not reached yet

1 more order until 10% off.

Demo controls

Place an orderMake the next request failReset demo

Order history

• #1041 Ridgeline blend, 12 ozAug 4Refund
• #1052 Night Owl decaf, 12 ozAug 18Refund
• #1067 Ridgeline blend, 12 ozSep 1Refund

Make it theirs

Merchants style the card from a form beside a live preview: copy, reward text and icons, step icons, a banner, spacing, and whether steps without a reward show their order number. They can also hide the card from the customer portal entirely. Every change applies to the card in Try it above, too. Drag “Orders placed” to watch the card fill, and switch to Phone to see the narrow layout.

Merchant admin · Punch card design

Customer portal

Show the punch card in the customer portal

Text

HeadingDescriptionEight bags, then one on us. Rewards unlock automatically.When the card is full

Rewards

Order 4

▾

StarPercentMoneyGift

Order 8 (card full)

▾

StarPercentMoneyGift

Steps

DotBeanCupStar

Show order numbers on steps without a rewardSpace between steps: 12px

Banner image

Show a banner above the heading

Reset design

Preview · changes also apply to the card in Try it

DesktopPhone

Orders placed: 3

Loam Rewards

3 of 8

Eight bags, then one on us. Rewards unlock automatically.

1. Order 1, reached
2. Order 2, reached
3. Order 3, reached
4. 10% off, not reached yet
5. Order 5, not reached yet
6. Order 6, not reached yet
7. Order 7, not reached yet
8. Free bag, not reached yet

1 more order until 10% off.

The problem

Punch cards came from three directions at once. Merchants were asking for a simple loyalty program. Retention mattered too: a card that fills with every order gives subscribers a reason to stay for the next one. And a competitor already had it. Our CEO saw punch cards as a feature we were missing, one that could help us beat them and bring in revenue of our own.

Constraints

The urgency was mostly self-imposed: we felt we were falling behind, and the CEO wanted something in merchants’ hands fast. That set the timeline: one week for the first version.

What I did

We sat down with product, design and backend to agree on the end goal, what was realistic in a week, and who would own what, so we used the time well. I built the merchant-facing form, the experience builder with its live preview, and the integration with the flow canvas, where merchants add punch cards to their customer journeys.

The hard part

Building the experience builder from the designs was only half the job. The customer portal lived in a separate application, so every change a merchant made in the builder had to show up there exactly as previewed. On top of that came the edge cases we had to talk through and iron out: refunds, finished punch cards, and customers with more than one card.

Result

Punch cards became our base rewards flow, with a setting to show or hide the punch card UI for merchants who didn’t want it. Adoption was immediate, and merchants loved it.