Promotions & Rewards

Design a promotions and rewards section for a shopping app. The experience should show a user’s points balance, current tier, and the rewards they can actually claim right now. Keep the main screen focused: one clear summary at the top, then a list of active promotions and redeemable rewards below it.

Each reward card should surface the minimum useful details without opening a modal: reward name, points required, expiry, and whether it is locked, available, or already redeemed. If a promotion has a progress requirement, show that progress inline so the user knows how close they are to unlocking it. Avoid decorative complexity that competes with the offer itself.

Include a reward detail state for selecting an item, with the redemption cost, any conditions, and a single primary action to claim or redeem. Also show empty, expired, and redeemed states so the screen still works when there is nothing available. If you include sharing, make it a small post-claim confirmation state, not a second main path.

Animate your loyalty cards to flip and reveal additional benefits upon a tap, adding an enjoyable interactive experience.