# PayGo Merchant Mobile App — UI/UX Screen Specification & Designer Handoff ## 1. App Architecture, Brand Identity & Global Design System This design specification establishes the visual and functional UI/UX requirements for the merchant-facing mobile application of the **PayGo** (also known as *PayWise Pay*) digital payment system. Designed specifically for retail store cashiers, branch managers, delivery drivers, and kiosk operators, the app prioritizes extreme speed, simplicity, and visual clarity. It replaces traditional hardware POS terminals with a software solution that allows merchants to collect payments effortlessly via Tap & Pay, QR codes, and digital payment links. ### 1.1 Brand Identity & Color Palette The visual design maintains brand alignment with the overarching PayWise ecosystem while establishing a crisp, modern identity for the PayGo product line. The core visual identity pairs vibrant brand colors with clean white space and high-contrast typography to ensure instant legibility in high-traffic retail environments. * **Primary Action Color (Pay Blue)**: `#0A52C6` — Used for core structural elements, primary branding, navigation headers, and active state highlights. * **Accent & Success Color (Go Green)**: `#00C853` — Used for success states, transaction confirmation banners, and key interactive triggers such as payment collection buttons. * **Secondary / Surface Color**: `#F4F6F9` — Off-white background tone providing clear separation for input cards, keypad containers, and modal sheets. * **Text & Typography**: Clean, modern sans-serif typeface (such as Inter, Roboto, or SF Pro). Primary text in dark slate (`#1E293B`), secondary labels in cool grey (`#64748B`). ### 1.2 Device Linking, Provisioning & Access Model Unlike customer-facing wallets that require individual user authentication, the merchant mobile app is structured as an operational point-of-sale terminal tied to a business account. Cashiers and branch employees must be able to open the app and instantly initiate transactions without typing passwords or performing biometric checks at every startup. The device onboarding and operating workflow operates according to specific architecture rules: 1. **Centralized Registration & Device Provisioning**: Merchant business owners manage registered devices via the primary PayWise web portal (`register.paywise.co`). The portal supports multi-device provisioning for businesses operating across multiple branch locations, kiosks, or delivery fleets. 2. **Device ID & Key Binding**: To initialize a new phone or tablet, the app presents a clean setup screen requesting a Device ID and Device Key generated by the web portal. Once paired, the app remains linked to the merchant's account. 3. **No-Friction Daily Access**: Once initialized, opening the app bypasses authentication screens directly to the transaction entry keypad. This ensures standing in line or accepting payments on the road takes only seconds. 4. **Read-Only Profile Permissions**: Cashier devices operate under a read-only profile mode. Sensitive account settings—such as modifying linked bank accounts or initiating manual withdrawals—are restricted to the primary web portal. ### 1.3 Global Layout Structure & Persistent UI Elements Every screen in the merchant app follows a standardized container structure to ensure layout consistency across mobile phones and tablet displays. | UI Component | Position | Functional Description | Visual Guidance | | :--- | :--- | :--- | :--- | | **System Bar & Header** | Top Fixed (44px/56px) | Displays branch/device name, currency badge (TTD / USD), and network connectivity indicator. | Dark slate text over clean background; subtle bottom border divider. | | **Main Content Stage** | Center Flex Area | Primary workspace displaying keypad inputs, QR codes, or transaction outcome states. | Clean card-based elevation with soft drop shadows (2px blur). | | **Bottom Navigation Bar** | Bottom Fixed (64px) | 3-tab persistent bar: **Collect** (Home), **History** (Log), and **Settings** (Device Profile). | Icon + text label format. Active tab highlighted in Pay Blue. | ### 1.4 Screen Saver & Idle Animation Mode When the merchant application remains inactive for a set period, the display transitions into a brand-building idle state. This state functions both as a visual screen saver and as a customer-facing brand signifier indicating that the merchant accepts digital payments. * **Visual Element**: An animated version of the PayGo logo where the blue "Pay" and green "Go" elements dynamically merge together. * **Tagline Display**: Below the animated logo, the customer-facing promotional slogan **"Pay and go your way"** is displayed in clean typography. * **Wake Condition**: Tapping anywhere on the screen instantly dismisses the animation and returns the app to the active Amount Entry screen with the numerical keypad ready for input. --- ## 2. Screen 1 — Amount Entry & Payment Collection (Home Screen) The Amount Entry screen serves as the primary home screen of the PayGo merchant app. Its single objective is allowing the operator to enter a purchase total and initiate customer collection in the fewest possible taps. ### 2.1 Display Header & Amount Counter * **Device & Location Badge**: Top-left text label indicating the current active branch or device name (for example, *GTC — Town Center Mall Kiosk*). * **Currency Selector Dropdown**: Top-right toggle pill indicating active currency (*TTD* or *USD*). * **Large Amount Display Area**: Prominent numerical readout centered in the upper third of the screen. Standard state shows `$0.00` in light grey text; active typing scales up to bold dark slate digits (`#1E293B`, 48pt font). ### 2.2 Numerical Keypad Grid & Input Rules * **Grid Layout**: 4x3 responsive keypad matrix containing large, touch-friendly touch targets (minimum 64x64dp). * **Key Assignments**: Standard 0–9 digits, a Clear (`C`) key, and a Decimal (`.`) key. * **Tactile & Haptic Feedback**: Tapping keypads provides haptic vibration and light background color change to prevent input errors. ### 2.3 Action Hierarchy & Collection Buttons The collection triggers are prioritized according to payment method frequency in face-to-face retail transactions: * **Primary Button 1 (Tap & Pay — Default Selection)**: * *Style*: Full-width container styled in Go Green (`#00C853`) with white bold text and a stylized contactless NFC wave icon. * *Behavior*: Tapping immediately activates the phone's internal NFC reader and opens the contactless listening modal. * **Primary Button 2 (Display QR Code)**: * *Style*: Full-width container styled in Pay Blue (`#0A52C6`) with white bold text and a QR code icon. * *Behavior*: Generates a dynamic transaction QR code on screen for the entered amount. * **Secondary Action Link (Generate Payment Link)**: * *Style*: Text link placed centered beneath the main action buttons: *"Or generate & send payment link"*. * *Behavior*: Opens the link generation modal for remote sales, delivery drivers, or customer service inquiries where the customer is not physically standing in front of the counter. --- ## 3. Screen 2 — Dynamic QR Code & Link Sharing Presentation When the cashier selects "Display QR Code" or "Generate Payment Link", the app transitions to Screen 2. This screen presents the customer-facing payment visualizer, formatted for easy scanning from across a retail counter or for digital transmission via messaging platforms. ### 3.1 Screen Layout & Component Specifications The layout features a modal card that isolates the payment payload against a softened background. | Layout Component | Visual Specs | Functional Requirement | | :--- | :--- | :--- | | **Transaction Header Card** | Rounded white card, centered | Displays the exact amount due in bold text (for example, `TTD $150.00`) alongside the merchant business name. | | **Dynamic QR Code Container** | High-contrast white square frame (240x240dp) | Renders a high-density, dynamically generated QR code encoding the transaction payload. | | **Status Spinner & Pulse Indicator** | Animated pulsing green ring around QR container | Visual feedback signaling that the payment gateway is actively listening for customer authorization. | | **Action Button Group** | Horizontal icon button stack | Includes **WhatsApp**, **SMS**, and **Copy Link** buttons to share payment URLs instantly. | | **Cancel / Reset Action** | Subdued text button at screen bottom | *"Cancel Transaction"* button to abort the payment request and return to Screen 1. | ### 3.2 Dual-Screen & Web Portal Signal Indicator For retail counters equipped with a dual-screen setup or an auxiliary customer-facing display screen, Screen 2 includes a secondary screen broadcast status icon in the top header. * **Signal Status Badge**: Green dot labeled *"Secondary Screen Active"* when linked to a secondary counter display or web portal instance. * **Automated Screen Mirroring**: When active, generating a QR code on the cashier's phone automatically broadcasts the identical QR graphic and payment total to the customer-facing auxiliary screen. --- ## 4. Screen 3 — Transaction Outcome & Audio Notification State Upon completion of a payment attempt—whether via Tap & Pay, QR scan, or digital link—the application immediately transitions to Screen 3 to deliver unambiguous visual and auditory confirmation to both the cashier and customer. ### 4.1 Visual Outcome States The UI uses visual color coding to convey payment status instantly, eliminating cashier uncertainty during peak business hours. #### Success State Design * **Header Color & Graphic**: Vibrant Go Green (`#00C853`) background banner featuring a large animated checkmark icon. * **Transaction Summary**: Bold text displaying total amount received, payment method used (such as *Tap & Pay (VISA Token)*), timestamp, and unique PayWise transaction reference ID. #### Declined / Failed State Design * **Header Color & Graphic**: Crimson Red (`#D32F2F`) background banner featuring an error exclamation icon. * **Failure Explanation**: Clear text stating failure reason (such as *Declined by Card Issuer*, *3DS Verification Failed*, or *Connection Timeout*). ### 4.2 Audio Notification Feedback System To support busy retail settings where cashiers cannot pause to look at the screen, Screen 3 integrates a configurable audible notification system: * **Audio Output Trigger**: Plays an audible confirmation chime or verbal voice synthesis (*"Payment of 150 dollars successful"*) immediately upon receiving the gateway response. * **Settings Toggle**: Cashiers can enable or disable audio notifications via the app settings screen or via a direct browser link configuration. ### 4.3 Post-Transaction Cashier Actions Two high-priority action buttons dictate the workflow immediately following a transaction response: * **Show Receipt Button**: Opens an overlay displaying a digital receipt formatted specifically for quick visual inspection or for taking a smartphone picture (a common practice among store clerks forwarding proof of payment to managers). Provides immediate secondary triggers to share the receipt via WhatsApp, email, or digital print drivers. * **Return Home Button**: Instantly resets the application state, clears the numerical entry field, and returns the cashier to Screen 1 for the next customer in line. --- ## 5. Screen 4 — Transaction History & Digital Receipt Log Screen 4 provides a searchable record of all incoming store transactions, allowing clerks and managers to verify past payments, audit daily totals, and re-issue receipts. ### 5.1 Transaction Log Table Layout The history log is structured as a scrollable list categorized chronologically by date. | Column / Data Field | Visual Display Format | Functional Requirement | | :--- | :--- | :--- | | **Status Badge** | Green dot (*Success*), Red dot (*Declined*), Amber dot (*Pending*) | Enables fast visual filtering while scanning historical records. | | **Transaction Details** | Customer name/card mask, Payment Method icon | Identifies payment rail (Tap & Pay, QR Code, or Payment Link). | | **Timestamp** | `HH:MM AM/PM` | Exact local time transaction was recorded by gateway. | | **Amount & Currency** | Bold text right-aligned (`+ $150.00 TTD`) | Summarizes transaction value credited to merchant account. | ### 5.2 Digital Receipt View & Export Overlay Tapping any individual transaction item opens the Digital Receipt Detail Sheet. This sheet contains the complete transaction record: * **Merchant Header**: Business Name, Device Name, Location, Branch ID. * **Payment Specifications**: Card Brand (VISA/Mastercard), Tokenized Card Mask (`**** 4821`), 3DS Authorization Code, Transaction Ref ID. * **Fee Allocation Indicator**: Notes whether processing fees were absorbed by the merchant or allocated to the customer. * **Export Actions**: Action buttons to **Export PDF**, **Share via Messaging**, or **Print Receipt**. --- ## 6. Screen 5 — Merchant Settings, Device Profile & Operational Tools Screen 5 gives the store operator view-only visibility into their device registration status and provides operational controls for daily store management. ### 6.1 Read-Only Merchant Profile Panel To prevent unauthorized store clerks from altering core financial configurations, profile data is displayed in a secure read-only container: * **Business Identity**: Official business account name (for example, *Global Trade Co. / GTC*). * **Device Identification**: Assigned branch device label (for example, *Eastgate Mall Branch — Cashier 1*). * **Settlement Details**: Linked local bank account summary (target 1 business day settlement window for TTD and USD processing). ### 6.2 Operational Settings & Feature Toggles * **Audio Notification Toggle**: Switch allowing the cashier to enable or disable audio chimes and voice confirmations. Includes a link to copy/paste configuration URLs for browser-based setups. * **Payment Fee Allocation Selector**: Visual indicator displaying whether transaction fees are deducted from merchant settlement or charged to the customer. * **In-App Hotspot Sharing Feature**: A dedicated operational button allowing merchants to share their cellular data hotspot directly from within the app. This ensures customer phones can connect and complete QR or link payments in locations with weak indoor cellular reception. * **Customer Referral QR Code Display**: Generates a shareable QR code that merchants can present to new customers to direct them to download and register for the PayWise customer app. --- ## 7. Designer Handoff & Prototype Checklist To ensure a seamless transition from this specification document to high-fidelity Figma screen designs and interactive prototypes, graphic designers should verify their deliverables against the following functional checklist: 1. **Color Contrast & Accessibility**: Ensure all text elements meet WCAG AA contrast ratios, specifically for green success indicators (`#00C853`) and blue primary action buttons (`#0A52C6`) against white card backgrounds. 2. **Keypad Touch Targets**: Verify numerical keypad buttons meet minimum 64x64dp touch area guidelines to prevent cashier mistyping during fast-paced checkout. 3. **Screen Resolution Support**: Design screen layouts responsively for standard mobile aspect ratios (19.5:9 mobile phones) and compact 8-inch store tablets. 4. **State Coverage**: Provide distinct artboards for all core screens across normal, active input, loading/processing, success, declined, and idle screen-saver states.