Premium Shop

Premium Currency Shop UI/UX Design Document

This document outlines the design for the premium currency shop in our mobile game. The shop will allow players to purchase medals, our premium currency, at various price points. Higher purchase tiers will offer bonus medals to incentivize larger transactions.

Goals

• Create an intuitive and visually appealing UI that encourages players to make purchases.

• Clearly communicate the value proposition of each purchase tier.

• Emphasize the bonuses received for higher-tier purchases.

Layout Overview

The premium currency shop will be a dedicated screen within the game, accessible from the main menu. The layout will feature:

• A header with the shop name and a close button.

• A grid or list of medal packages available for purchase.

• A footer with customer support and additional information.

Medal Packages

Each package will be presented as a card or tile with the following elements:

1. Medal Icon: A visual representation of the medals.

2. Medal Amount: The total number of medals in the package.

3. Bonus Medals: Clearly indicate the bonus medals for higher-tier purchases.

4. Price: The cost of the package in USD.

5. Purchase Button: A prominent button to initiate the purchase.

Visual Design

Typography

• Header: Bold and large font for the shop name.

• Medal Amount and Price: Medium font with emphasis on clarity.

• Bonus Medals: Highlighted with a bright color (e.g., contract color like green or blue) to draw attention.

Icons and Graphics

• Use uniform images for medals and bonus icons.

• Bonus: Include subtle animations (e.g., shimmering particle effects) to make the shop visually engaging.

User Experience (UX)

Navigation

• Easy access to the shop from the main menu.

• Simple and intuitive layout with clear visual hierarchy.

• Smooth transitions between the main menu and shop screen.

Purchase Flow

1. User selects a package by tapping on the purchase button.

2. Confirmation dialog appears with the package details and total cost.

3. User confirms the purchase, and the transaction is processed.

4. A success message is displayed, and medals are added to the user's account.

Note: this may prompt apple/android payment confirmation screen.

Purchase Tiers and Bonuses

Here's a breakdown of the purchase tiers and the bonuses they offer:

Package	Medal Amount	Price (USD)	Bonus Medals	Total Medals
Small	100	$0.99	0	100
Basic	500	$4.99	25	525
Standard	1,000	$9.99	260	1,260
Deluxe	3,150	$24.99	650	3150
Premium	5,000	$49.99	1300	6300
Ultra	10,000	$99.99	2,600	12,600

Example Zenless Zone Zero

Use this for a UI/UX layout consideration. Each icon is distinct and large with bold text for the amounts with colored highlights showing the bonus received on larger packages.. Replace the orange markings with our amount and the word monochrome with our premium currency Medals. Prices should match the table provided above.

Clicking one of these may go directly to apple/android payment approval and would require the player to approve the payment. Apple/Android will send them the appropriate receipt for their records.