( Breadfast · Consumer loyalty & internal tooling · Egypt )

Sip
and Stamp

Breadfast delivers groceries to half a million people a month and runs a specialty coffee chain of around 35 shops. The coffee is already in the app, but the two sides of the business ran past each other. This project was about integrating the shops into the ecommerce experience: a digital punch card that sends each audience into the other, and the admin panel that lets the business run it without engineering.

The first onboarding screen: a stack of Breadfast Coffee cups beside a latte, under the line stamp your way to free coffee
A completed Sip and Stamp card with nine wax seals and a redeem my free coffee button
The how it works screen, explaining the four steps of the punch card

My role

  • Product Designer, both sides of the product, from framing to shipped screens
  • Made the case for a punch card over extending the existing points system
  • Designed the card, the stamp flow, the reward states and the entry point in the app
  • Designed the admin panel that configures every card, in six sections
  • Wrote the interface copy, in the customer's language and in the admin's

The facts

  • Timeline2 months
  • ScopeCustomer facing punch card and the admin panel behind it
  • PlatformsiOS and Android in English and Arabic, admin on web
  • ReachAround 35 Breadfast Coffee shops across Egypt
  • TeamPM, engineering and marketing. Sole designer.

( 01 · The problem )

Two crowds, one brand, never meeting

This was not a discovery problem. Coffee had its own tab in the app and the shops had Breadfast signage on the door. People had no reason to move between them.

App customers treated Breadfast as a delivery service, so coffee read as a category rather than a place to go. Shop customers had a relationship with a barista rather than with the app, and their loyalty was real but invisible, living in habit instead of in anything the business could see.

The brief was not build a loyalty programme. It was make each half of the business a reason to use the other half.

Inside a Breadfast Coffee shop: the Breadfast Coffee sign above an illustrated menu board of classics, refreshers and matcha, with a pink takeaway bag on the counter

( 01 )

The app user had no reason to leave the house

Nothing in the app suggested there was a physical Breadfast nearby, and nothing rewarded going there.

( 02 )

The shop customer had no reason to open the app

They were already getting their coffee. The app had to offer something the counter could not.

( 03 )

Loyalty existed but nothing could see it

Regulars were regulars and the business could not tell. A habit nobody acknowledges moves the first time a competitor opens closer.

( 02 · The decision )

Why a punch card and not points

Breadfast already had points. Extending them to coffee would have been the cheapest thing to build and the worst thing to ship. Points are abstract, they accrue slowly, and nobody walks into a cafe thinking about a balance.

A punch card is the format the coffee world already speaks. The goal is fixed, it is close, and progress reads in one glance. We were asking shop customers to open an app, so what waited inside had to be something they already understood.

Early explorations: compact challenge cards for a coffee beans challenge and a coffee drink challenge, a Breadfast Coffee Challenges header block, a full Free Cup Card with ten slots, and an introducing coffee challenges onboarding screen
Early explorations. Several challenges running side by side, before the card became one object with the offer written on it.

( 03 · The solution )

The punch card

Buy nine coffees, the tenth is on us. You collect the card in the app, unlock each stamp at the counter with a QR code, and redeem the free cup the same way.

The Sip and Stamp card with one wax seal collected, an unlock stamp button, and ten days left to keep your streak

( 01 · The card )

The offer is printed on the card

Buy nine coffees and the tenth is on us, written on the card itself rather than in a terms sheet. A rule you have to go looking for is a rule people assume is worse than it is.

  • Nine stamp slots and a gift at the end, so the finish line is visible from the first stamp.
  • New customers can start with free welcome stamps, which is why the card is rarely empty on first open.
  • How it works answers the sceptic. Find a store answers the person already convinced.
The second onboarding screen, keep the streak alive, explaining that a purchase every thirty days keeps your progress

( 02 · How it works )

Telling people the rule before they need it

Cards reset after a month of inactivity. It is the one rule that changes how someone should use the card, so it gets stated up front, in the same voice as everything else, rather than sitting in terms where nobody would find it until it mattered.

  • Written the way you would say it out loud: miss a month and your card resets, so do not ghost us.
  • A push notification lands before the deadline, so the reminder is useful rather than an apology.
  • Both the window and the reminder are configurable, so the business can tune them without a release.
The unlock your stamp screen, a QR code to show the barista

( 03 · The counter )

The customer shows, the barista scans

This is the only moment that happens in front of another person with a queue behind them, so it had to be one action and no failure states. Putting the camera on the customer's phone would have added a permission prompt, a focus attempt and a retry into the worst possible place for all three.

  • One screen, one code, nothing to read.
  • The copy names the barista rather than the system, which is who the customer is actually dealing with.
  • Scanning on the shop side also keeps the stamp honest, since the code cannot be screenshotted and reused.
The stamp added confirmation, showing a wax seal, the card at three of nine stamps, and confetti

( 04 · Progress )

A stamp worth collecting

The stamp is a pressed wax seal carrying the Breadfast mark, from assets marketing provided. A tick would have communicated the same state and meant nothing. The seal makes a filled card look like a collection rather than a progress bar.

  • The count is stated in words as well as shown on the card, so three of nine is never something you have to count.
  • Confetti appears here and at redemption only, which is what keeps it meaning something.
  • The stamp artwork is set per card, so a beans card and a matcha card can carry their own without a new build.
A completed card with nine wax seals and a redeem my free coffee button

( 05 · The payoff )

The moment everything else is building toward

Nine purchases of build up land here, so this screen is allowed to be loud in a way nothing else in the flow is. It is also the moment most likely to be screenshotted and sent to a friend.

  • The completed card stays on screen. The reward is the card being full, so hiding it throws away the proof.
  • The unlock button becomes redeem, so the card is one object that changes job rather than a new screen.
The enjoy your coffee confirmation, a Breadfast Coffee cup with confetti

( 06 · Redemption )

Ends with a coffee

The last screen is a cup and a sentence that gets out of the way. No summary, no next steps, no prompt to start another card, because the next card starts on its own.

  • Redemption reuses the same QR pattern as the stamp, so the counter interaction is learned once.
  • You have earned it, now go enjoy it. Six words, and the flow closes.

( 04 · Language )

Written the way a barista would say it

Where that shows up:

( 01 )

“Buy 9 coffees and 10th on us”

The offer as arithmetic, on the card where the eye already is. No eligible purchases, no asterisk.

( 02 )

“The best way to earn a free one”

Short and casual, and it never says the word programme.

( 03 )

“Miss a month and your card resets, so don’t ghost us”

The rule that costs people something, said the way a friend would say it.

( 04 )

“Show the following QR code to our Barista”

Names the human rather than the system.

( 05 )

“You’ve earned it, now go enjoy it”

The last line in the product. It closes the loop and stops talking.

( 05 · The admin side )

One card was never the product

Everything above is one card. The business needed to run several at once, a beans card next to a seasonal card, and to change them mid campaign without waiting on a release.

So the second half of the project is an admin panel in the Breadfast back office, where every number the customer sees is set.

The Breadfast admin panel side navigation, with BFC Punch Cards selected
The full create punch card form: theme with English and Arabic names and uploads for the cover photo, stamp icon and gift icon; punch card rules with stamps per cycle, eligible products to earn and redeem, and a minimum order value; expiry and reset with an inactivity window and a warning notification; double stamps promotions; a first time gift of free stamps; and punch card validity dates

( Scroll inside the panel )

( 01 · Theme )

Naming and artwork

The card is named in English and Arabic, and the cover, stamp and gift artwork are uploaded from the assets marketing provides. These are the parts the customer sees.

  • Both languages sit side by side, so a card cannot ship half translated.
  • Each upload states its size, format and aspect ratio, so a card cannot ship visually broken.

( 02 · Rules and expiry )

What earns a stamp, and what it wins

How many stamps a cycle takes, which product IDs earn one, and which products the free reward applies to. Eligibility is set by product, which is what lets one card mean coffee and another mean beans.

  • An optional minimum order value, so a stamp can be tied to a basket size rather than a single item.
  • The inactivity window and the reminder notification are set here too, so the streak rule can be tuned without a release.
  • Every field states its effect underneath it, in the customer's terms rather than the system's.

( 03 · Promotions and validity )

When it runs

Double stamps can run once or on a repeating schedule, set per day with its own time window, so a promotion can target the quiet hours rather than a whole day. New customers can be given free stamps to start with.

  • Recurring opens a day by day grid, and the days are off by default, so a promotion never starts because a form remembered a setting.
  • Validity dates decide when the card appears in the app and when it stops, with no release either side.

( In short )

A punch card gave two audiences a reason to meet, and an admin panel gave the business a way to keep running it. The card is the part customers see. The panel is the part that decides how many cards there will ever be.

( Next case study )

Redesigning the Bosta home screen→