CodePay · Fintech Startup
B2B Payment System
Designing Decision Infrastructure in High-Risk Payments — building a cross-product design system, refactoring high-trust workflows, and prototyping AI-first experiences.
Industry
Fintech
Timeline
2025.07 - Now
Role
Founding Designer + PM
Tools
Figma, Prototyping, AI-assisted workflow
My Scope
Design System, Risk-aware UX, End-to-End Ownership
Impact
Scale
7,000+
Active terminals processing ~400K weekly transactions
Onboarding
~30%
Reduction in setup complexity through guided stepper redesign
User Growth
3x
User growth in 2 months (B2B2B POC), ~85% engaged session rate
Support
~20%
Drop in partner support inquiries from operational feedback improvements
GTM
Interactive AI-driven prototypesvia vibe coding to help stakeholders align on value, risk controls, and roadmap priorities for external pitching. Official website + pitch assets that standardized messaging & reduced sales “explain cost.”
Why It’s Hard
High-risk payments
Mistakes cost money and trust. Every interaction with the payment flow carries real financial consequence.
Multi-product scaling
Inconsistent states, definitions, and patterns across products made coherent experience impossible.
Limited resources
Must patch what's broken today while rebuilding the entire system for tomorrow.
Strategy: Dual-Track Delivery
Patch Track
Risk-ranked fixes from real feedback — guardrails and validation that solve what's urgent today.
Platform Track
Rebuild the system in parallel with staged rollout — feature flags, gradual migration, one source of truth.
Prototype & AI Workflow
Rapid demos + AI-assisted iteration to run tight build-measure-learn loops: align, test, ship.
Patch Track
“I turned noisy requests into high-leverage fixes with guardrails and consistent state patterns.”
Lots of needs from customers
Organize & prioritize in our requirement pool
From noisy requests to high-leverage fixes
Small iterations, fast launch, aligned with expectations
Four Design Principles
Principle 1: Make system state always visible
When people are moving fast, they fill in the gaps. An ambiguous system doesn’t pause anyone — it just gets interpreted, often wrong. Showing the right state at the right moment is the cheapest form of error prevention.
Problem
System previously only supported full refunds. Adding partial refund meant staff had to make decisions with no feedback on selections or remaining amount.
Decision
The refund screen updates in real time as selections change: remaining refundable amount, per-item breakdowns, and the running total all reflect the current state instantly. Ops Platform v2.5.0
Principle 2: Prevent errors before they happen
The best error message is the one that never appears. The earlier you catch a mistake — through structure, constraints, and real-time feedback — the less damage it can do.
Problem
Manual card entry had no field-by-field guidance. Staff could move between fields without completing them correctly.
Decision
Redesigned with auto-focus jump logic, input highlighting, and confirm disabled until all fields pass validation. Payment App v2.1.7
Principle 3: Reduce cognitive load at the moment of action
Attention is finite. Every extra element competing for focus at a critical moment is a cost paid in mistakes and slowness. Good design doesn’t ask people to ignore what’s irrelevant — it just doesn’t show it.
Problem
Configuration template options could be edited in place, creating ambiguity about whether changes affected current setup or saved template.
Decision
Split into two distinct contexts: the template panel during configuration only allows applying a template, not modifying it. Any edits to saved templates happen on a separate management page with a different layout. Same content, different intent, different surface. Ops Platform v2.5.1
Principle 4: Keep dangerous actions reversible and distinct
Not all actions are equal, but they can easily look that way. When something can’t be undone, or carries consequences beyond the current screen, the interface should make that difference felt — not just stated.
Problem
Partially approved transactions used the same visual language as completed ones — a checkmark, confirmation color. Merchants often didn’t register remaining balance to collect.
Decision
Redesigned to surface the remaining amount and available next steps immediately, without an extra tap. Skip is still accessible, but it’s no longer the path of least resistance. Payment App v2.1.8
Patches solved what was urgent — but revealed harder problems. The design files had no shared system: every fix siloed, no source of truth, nothing cleanly handed off. And structurally, the information architecture had problems that incremental changes couldn’t reach. The only path forward was a rebuild.
Platform Track
“I reduced design debt and improved consistency via componentized IA and a governance-ready system.”
Foundation
Built a cross-product foundation — an open-source library reskinned with brand tokens: colors, type scale, spacing. One source of truth for everything across all products.
Onboarding Restructure
Role: UX Design & Information Architecture
Led rapid prototyping using AI-assisted tooling (Figma Make) to accelerate alignment across PM and engineering.
The Core Problem: Nobody could learn it without training
False completion signal
Users are told they've 'completed' onboarding, but still need to perform critical setup steps — creating confusion and mistrust in system feedback.
Onboarding embedded in management
Setup tasks are scattered across management pages with unrelated tabs, forcing users to navigate back and forth without a clear path.
No guided flow or progress tracking
There is no structured onboarding journey, checklist, or progress indicator — users cannot tell what's done, what's missing, or when they are truly finished.
The Solution
The fix was structural: collapse everything into a three-step guided stepper, strip management actions out of the onboarding context entirely, and make completion criteria explicit at every step.
Stepper + footer provide clear progress and system status
Validation gates progression — CTA only activates when all required inputs complete
Explicit status feedback builds confidence and reduces ambiguity
Inline recovery actions enable quick resolution without restarting flow
Decoupling management from onboarding prevents context switching
Clear separation ensures onboarding remains focused, linear, completion-driven
Navigation Design
Linked sidebar navigation reduces friction in long, scroll-heavy forms. Sub-stepper introduces granularity, making complex setup easier to track and complete.
Engineering Constraint Adaptation
When engineering scope changed, the design had to adapt. The original plan unified all onboarding steps in one platform. Engineering confirmed it wasn’t feasible for this release — a key step had to live in a separate system. The revised approach: instead of asking users to find it themselves, that step became a direct deep-link into the exact right place in the other platform. One click, no navigation overhead. The constraint stayed invisible to the user.
On Using AI to Move Faster
This project was IA-heavy and multi-page, with a PM who needed to review and iterate quickly. The traditional approach — design in Figma, export, review, revise — was too slow for the pace we needed. I chose Figma Make specifically because it outputs something interactive: PM could click through flows directly, engineering could flag feasibility issues early, and I could react to real feedback instead of guesses.
Within 2 days of a PRD brief, there was a working prototype in front of the team. I iterated on 100+ versions before it went to the export step.
Define structure & constraints
Build mid-fi flows fast
Iterate with interactive prototypes
Refine & finalize in Figma
AI Tradeoff Reflection
The tradeoff I didn’t fully anticipate: Figma Make builds its own token structure. Visually close to the design system, architecturally separate. Some issues — misaligned states, broken component logic — were faster to rebuild from scratch than to fix inside the AI output.
AI accelerated the decisions, not the craft. The hard parts — flow logic, edge states, what to show and what to hide — still required human judgment at every step. What changed was how quickly we could get those decisions in front of the right people.
Result
Internal test: cutting estimated setup effort by 30%.
UI/UX Rebuild
Role: UX/UI Design Lead
Collaborated with PM on product direction; worked within engineering constraints on transaction logic that couldn’t change.
Market Context
Most POS apps for small businesses are overdue for a rethink. Cluttered interfaces, unclear system states, high support ticket volume from merchants who couldn’t figure out what went wrong — these were industry-wide symptoms. For a product running on 7,000+ active terminals processing 400K+ weekly transactions, the cost of friction isn’t abstract. Every extra tap, every misread state, every confused staff member is a real operational problem for a real business.
v3.0 had one goal:rebuild it so it’s fast enough for a rushed cashier, clear enough to learn without training, and consistent enough to scale.
Transaction and payment logic was off-limits — those layers couldn’t change. This rebuild was mainly UI, interaction design, and information architecture. The tools available were clarity, hierarchy, and sequence.
Foundation
Built a component library on top of an open-source foundation — navigation bars, custom keyboards, buttons in every state, list rows, status chips, data display modules — then locked the tokens: colors, type scale, spacing rhythm. Every screen that came after was built from these pieces.
Split one screen into two
The solution wasn’t simplification — it was separation of concerns.
Before
- One screen serves two audiences (staff + customer)
- Cost breakdown and tip input mixed
- Blurred responsibility leads to confusion and errors
After
- Split flow by role: staff vs customer
- Staff confirms payment; customer selects tip
- Clear handoff reduces errors and aligns with real-world interaction
Let state drive the interface
Before
- Key status and transaction type buried in dense fields
- Requires full reading to understand context
- High cognitive load before taking action
After
- Status surfaced first with clear, combined indicators
- Type and result visually encoded for quick recognition
- Scannable layout enables instant understanding without deep reading
Edge Cases & Real-World Variability
Handles large amounts, long fields, and overflow gracefully. Maintains clarity across extreme states (failed, voided, partial flows). Designed for real-world variability, not just ideal paths.
Post-Launch
Streamlining staff workflows and reducing operational errors based on post-launch user feedback. Across 6,000+ terminals.
0-to-1 Product (PM Role)
“I turned ambiguity into a product with a clear position, trackable behavior, and a roadmap merchants could trust.”
The hardest part: the product wasn’t missing features. It was missing a foundation. No shared data definitions. No usage tracking. Noisy demand with no long-term anchor. And a B2B2B structure where the end user is two hops away. My job was to close all four gaps while shipping.
Data Integrity
Problem
Same fields, different meanings. Merchants couldn't reconcile the app with their bank.
Action
Audited and aligned data definitions across product, eng, and ops — before writing a single new spec.
Invisible Usage
Problem
No tracking existed. Every prioritization call was a guess dressed up as a decision.
Action
Designed event taxonomy from scratch — the first product in the company with structured analytics.
Scattered Demand
Problem
Real requests, no long-term anchor. Everything felt equally urgent — so nothing got prioritized well.
Action
Made the case to the CEO to prioritize product depth over POC growth. Built a prioritization framework that balanced merchant needs against dev capacity.
Indirect Feedback Loop
Problem
B2B2B meant the merchant was two hops away. Feedback arrived late and filtered.
Action
Routed discovery through partner leads who aggregate across many merchants, filter signal from noise, and speak the product language. Turned the structural distance into a better research layer.
GTM Narrative
“I standardized messaging through website + pitch assets to reduce sales 'explain cost.'”
Built reusable GTM assets in collaborative platforms — interactive AI-driven prototypes via vibe coding to help stakeholders align on value, risk controls, and roadmap priorities for external pitching. Official website and pitch assets that standardized messaging and reduced the cost of every sales conversation.
Design Principles
State Visibility
Show the right state at the right moment. Ambiguity doesn't pause anyone — it just gets interpreted, often wrong.
Error Prevention
The best error message is the one that never appears. Catch mistakes early through structure, constraints, and real-time feedback.
Cognitive Load Reduction
Attention is finite. Good design doesn't ask people to ignore what's irrelevant — it just doesn't show it.
Reversibility
Not all actions are equal. When something can't be undone, the interface should make that difference felt — not just stated.
Takeaways
Payments UX = trust & risk management
Status visibility, error prevention, and reversibility matter more than visual polish. In high-risk payments, trust is the product.
Data truth is a product surface
Semantic rigor — time ranges, definitions, consistent terminology — is what makes dashboards believable and decisions possible.
Dual-track delivery is a founding designer's real job
Patch keeps trust today; platform rebuild enables scale tomorrow. The skill is knowing which to prioritize at every moment.
AI should be an acceleration layer for decision loops
But only with guardrails, confirmation, and traceability. AI accelerated the decisions, not the craft.
Thanks for reading
View More Projects→