Shop, battle pass and offers: designing monetisation players do not resent
The shop is the screen where a player decides whether they trust you. It is also, in most free-to-play games, the screen that was designed last, by whoever was free. Here is how to design one that sells well because it is clear, rather than in spite of being confusing.
In this article
Open to new projects
Hadjoudj Idris
Game UI/UX Designer
Upwork100% Job Success
Hire me Browse the workMonetisation interfaces get treated as a separate, slightly grubby category of design, which is why so many of them look like a spreadsheet wearing a costume. They are just product screens with unusually high stakes: the player is deciding whether to give you money, and every second of confusion is a reason not to.
The shop is a storefront
Players compare your shop to every other shop they use, most of which are real retail apps with teams of people working on them. That is the standard, whether or not it is fair. A shop has to answer four questions immediately, and most of the ones I review answer none of them above the fold.
- What is this? The contents, in plain words and recognisable art, not a name only the designers understand.
- What does it cost? In a unit the player understands, which usually means real money somewhere on screen, even when the transaction is in a game currency.
- Why this one? What makes this item or bundle different from the one next to it. If two cards look the same, both lose.
- What happens next? Whether they own it already, whether it is equippable now, and where it goes when they buy it.
Anatomy of a bundle card
The card is the atom of every shop. Getting it right once means the shop, the offer popup, the battle pass tier and the limited event all inherit it.
| Element | Rule |
|---|---|
| Contents | Every item visible or countable at a glance. A bundle that needs a tap to see what is in it will not be bought |
| Hero art | One clear focal item, not a collage of six at equal weight |
| Price | The largest secondary element on the card, unambiguous, never hidden behind an animation |
| Value claim | Only if it is true and checkable. A discount the player can verify builds trust; one they cannot destroys it |
| Ownership state | Owned, partially owned, and unavailable have to be visibly different from purchasable |
| Timer | Only when the deadline is real. A timer that resets is the single fastest way to teach players your shop lies |
| Tier or rarity | Encoded in shape and label as well as colour, for the reasons in game UI accessibility |
Currencies: every conversion costs you comprehension
The standard free-to-play stack has a soft currency, a hard currency, and often an event currency on top. Each layer moves the purchase further from a number the player understands, and the industry belief is that the distance helps conversion. In my experience past two layers it mostly produces abandoned carts, refund requests and reviews about being confused.
- Show the real-money price somewhere in the purchase path, even for a currency purchase. Players who feel a price was hidden do not come back to check whether it was.
- Do not sell currency in amounts that never match item prices. Leaving 40 gems stranded is a deliberate old trick, it is widely recognised now, and it reads as contempt.
- Label currencies with a shape as well as a colour, and use the same icon everywhere: HUD, shop, reward, receipt.
- Keep the balance visible on every screen that can spend it, in the same position, with a clear route to top up that does not lose the player's place.
- Show what is left after the purchase on the confirmation, not just what is being spent.
The battle pass is a progress screen that happens to sell
A pass works when the progress is legible and the next reward is visible. It fails when it becomes a wall of tiers with no sense of where the player is or what is coming.
- Anchor on the current tier. The screen should open at the player's position, not at tier one, with the next reward in view.
- Show both tracks clearly. Free and premium have to be visibly distinct without the free track being made to look like a punishment.
- Make the locked premium rewards visible but calm. The pitch is what is coming, not a nag on every row.
- Show progress in the units the player earns. "Three matches to the next tier" beats a percentage bar every time.
- Put the buy decision at the moment of value, which is when the player can see the specific rewards they have already earned and would unlock, not on a splash screen at launch.
- Say what happens when the season ends, plainly, before the purchase rather than after it.
The offer moment
Where and when an offer appears matters more than what the offer is. The same bundle shown at two different moments performs completely differently, and one of those moments also costs you a player.
| Moment | Verdict |
|---|---|
| Mid-run, interrupting play | Never. This is the most reliable way to make a player close the game |
| Immediately on launch, before play | Weak. The player came to play, and has no context for value yet |
| After a run ends, on the results screen | Good, if it is beside the result rather than on top of it |
| At the moment of a specific lack | Best. Out of energy, one upgrade short, missing a slot. The offer answers a question the player just asked |
| On return after time away | Good, and the only interstitial most players tolerate, provided it can be dismissed in one tap |
| Immediately after a purchase | Poor. The upsell chain is the most commonly cited reason players stop buying entirely |
Whatever you choose, cap the frequency and make dismissal instant. A close control that is small, delayed or in the hardest corner of the phone to reach is the pattern players screenshot for reviews, and on mobile it collides directly with the thumb map in mobile game UI design.
Dark patterns and what they actually cost
Every one of these works in the short term, which is why they persist. They are also the things that get quoted in one-star reviews, raised with platform holders and, increasingly, looked at by consumer regulators.
| Pattern | What it costs |
|---|---|
| Countdown timers that reset | Trust in every timer you ever show, including the honest ones |
| Prices only in an obfuscated currency | Refunds, chargebacks and the confusion complaints that fill review pages |
| Confirm buttons where cancel used to be | Accidental purchases, which become refunds and a support cost |
| Currency packs that never match item prices | The most recognised trick in the category, and read as bad faith |
| Confirmshaming: "No thanks, I like being weak" | The screenshot that goes around social media |
| Ads disguised as game content or as a close button | Store policy violations, and a measurable spike in uninstalls |
| Pre-checked add-ons in a purchase flow | Chargebacks and, in some markets, a consumer-law problem |
| Loot boxes without odds shown | A platform policy issue on the major stores, and regulatory exposure in several countries |
There is a legal dimension here that is moving quickly, particularly around in-game currencies, loot boxes, subscriptions and anything aimed at children. I design to the honest side of the line by default, and anything close to it is a question for whoever handles your compliance, not for a designer.
Pressure converts once. Clarity converts repeatedly, and it is the only one of the two that survives a review page.
The purchase flow, step by step
- 01
Entry
The player arrives with intent or with curiosity. Both need the shop to open fast and to open somewhere useful, which is usually the category relevant to what they were just doing, not a generic front page.
- 02
Selection
The card answers the four questions. Comparison between two cards is possible without leaving the screen. Anything already owned is unmistakably marked.
- 03
Confirmation
One deliberate step that restates the item, the cost, and the balance after. Placed where an accidental double tap cannot land on it, and never styled to make cancel look like the mistake.
- 04
The platform sheet
The store's own payment dialog, which you do not control, and which is where a slow or unclear preceding step causes abandonment.
- 05
Receipt and delivery
Show what arrived, where it went, and offer the obvious next action: equip it, use it, open it. This is the celebration moment and it is routinely a grey toast notification.
- 06
Return
Back to exactly where the player was, with the new thing visible in context. A purchase that dumps the player at the main menu makes them wonder what they bought.
Rewarded ads without the retention damage
Rewarded video is the one ad format players broadly accept, because it is a trade they chose. Everything that erodes that is a design decision.
- Always opt-in, never interruptive. The player presses a button and knows what they are getting.
- State the reward before the ad, exactly, and deliver it immediately after.
- Never place a rewarded button where a frequent action sits. An accidental ad is worse than no ad.
- Cap it and show the cap, so a player knows there are three left rather than discovering an invisible limit.
- Handle failure gracefully. No fill, a dropped connection, a video that fails to load: the reward is still owed if the player did their part.
What to measure, beyond conversion
Shop metrics get reported as conversion and revenue per user, which tell you that something changed but not what to fix. These are the numbers that point at a screen.
- Shop bounce: opened, scrolled, left without tapping a card. High bounce is a legibility problem, not a pricing one.
- Card tap rate against purchase rate: many taps and few purchases means the card promised something the detail did not deliver.
- Abandonment at the confirmation step: almost always a clarity or a trust problem right there.
- Refund and chargeback rate: the honest measure of whether your flow was clear.
- Review keywords: search your own store reviews for "confusing", "scam", "expensive", "ads". It is free qualitative research and it names screens.
- Retention of buyers versus non-buyers: if buying makes players leave sooner, the offer is being placed in the wrong moment.
The framing that helps most here is the one in game UX design: the interface is not a surface for the economy, it is where the player forms an opinion about whether the economy is fair.
Does a clearer shop actually convert better than a pressured one?
Pressure tactics reliably lift a short window and are the things that show up later in refunds, uninstalls and reviews. Clarity moves the numbers that compound: repeat purchases, buyer retention and the willingness to buy a second time. If your game is meant to live for years, the second set is the one that pays.
How many currencies should a game have?
One if you can, two if the design needs a premium tier, three only if an event genuinely requires a temporary one that expires. Each extra layer costs comprehension, and comprehension is what a purchase decision runs on.
Where should the shop button go?
Visible from the main hub and from the screens where a lack is felt, such as the inventory or the upgrade screen, and never in the path of a frequent gameplay action. On mobile, keep it out of the thumb's resting zone so it is never hit by accident.
Should I show real money prices for in-game currency purchases?
Yes. Some markets are moving towards requiring it, platforms are tightening their rules, and independently of both it is the thing players say they want. A player who feels the price was hidden treats every future price as suspect.
How do I design a shop for a game that children play?
Assume stricter rules and design to them: no artificial urgency, no obfuscated pricing, clear parental gates on purchases, and no ads disguised as content. Several jurisdictions have specific requirements for services likely to be accessed by children, so this is one to confirm with your legal advisers, but the design direction is unambiguous.
What does it cost to design a full monetisation flow?
As a rough shape, a shop with a card system, a pass, two offer formats and a complete purchase flow with states is around three to five weeks of design, more if it is a live game with events. It is one of the highest-return parts of a free-to-play interface, and the general pricing logic is in the cost article.
We are premium, not free-to-play. Does any of this apply?
The DLC page, the edition comparison and the cosmetic store follow exactly the same rules: contents visible, price unambiguous, ownership state obvious, no artificial urgency. Premium games have fewer of these screens, and each one carries more weight because there are fewer chances to recover from a bad one.
Hadjoudj Idris
Game UI/UX Designer, Remote, worldwide
Need this done properly on your game?
Menus, HUDs, a full UI system, or one screen that isn't working. Tell me what you're building and I'll tell you honestly whether I'm the right fit, and what it would cost.
Upwork100% Job Success