CodePay · Fintech Startup · 2025.07 — Now
Designing Decision Infrastructure
in High-Risk Payments
Founding designer building a cross-product design system, refactoring high-trust workflows, and shipping a fast feedback-to-release loop across two payment products.
Role
Founding Designer + PM
Scope
Design System · Risk-aware UX · End-to-End Ownership
Tools
Figma · Figma Make · AI-assisted workflow
Industry
Fintech
Impact
What shipped, what changed
Scale
7,000+
Active terminals processing ~400K weekly transactions
Onboarding
~30%
Reduction in setup complexity through guided stepper redesign
Adoption
6,000+
Terminals running the v3.0 rebuild post-launch
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.”
Challenge → Strategy
Why it’s hard, and how we responded
Three structural pressures shaped the work. Each one demanded a different response — read across the rows to see the pairing.
High-risk payments
Mistakes cost money and trust. Every interaction with the payment flow carries real financial consequence.
Patch Track
Risk-ranked fixes from real feedback. Guardrails and validation that solve what’s urgent today.
Multi-product scaling
Inconsistent states, definitions, and patterns across products made coherent experience impossible.
Platform Track
Rebuild the system in parallel with staged rollout. Feature flags, gradual migration, one source of truth.
Limited resources
Must patch what’s broken today while rebuilding the entire system for tomorrow.
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
Prioritize in our requirement pool
The pipeline
From noisy requests to high-leverage fixes
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 principles became the connective tissue across the work — guiding the patches below, and recalled in every rebuild that follows.
Four design principles
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
Refund screen updates in real time as selections change: remaining refundable amount, per-item breakdowns, and running total all reflect the current state instantly.
Ops Platform v2.5.0
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
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; edits happen on a separate management page. Same content, different intent, different surface.
Ops Platform v2.5.1
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. Merchants often didn’t register the remaining balance to collect.
Decision
Surfaces the remaining amount and next steps immediately, without an extra tap. Skip is still accessible, but no longer the path of least resistance.
Payment App v2.1.8
What patches couldn’t reach
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.”
Cross-Product Design System
Before designing anything, I built the thing that makes design scalable. Built a cross-product foundation on top of an open-source library, reskinned with brand tokens: colors, type scale, spacing. One source of truth for everything across all products.
Build the thing that makes design scalable, before designing anything.
PayPilot
Partner Ops Platform — 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.
Shared UI with management → high cognitive load
Onboarding reuses management screens directly, so setup users see features they don't need yet. Focus and cognitive load both suffer.
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.
Three structural moves, each pictured in turn.
01 · Guided stepper
Stepper and footer provide clear progress and system status; validation gates progression so the CTA only activates when all required inputs are complete.
02 · Management out of onboarding
Decoupling management from onboarding prevents context switching and distraction. Clear separation ensures onboarding remains focused, linear, and completion-driven.
03 · Completion criteria, explicit
Explicit status feedback builds confidence and reduces ambiguity; inline recovery actions enable quick resolution without restarting the flow.
One IA decision that looks small but isn’t.
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.
Process Deep-dive
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.
2 days
From PRD to a working prototype in front of the team
100+
Iterated versions before exporting to Figma
Define structure & constraints
Build mid-fi flows fast
Iterate with interactive prototypes
Refine & finalize in Figma
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.
30%cut in estimated setup effort, internal test
Register
Payment App — v3.0 UI/UX Rebuild
UX/UI Design Lead. Collaborated with PM on product direction; worked within engineering constraints on transaction logic that couldn’t change.
The market context was simple: 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 at this scale, 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.
7,000+
Active terminals
400K+
Weekly transactions
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 — the tools available were clarity, hierarchy, and sequence.
Foundation
Register Component Library
Building on the cross-product design system, I built a Register-specific component library. 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.
Two decisions shaped the whole rebuild.
Decision 01
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
Before
After
Decision 02
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
The rest follows the same language. Edge cases considered.
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
6,000+
Terminals running v3.0
Streamlining staff workflows and reducing operational errors based on post-launch user feedback.
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→