PayFlow Labs — Simulating payment flows for designers and startups
How I designed and built an interactive UX simulator for payment flows — covering real-world apps, multiple gateway types, and edge cases — to help designers research best practices and give startups a risk-free way to explore payment options before building.
PayFlow Labs — Web App & UX Simulator for Payment Flows
Platform
Next.js · Supabase · Vercel
Tech
Claude Sonnet · Google OAuth · GitHub
My Role
Product Designer & Full-Stack Developer
Background
Designers needed a hands-on way to understand how payment flows actually work
Payments are one of the most critical touchpoints in any digital product — and one of the least well-understood from a design perspective. Most UX resources treat payment as an afterthought, defaulting to credit card flows and ignoring the full landscape of how people actually pay today.
PayFlow Labs was built to fill that gap. It's an interactive UX simulator for payment flows — a tool where designers can explore real-world payment examples, interact with different gateway types, and stress-test edge cases, all without touching a line of production code.
Beyond credit card, the modern payments ecosystem includes QR codes, biometrics, cryptocurrency, reward points, FPX bank transfers, and voucher-based checkout. Each gateway has its own UX patterns, failure states, and user expectations — and there was no single resource where designers or early-stage startups could explore all of them side by side.
How might we give UX designers and startups a hands-on, risk-free environment to explore payment flows across multiple gateway types — including edge cases — before committing to implementation?
App Features
Everything a designer needs to understand modern payments
PayFlow Labs covers the full breadth of how payments work in the real world — from the apps consumers use to the gateways that process transactions, all the way through to what happens when things go wrong.
Real-World Payment Apps
Explore interactive flows from Shopify, Amazon, Airbnb, GrabPay, Shopee, and more. Each simulator shows how leading products handle the checkout experience end-to-end.
Payment Gateway Types
Covers the full spectrum: Credit Card, Biometric, FPX, QR Pay, Crypto, Reward Points, and Voucher Code. Each gateway has its own flow, feedback states, and UX considerations.
Edge Case Library
Real products fail. PayFlow Labs includes simulations of connectivity issues, refund flows, low-fund states, and cancellation handling — the scenarios that define the quality of a payment experience.
Payment UX Ebook
A condensed, designer-focused guide called 'Mastering Payment UX Design' — built into the platform so designers have reference material alongside the simulator.
UX Approach
How PayFlow Labs came to life
01
Research & Ideation
It started with a genuine design problem — I wanted to study payment UX flows more deeply. I prompted Claude to surface case studies from real payment apps and build out examples of flows across different gateway types. The result shaped the initial product scope.
02
Build & Integrate
Claude generated the core web application. The code was exported into Antigravity for further development — refining the landing page, login flow, and dashboard. Google OAuth was connected to Supabase for authentication and user data management.
03
Test & Ship
The app was tested with a UX Design colleague to validate usefulness and usability. After refinements, the production build was prepared and deployed to Vercel via GitHub. The full cycle — from idea to live product — was completed efficiently.
Product Design Patterns
Design patterns that make the simulator work
The simulator's value comes not just from the content it covers, but from how it presents that content. Three core design patterns drive the experience.
Simulator
Mobile simulator view
A mobile frame wraps each payment flow, giving designers a true first-person perspective of the interaction. Seeing the flow as a user would see it — on a phone — builds genuine UX intuition.
States
Success & error states
Every interaction has a visible outcome. Success states confirm completion. Error states provide clear visual cues and helper messages. Both are part of the simulator — because both happen in production.
Loaders
Loading states
Payments involve processing time. UI loaders simulate that wait, giving designers exposure to the in-between moments that define how safe and trustworthy a payment experience feels.
Edge Cases
Failure scenarios
Connectivity drops, insufficient funds, and cancelled transactions are simulated as real flows — not just documented. Designers can interact with failure states the same way users would.
Tech Stack
Built fast with a modern, production-ready stack
PayFlow Labs was built to be production-ready from the start — not a prototype. The stack was chosen for speed of development without sacrificing quality or scalability.
1
Next.js — Application Framework
The web application is built on Next.js, giving the product server-side rendering, fast page loads, and a clean routing structure for the simulator and dashboard sections.
2
Shadcn UI & Tailwind CSS — Design System
Shadcn UI components paired with Tailwind CSS provided a consistent, accessible component foundation. This allowed rapid UI iteration without sacrificing design quality.
3
Claude Sonnet — AI-Assisted Development
Claude Sonnet was used throughout the build process — from generating initial application code to structuring the payment flow content. This accelerated development significantly while keeping the output high-quality.
4
Google OAuth & Supabase — Auth & Database
Google OAuth handles user authentication, with Supabase as the core database. This gives users a frictionless login experience and gives the product a scalable backend from day one.
5
GitHub & Vercel — Deployment
The codebase is version-controlled on GitHub and deployed to Vercel via continuous deployment. Every push to main is live in seconds.
User Journey
Getting users from the landing page to their first interaction
The user journey for PayFlow Labs is deliberately simple. The goal was to remove every possible barrier between landing on the page and reaching the simulator — because the simulator is where the value is.
1
Login Flow
The landing page surfaces a clear 'Get Started' CTA. Users sign in with Google — a single click, no form filling — and land directly in the dashboard. The onboarding is invisible by design.
2
Interactive Simulator
Inside the dashboard, users click any payment app or gateway method to launch the simulator. The interaction is immediate — no instructions needed. The interface guides users through the flow naturally.
Design Impact
What PayFlow Labs delivered
PayFlow Labs was tested with a UX Design colleague shortly after launch. The feedback was immediate and clear — the interactive simulator format made complex payment concepts genuinely easy to understand and explore.
50%
Estimated time saved in wireframe research with built-in UI examples and helper text
7+
Payment gateway types simulated in a single platform — from credit card to crypto
0
Lines of production code needed for designers to explore edge cases and failure states
Beyond the time savings, PayFlow Labs helps designers identify and fix potential UX problems before they reach production. The edge case library is particularly valuable — most designers don't encounter cancellation flows or low-fund states until they're reviewing a live product.
Takeaways
01
Add more payment app flows and refine the simulator UI. The foundation is solid — the next phase is breadth. More apps, more gateways, and a more polished simulator interface.
02
Build a custom design system for the simulator. The current implementation uses Shadcn as a base. A bespoke design system tailored to the simulator's unique interaction patterns would elevate the experience further.
03
Enable real-user testing functionality. The long-term vision is for startups to use PayFlow Labs as a testing tool — sharing simulator links with real users and collecting feedback before committing to a gateway integration.
04
Release a Figma UI Kit. A companion component library of payment UI components would extend PayFlow Labs beyond a simulator and into a full design resource for the payments space.