Crypto · Fintech · Web & Mobile · 2025

Pay.io

Designed the infrastructure layer for crypto payments.

View the product
Pay.io cover

Role

Product Design · Research

Year

2025

Outcome

$100B+ market opportunity

Read

8 min read

Pay.io is a multi-currency business payments platform. As the Product Designer, I worked with a team of Product Manager, Engineers, QA and Compliance to deliver an end-to-end UX redesign of core financial workflows.

"This was a financial product where accuracy, trust, and clarity were critical."

01

The Business Opportunity: Tapping into a Billion Dollar Market

The global iGaming market sits around $100–103 billion in 2025–2026 and is heading toward $133–169 billion by 2029–2030. Crypto is the fastest-growing slice inside it.

  • Crypto Gambling Revenue

    Crypto gambling gross gaming revenue (GGR) hit roughly $81 billion in 2025, with Q1 2025 alone seeing $26 billion in crypto bets. Some forecasts put the crypto-specific gambling vertical above $150 billion by the end of 2025/early 2026.

  • Explosive Growth

    Crypto iGaming grew at 38% CAGR from 2019–2024 and continues to outpace fiat-only operators.

  • Market Leaders

    A single crypto-first operator (Stake.com) reported $4.7 billion GGR in 2024 — bigger than many Vegas casino giants.

Crypto users already account for 20–30%+ of transactions on many platforms, and that share is rising fast because crypto players bet more, stay longer, and churn less.

02

Understanding the Problem

Crypto payment is new and business operators could not clearly manage, track, or reconcile financial actions across deposits, withdrawals, and multi-currency balances — leading to transaction errors, delayed reconciliation, and eroding trust in the platform.

  • Compliance Requirements (KYC/AML)

    Mandatory identity verification flows for every business operator account. Anti-money laundering screening on all transactions above defined thresholds. Full audit trail requirements for regulatory reporting across jurisdictions.

  • Technical API Limitations

    Real-time balance updates constrained by asynchronous blockchain confirmations. Multi-provider crypto payment routing introduced latency in transaction state syncing. Legacy reconciliation logic created discrepancies between displayed and actual balances.

  • Security Expectations

    Operators expected visible confirmation of every fund movement with no silent failures. Strict access controls required for multi-user merchant console environments. PCI DSS compliance mandated specific data handling and display restrictions.

  • Timeline & Scope Pressure

    12-week delivery window to ship redesigned core transaction flows. Parallel workstreams with engineering on API v2 migration limited design iteration cycles. Phased rollout required backward compatibility with existing merchant integrations.

03

What Are the Competition Doing?

Providers focus on high-risk tolerance, fast settlements, broad coin support (especially stablecoins like USDT/USDC on TRON/Solana), low fees, non-custodial options, and compliance tools (AML/KYC where required). The market favors gateways that handle volatility hedging, instant payouts, and integration with casino platforms.

What Are the Competition Doing?
  • Trends Driving Competition

    Non-custodial + stablecoin/TRON/Solana focus (near-zero fees), instant fiat off-ramps. AML tools without blocking high-risk, and seamless casino integrations (e.g., one-click deposits).

  • Threats

    Tightening regulations (MiCA EU, Curaçao updates) favor licensed players like CoinsPaid/BitPay. Volatility and chain congestion remain issues — top providers hedge/auto-convert.

  • Opportunity Zones

    There's a window in non-custodial, stablecoin-optimized, or self-hosted models.

  • In-house Advantage

    Hub88 — We have a network of traditional providers and suppliers to leverage and onboard into crypto.

04

Research: Insights from the Field

Core research finding: Fintech users don't want more features; they want fewer steps, clearer feedback, and absolute confidence in every financial action they take.

Research: Insights from the Field
  • Phase 1 — Research Methods

    Conducted 6 semi-structured interviews with business operators and finance managers using Loop11.com. Focused on daily workflows: payments, transaction management, balance monitoring, and reporting. Identified recurring pain points around transaction visibility and multi-step actions.

  • Phase 2 — Key Insights

    "Execute, don't explore": users arrive with a specific task and want the shortest path to completion. 78% of sessions focused on just 4 core actions: check balance, send & receive payment, manage assets, review transactions. Users rarely navigated to secondary features unless prompted by a specific business need.

  • Phase 3 — Design Strategy

    Precision-first UI: surface exact balances, clear transaction states, and unambiguous status labels. Task-oriented architecture: restructure navigation around the 3 core actions users perform daily. Immediate feedback loops: every action triggers a visible confirmation or status update.

  • Behavioral Analytics

    Analyzed session recordings and heatmaps across core financial flows. Tracked task completion rates, drop-off points, and navigation patterns. Mapped feature usage frequency to identify underused vs. critical paths.

  • Clarity Signals

    Users abandoned flows when transaction states were ambiguous (pending, processing, failed). Trust eroded when numerical formatting was inconsistent across currencies. Operators expected real-time feedback on every financial action taken.

  • Design Principles

    Reduce cognitive load by eliminating unnecessary feature exposure on primary screens. Prioritize numerical legibility with consistent formatting, hierarchy, and spacing. Design for trust through transparency: no hidden states, no silent failures.

05

User Types

The platform serves three core user types: Casino & iGaming operators, Business operators, and Merchants managing crypto deposits, withdrawals, and multi-currency fund movements through the Pay.io Merchant Console.

06

Mapping a New Information Architecture

The platform is split into two main interfaces: Merchant Console (asset control, transaction management, reports) and Cashier UI (withdrawals, transaction history, deposits). Navigation was restructured around how business operators actually think and work.

Mapping a New Information Architecture
Mapping a New Information Architecture
Mapping a New Information Architecture
  • Surface Critical Actions First

    Balances and pending transactions are visible immediately upon login, eliminating the need to navigate deeper.

  • Group by Intent, Not Feature

    "Managing" covers oversight and configuration; "Executing" covers active financial operations, matching how business operators think.

  • Clarify Transaction States

    Every transaction displays a clear, real-time status (Pending, Processing, Completed, Failed) to eliminate ambiguity.

  • Reduce Cognitive Load

    Flattened hierarchy from 4 navigation levels to 2, ensuring any action is reachable within two taps.

07

A Scalable Design System

Unified system powering Pay.io's Cashier, Dashboard, and API interfaces. Built from Design Tokens (color & typography, spacing & dimensions, effects) → Core Components (actions, forms & selection, content display, indicators & status, containers, feedback & navigation) → Component Variants (state patterns, currency formats, headers, navigation bars, pagination, steppers, cards, etc.).

A Scalable Design System
  • Reusable Components

    Standardized across Cashier, Dashboard, and management interfaces.

  • Token-Driven Theming

    Ensures consistent color, typography (optimized for numerical legibility), and spacing across all product surfaces.

  • Multi-Currency Formatting

    Variants handle symbol placement, decimal precision, and locale-specific display patterns.

  • State-Specific Variants

    For every interactive element: default, hover, active, disabled, error, and loading states.

  • Compliance-Ready Patterns

    Embed KYC and AML visual cues directly into component behavior, not as afterthoughts.

08

High Fidelity Design — Onboarding

A simple onboarding process to get users to experience the platform. Enable assets: Merchants get to experience firsthand the multi-currency crypto enablement. Assets that they want their users to transact with are added and relevant networks are enabled.

High Fidelity Design — Onboarding

09

High Fidelity Design — Homepage

Merchants can see their wallet balance, wallet activity and recent transactions.

High Fidelity Design — Homepage
  • Hot Wallet Balance

    Merchants can view their direct user deposits, transfer it to custodial wallet and deposit into it.

  • Hot Wallet Activity

    Merchants will be able to monitor wallet activity across various timeframes.

  • Asset Holdings

    A simple view for merchants to see their enabled assets allocation. Here they can see how much each asset holds as against the total amount in their wallet.

  • Recent Transactions

    Merchants can track user transactions across assets.

10

High Fidelity Design — Report

Merchants will be able to view user activity, financial report, payment performance and wallet.

High Fidelity Design — Report

11

High Fidelity Design — Transaction Management

Merchants can manage the transaction of cashier users, admins and withdrawal requests.

High Fidelity Design — Transaction Management
  • Withdrawal Request

    Merchants should have the control to manage withdrawal manually within a certain threshold.

  • User Transaction

    Here, merchant can manually retry failed transactions and monitor user transactions.

12

High Fidelity Design — Asset Management

Merchants will be able to enable/disable assets, deposit and transfer to treasury wallet, set up treasury wallet and withdraw from the platform. They can also set withdrawal limits.

High Fidelity Design — Asset Management

13

High Fidelity Design — Cashier UI

This is the interface that the end user can use to deposit and withdraw crypto from their account.

High Fidelity Design — Cashier UI
High Fidelity Design — Cashier UI

14

Collaborating with Engineering

Collaborating with engineering to bridge the gap between design vision and technical constraints. A continuous iteration cycle for financial precision.

  • Design Proposal

    Translated research insights into detailed interaction specs for each financial flow. Created annotated prototypes covering transaction states, error handling, and edge cases. Documented expected responses and data dependencies for every screen.

  • Engineering Review

    Engineers assessed feasibility against real-time constraints and database architecture. Flagged latency risks for live balance fetching across multi-currency accounts.

  • Constraint Resolution

    Redesigned the funds transfer flow to use optimistic UI updates with background validation. Replaced synchronous balance checks with manual refresh trigger.

  • Validated Handoff

    Delivered production-ready specs. Conducted joint QA walkthroughs to verify every state matched the design intent. Maintained a shared decision log documenting each trade-off and its rationale.

15

Impact

As the product gets accepted by merchants outside our target group, we are iterating the product to meet more needs and become the go-to payment gateway for merchants.

  • First week of launch saw 5 merchants waiting to be onboarded.
  • Average time to complete core transactions (send funds, issue cards) reduced from 4.2 to 3.3 minutes.
  • Users reached critical actions 40% faster due to resurfaced navigation hierarchy.

16

Reflection

  • What Initially Failed

    Over-designed the transaction detail view with too many data fields visible at once, overwhelming operators who needed quick status checks. Underestimated multi-currency edge cases where simultaneous balance updates across wallets caused UI state conflicts and displayed stale data. Initial confirmation patterns were too subtle for high-stakes actions like fund transfers, leading users to repeat actions due to uncertainty about completion.

  • What I Learned

    Currency rounding errors, pending transaction states, and failed payment retries are not exceptions but core scenarios that must be designed for upfront. Users equate visual precision (correct decimal places, explicit state labels) with platform reliability. Backend constraints shape UX — real-time balance APIs had latency; designing "optimistic UI" with clear loading and reconciliation states was essential. Operators think in workflows, not screens.

  • Future Opportunities

    Enable scheduled exports and dashboards so operators can monitor cash flow without manual tracking. Provide compliance teams with searchable, time-stamped records of every financial action and approval chain. Proactive notifications for anomalous patterns, failed payments, or balance thresholds to reduce reactive troubleshooting. Tailor default views for different operator roles (finance manager vs. account admin) to surface the most relevant data immediately.

Result

$100B+

iGaming market tapped with crypto as the fastest-growing vertical.

End-to-end UX redesign of core financial workflows — giving operators full visibility over hot wallets, sweep logic, and merchant settlements.