Skip to main content
DubHub Mobile App

DubHub

The mobile app for online competitive and gambling style games. Featuring an e-wallet, instant virtual cards, seamless account linking, and winnings that bank back.

dubhubwallet.com
Figma React Native FinTech Mobile App Product Design
Company DubHub LLC
Timeline 8 Months
Platform iOS & Android
Deliverables Mobile App | E-Wallet
Jake Arciniega

Product Designer | Front-End Developer

Ramsin Samuel

Mobile Developer

Amar Amgalan

Backend Engineer

John Wong

Head of Product

01

Problem

The owner of Antique Games reached out with a recurring complaint from his online player base: there was no effective way to buy in-game credits without leaving the moment of play. Players were stuck on generic, web-only checkouts that treated every credit purchase as a one-off transaction -- type in a personal debit card or hand over direct bank-account details every single time, complete a separate browser purchase, then manually transfer the tokenized credits into the game before they could actually play. There was no stored payment, no spending controls, and no native pipe between the player's wallet and the cabinet ledger -- the rails that would eventually be run by DubHub's partner, gateway.market.

Online gamers hated using their personal cards. Many were teens and young adults on shared family accounts, players who didn't want a string of small "arcade" charges on their primary debit statement, or repeat customers who didn't feel safe entering their full card number into a one-off portal night after night. With no stored payment, no spending controls, and no way to cap a single session, the friction was killing repeat play -- and the operator's revenue.

Solution

DubHub replaced the entire web-portal flow with on-the-fly, gaming-only virtual cards issued straight from the DubHub app. Players never expose a personal debit card again. Instead, they fund the experience from their DubHub Wallet checking account or DubHub Visa, and spin up a fresh virtual card -- with any limit they choose -- the moment they're ready to play. $10 for a quick session, $50 for a tournament night, $200 for a group buy-in: the player sets the cap, the card is minted instantly, and it's locked to Gateway Market merchants only.

Because Gateway Market already ran on tokenized rails nearly identical to DubHub's, the integration was clean. The virtual card funds the purchase, Gateway's webhook drops the credits into the game's ledger automatically, and the manual "transfer credits into the game" step disappears entirely. One tap inside one native app, and the player is in -- backed by Gbank (Member FDIC) infrastructure so every transaction stays fully compliant.

"We wanted to build the wallet app we wished existed. Something you open, do what you need, and close. No noise, no upsells, just your money."

-- Product Vision Statement, DubHub LLC
02

Understanding Users

DubHub was built for a specific player: people putting real money into online competitive games and gambling-style titles. Before DubHub, those players bought credits through a generic web portal, and the flow leaked users at every step. To add credits they had to open the portal, type a full card number by hand, and — because the portal couldn't reliably pull funds — bounce out to their own banking app to move money before bouncing back to finish the purchase. For transactions this small, that round trip was far too much friction.

Two things made it worse. First, it didn't feel safe: players were keying their personal debit and credit cards into a third-party gaming portal, and most of them simply didn't want their own cards exposed to it. Second, there was no account behind any of it — credit top-ups were inconsistent and one-off, and when a player won, their winnings had nowhere to land. There was no balance to return to, so there was no reason to come back.

Before DubHub — the old portal

We instrumented the legacy purchase flow and ran a cohort study on return behavior. The funnel told the first half of the story: of everyone who set out to buy credits, only 21% made it all the way to playing — a 79% drop-off, with the steepest losses exactly where players had to enter their own card and then leave for their banking app. The cohort chart told the second half: retention varied with spend in the worst possible way. The biggest spenders came back the least regularly, while low-spend players churned outright or only resurfaced much later. With no account to hold winnings, 58% of players churned or lapsed entirely.

After DubHub — the in-wallet flow

DubHub replaced the portal round trip with a single in-wallet purchase backed by a stored virtual card and a real account. Players never expose a personal card, never leave for their banking app, and winnings bank straight back into the wallet. The same two measurements flipped. The purchase funnel went from 21% to 92% completion — players finish in-app with no card re-entry. And because there's finally a balance to return to, retention evened out across every spend tier: high rollers, mid-spend regulars, and casual players all come back, lifting regular return from a churn-heavy 42% of players to 91%.

03

The Logo and Brand

This brand was designed from scratch. I needed to ideate the customer base for gambling and competitive gaming where winning money was key. Dub -- which is short for winning and also short for double-u "W." The Hub meaning the digital bank and location where they would manage and collect their funds. Then the diamond in the center, the classical casino graphic everyone knows, represents high value and success. I kept this brand dark-themed as a standard to keep the experience for users less strained, which resonates perfectly as the opposite of playing flashing, bright screens for several hours during gaming. I chose the Kanit font family as it represented a digital-style brand with boxy yet rounded edges -- a typographic match for the "digital casino floor" feel.

DubHub logo: the word DUB with a diamond replacing the U in HUB

Typography — Kanit

Kanit was selected for its squared geometry softened by subtle terminal curves -- a balance of precision and warmth that reads as "digital, but not cold." The family is used across every DubHub surface, from the wallet app to the marketing site at dubhubwallet.com, in six core weights with selective italic use for emphasis.

Aa Bb Cc
Kanit · Bold 700 · the brand display weight
DubHub
Light · 300
DubHub
Regular · 400
DubHub
Medium · 500
DubHub
SemiBold · 600
DubHub
Bold · 700
DubHub
ExtraBold · 800

Type Ramp

H1 / Display
Pay your way.
H2 / Section
Built for the wins.
H3 / Title
Virtual cards, on demand.
Body
Spin up a fresh card for any session. Set the limit, lock it to the merchant, and play -- no personal card ever leaves your wallet.
Small / Meta
FDIC-insured via Gbank, Member FDIC. Card issued under license.
Button / CTA
Add Credits
Win. Save. Repeat.
Italic 400 · in-line emphasis
Tournament Night
Italic 600 · promotional callout

Usage Rules

Do

Pair Bold 700 display type with a generous -2% letter-spacing for headlines. Stick to weights 400, 500, 600, and 700 for 90% of surfaces.

Do

Use Kanit Medium 500 for in-app navigation and tab labels. Uppercase only for buttons, eyebrow labels, and meta text.

Don't

Don't use Kanit Light 300 below 18px -- the thin strokes drop out on dark backgrounds at mobile sizes.

Don't

Don't mix Kanit with other display fonts. Body copy can fall back to Poppins or system-ui, but headlines stay Kanit.

Design Approach

The design philosophy was "one screen, one action." Every flow was mapped to ensure users could complete their primary task without navigating away or encountering modal interruptions. We iterated through 4 rounds of wireframes, progressively stripping away elements until only the essential interface remained.

1

Competitive Audit & User Research

Analyzed 12 fintech wallets, conducted 30 user interviews, and surveyed 200+ potential users to identify core pain points around onboarding friction, card wait times, and feature overload.

2

Information Architecture & Flow Mapping

Defined a flat navigation structure with three primary paths: Virtual Card, Send/Receive, and Link Account. Created user flow diagrams ensuring no task required more than 3 taps from the home screen.

3

Prototyping & Usability Testing

Built interactive Figma prototypes and ran 3 rounds of usability tests with 15 participants. Onboarding time dropped from 7 minutes (competitor average) to under 3 minutes after each iteration.

4

Visual Design & Developer Handoff

Established a clean, light-mode design system with clear visual hierarchy. Delivered pixel-perfect specs and component library to the React Native engineering team for cross-platform implementation.

04

Tried and True, First.

The soul of the DubHub product comes from the other BEST Card Solutions brand -- T&P Shield. An extremely robust and expansive vision of banking software that utilizes accounts from a high level to be defined by the customer, marketed as white-label for clients for features requested (APIs), budgeting for spending with each account type, and designed with organic security features built in.

This was built and validated on years of user research from the merchant side of payment processing, thousands of hours of user testing, and a test group of 5,000 users. Utilizing excessively fancy screens, animations, modern UI, and anything comparable to the current market was a no-go for the companies we were targeting. All components and design elements were presented to be interchangeable and turn-key.

T&P Shield app store screenshots: the BEST Card Solutions banking platform that DubHub's product DNA was inherited from

User flow diagram

Login Create Account Two-Factor Auth KYC Intro ID Verification (Berbix) Choose ID Type Front Photo Back of ID Scan Barcode Selfie Scan Verifying Identity Create Password Wallet Home Central hub - balance, links, money Link Bank Account Select Link Options Plaid Intro / Bank Form (Manual) Select Institution / Verify Deposits Account Linked Success modal Wallet (Linked) Account Detail Link Debit Card Link Card Form Confirmation Charge Card Linked Success modal Wallet (Linked Card) Card Detail Move Money Add Withdraw Transfer Send

Complete UI

Every screen in the shipped DubHub product — onboarding, KYC, linking, wallet states, Plaid flow, and Move Money.

DubHub login screen Create account form Two-factor authentication KYC intro screen Berbix choose ID type Berbix take front photo Berbix back of ID instructions Berbix scan barcode camera Berbix selfie scan step Verifying identity loading Create password screen Wallet home empty state Link accounts selector for debit card flow Link card form Confirmation charge modal Card successfully linked modal Link accounts selector for bank flow Select link options Plaid or manual Link bank account manual form Verify deposits confirmation modal Bank account successfully linked modal Plaid intro screen Plaid select institution with bank logos Plaid success screen Side menu with Home, Notifications, Profile, Contacts, Settings, Legal, and Logout Account transactions page with balance, filter tabs, and transaction list Wallet showing linked Chase account Chase checking account detail with show/hide fields Wallet showing linked Visa card Visa card detail with show/hide fields Move Money Add tab active Move Money Withdraw tab active Move Money Transfer tab active Move Money Send tab active

Clickable Prototype

Tap the action buttons below the phone to walk the entire flow — onboarding, linking, Plaid, and Move Money.

Current prototype screen
05

Reflection

DubHub launched on both iOS and Android, quickly gaining traction in the mobile wallet space. The minimalist approach resonated with users, driving strong adoption and retention:

Instant Virtual Card Issuance

Users go from download to a funded, usable virtual card in under 3 minutes, eliminating the days-long wait for physical cards that competitors require.

Frictionless Fund Transfers

Peer-to-peer transfers complete in seconds with a 3-tap flow. Bank account linking supports any standard U.S. national bank, giving users full flexibility.

Tokenized Security Layer

$1.8M in monthly tokenization volume demonstrates strong user trust. FDIC-backed through Gbank partnership ensures regulatory compliance and deposit protection.

The minimalist design philosophy paid off. By focusing on just four core features, DubHub achieved a 65% download-to-active-user conversion rate, significantly outperforming industry averages. The streamlined onboarding and instant virtual card access drove rapid adoption, while the clean transaction experience kept users coming back.

With $600K in monthly processing and $4.2M in yearly revenue, DubHub proved that doing less -- but doing it exceptionally well -- creates a sustainable fintech product. The product continues to grow with plans for multi-account support and expanded payment integrations.

10K
Downloads
65 %
Conversion Rate
$ 4.2 M
Yearly Revenue
Partnership Spotlight

Gateway Market × Antique Games

A real-world validation of the DubHub model: when an operator needed a payment surface for online gamers, the same on-the-fly virtual card logic became an entire revenue channel.

+ +

Six months after launch, the Antique Games partnership (problem and solution detailed in the Overview) went live with Gateway Market as the cabinet-ledger partner. The flow below is how the three systems hand off in production.

How the Three Systems Connect

DubHub Wallet

Player's stored checking account & DubHub Visa fund every transaction. No personal debit card ever leaves the device.

Gaming-Scoped Virtual Card

App mints a single-session card with a player-set limit, locked to the Gateway Market merchant ID. Disposable, traceable, scoped to gaming only.

In-Game Auto-Redemption

Gateway's ledger receives credits in real time via webhook. Player is playing within seconds of tapping "Add Credits".

Before vs. After

Before · Web Portal Only

gateway.market checkout

  • Avg. time to complete a credit purchase4m 32s
  • Cart abandonment at card entry47%
  • Monthly credit transactions3,200
  • Native app downloads0
  • Monthly active players1,800
  • Avg. credits per session$12
  • Re-entry of card per visit100%
  • Manual credit-to-game transferRequired
After · DubHub Native Integration

DubHub x Gateway in-app

  • Avg. time to complete a credit purchase11s -96%
  • Cart abandonment at card entry8% -83%
  • Monthly credit transactions14,500 +353%
  • Native app downloads (90 days)28,400 +28.4K
  • Monthly active players9,400 +422%
  • Avg. credits per session$34 +183%
  • Re-entry of card per visit0% eliminated
  • Manual credit-to-game transferAuto

Key Learnings

The biggest lesson from DubHub was that constraint breeds better design. By committing to "one screen, one action" from day one, we avoided the feature creep that derails most fintech products. Every feature request was evaluated against a simple question: "Does this help users send, receive, or manage their money faster?" If not, it went to the backlog.

Working within the fintech regulatory landscape also reinforced the importance of designing for trust. Micro-interactions like confirmation animations, clear error states, and transparent fee disclosures aren't just polish -- they directly impact whether users feel safe transacting through the app. The partnership with Gbank meant every design decision had compliance implications, which taught me to collaborate early and often with legal and engineering stakeholders rather than designing in isolation.

The Gateway Market × Antique Games partnership later reinforced a second lesson: composable wallets unlock entire categories that web checkouts can't. A native, stored-payment surface didn't just speed up gaming credit purchases -- it created a customer relationship that hadn't existed before. Designing the wallet as a primitive other operators could plug into turned out to be more valuable than designing it as a destination.

Next Project

Shield Mastercard

View Case Study

Let's Work Together