Paid24/7: Three-Stage FinTech Transformation from Validation to Production Code

The Project

Client: Paid24/7 - Building "WeChat Pay for Telegram"
Challenge: Pre-launch validation and UX implementation
Solution: Three-stage transformation process
Delivery: Production-ready React code

---

How They Found Me

Philipp, the founder of Paid24/7, discovered me while searching for the designer behind Ramp Network - one of web3's leading on/off ramp providers that I designed years ago. Ramp won a UX award at Ethereum's Devcon and went on to raise $120M+, becoming an industry standard.

This pedigree in FinTech UX - specifically in making complex crypto and payment flows simple - made me a natural fit for Paid24/7's ambitious vision of bringing WeChat Pay-style functionality to Telegram.

The Three-Stage Journey

Stage 1: Design Sprint & User Testing (10 Days)

Using the Deep Work Studio methodology I developed across 70+ projects during the 2021-2022 web3 boom, we ran a structured validation sprint:

Days 1-3: Knowledge Extraction Workshops

• Facilitated sessions with founders to extract domain knowledge
• Aligned on product vision, user flows, and priorities
• Created shared language and mental models

Days 4-6: Rapid Prototyping

• Translated workshop insights into interactive prototypes
• Focused on core onboarding and money transfer flows
• Created country-specific variations for testing

Days 7-10: User Testing & Discovery

• Conducted 6 comprehensive testing sessions
• Observed real users attempting core tasks
• Captured friction points and opportunities
• Full report: View detailed user testing presentation

What User Testing Actually Revealed

Core Idea Resonates: Testers want quick, borderless payments with less friction than PayPal/Revolut.

Straightforward Fixes: Confusion mostly stems from jargon, unmarked buttons, or unclear KYC. Clear these, and the flow becomes smooth.

Unique Edge: No sign-up for recipients, user ownership, and chat integration.

High Potential: A bit more polish, and testers said they'd adopt—and even evangelize—Paid24/7.

Next Steps: Refine the copy, highlight our advantages, streamline KYC, and invite users with confidence. We're on the cusp of turning curiosity into a strong user base.

"I'd switch if it's that simple and if I trust it. Also, owning a piece is cool."
— User testing participant on what would make them switch

Stage 2: Code-First Implementation (1 Week)

After the successful design sprint, Paid24/7 expanded their team. When it came time to build the actual onboarding flow, they didn't hire a full-time designer or outsource to an agency - they came back to me.

Why? Because I don't deliver Figma files. I deliver code.

What Got Built in 1 Week

Multi-Currency Account System:

// Actual React components in their codebase
<AccountCard 
  currency="CHF" 
  balance={balance}
  active={selectedCurrency === 'CHF'}
/>
<AccountCard 
  currency="USDT" 
  balance={cryptoBalance}
  active={selectedCurrency === 'USDT'}
/>

TON Blockchain Integration:

• Non-custodial USDT accounts via TON blockchain
• Connect wallet flows with plain language
• No "gas" or "contract" mentions - just "Send Money" and "Receive Funds"

Production Handover:

• Complete developer handover website: paid247-design.vercel.app
• Interactive React demos, not static prototypes
• Country-specific user flows implemented
• All edge cases handled

The Workflow

My approach using modern AI tools:

1. Claude/ChatGPT - Research and copy generation from user testing results
2. Cursor/Claude Code - 80% of design time, direct codebase work
3. Figma - Visual polish refinements only

Each iteration: Prompt → Test in browser → Refine → Commit

Stage 3: KYC Provider Adaptation

External KYC providers required specific onboarding flow changes for compliance. Instead of starting from scratch, we iterated:

First Iteration: onboarding-flow.html
Second Iteration: onboarding-new.html

Both delivered as working code that could be immediately integrated.

Why This Case Study Matters

This is a pre-launch product, so there are no conversion metrics or revenue numbers. Instead, this case study demonstrates something arguably more valuable: how to build a complex FinTech product right from the start.

What We Achieved

✅ User testing-validated design before production code
✅ Critical UX issues caught before they could impact real users
✅ Complex flows simplified - blockchain and KYC hidden behind intuitive UX
✅ Production-ready React code delivered, not theoretical Figma files
✅ Complete developer handover with all edge cases handled
✅ Successful relationship - client returned for stages 2 & 3

The Code-First Advantage

Traditional Approach:

Weeks in Figma → 
Handoff to developers → 
Months of "that's not what the design showed" → 
Ship something halfway between design and reality

My Approach:

User testing insights → 
Direct implementation in React → 
Production-ready code with edge cases handled → 
Team deploys exactly what was designed

Key Takeaways for Technical Founders

1. Validate Before You Build

Our 10-day sprint revealed issues that would have seriously impacted adoption. But we didn't spend months on research - we got answers and moved forward.

2. Skip the Figma Theater

Your engineering team doesn't need more mockups. They need working code that integrates with their stack.

3. User Testing Quotes Are Gold

That single quote - "I only want one button" - informed the entire redesign. Real user feedback beats assumptions every time.

4. The Right Process Matters

• Structured workshops extract domain knowledge efficiently
• User testing with real people reveals real problems
• Code-first design eliminates handoff delays
• Daily progress keeps momentum alive