Get the Latest Updates

Receive occasional drops of new designs, components, and random resources. No spam, just the good stuff.

Back to Home

Deal Tracker

Progress, goal, and reward. Three states in one strip.

6/10

Only 4 more books to unlock the 10 for 10 deal

6 books in cart

TL;DR — A progress ring that turns "add to cart" into a game you're already winning.


As a secondhand bookshop running a bulk discount promotion, I want to show buyers exactly how close they are to unlocking the next deal, so that I can nudge them to add one more book — without a single word of hard sell.


Why progress visibility changes behaviour

The Goal Gradient Effect: the closer people are to a goal, the more motivated they become to reach it. This component makes the distance to the next deal impossible to ignore — a progress ring counting up to 10, with copy that updates in real time. At 7 books: "Only 3 more to unlock the deal." At 9: "Only 1 more." At 10: "Nice one."

There's a second layer too. The further into the cart a user gets, the harder it is to leave — not because of the deal, but because of the sunk cost of the books already added. Progress visibility amplifies that effect.

How it works

The banner floats over the page as a pill. The ring tracks books in cart modulo 10 — so once a deal is unlocked, it resets and the chase starts again. A secondary line confirms how many deals have already been applied, so the reward feels real, not theoretical. The reset is intentional: it turns a one-time promotion into a habit loop — the same mechanic that keeps people coming back to Starbucks for their tenth stamp.

Why this pattern

Explicit progress removes ambiguity. The user doesn't have to guess whether the deal is worth chasing — they can see exactly what it costs them to get there.

Back to Home