End-to-end design of a B2B payments app
Fintech app for IBAN transfers and multi-currency payments — shipped to production in 8 weeks, scaled to MVP2 within months.
Key poins
Project overview
A B2B-focused fintech app for international transfers across European markets, supporting IBAN payments, multi-currency operations (GBP, EUR), and crypto. Designed for both individual and corporate clients, with KYC at registration. The app launched mobile-first, then expanded to responsive web — and is now live in production with an active growing user base.
Team · product designer (me), 3 developers · PM · System Analyst · CEO
Platforms · Native mobile-first → responsive web
Market · UK, European
Client · UK-based fintech (under NDA)
IMPORTANT! Commercial information, screens and confidential data in this project are protected by an NDA; therefore, some parts will be shown censored or in general terms.
8
weeks
from audit to production
800+
screens
in design flow
~1
month
of developer time saved through design system
My Role
I was the sole Product Designer on the project, owning the entire design process end-to-end.
What I owned:
  • Product audit and competitor benchmarking
  • Design strategy and direction (presented directly to the client in English)
  • Information architecture and user flows across 7 sections
  • Design system from scratch — tokens, components, patterns
  • All UI design across mobile and responsive web
  • Annotated handoff and ongoing design support during implementation
  • Design QA on production builds
Challenge
A fintech MVP built from scratch in 8 weeks — no existing design system, no prior user research, no design support. The regulatory layer required KYC for individuals and corporates with AML-aware design.
The Send Money flow alone produced 20+ variations across four payment networks (SWIFT, SEPA, Faster Payments, CHAPS), two client types, and multiple thresholds. I presented all design decisions directly to the UK-based client in English.
Approach
With no time for traditional user research, validation came through competitive analysis, audit insights, and tight technical collaboration.
  1. Audit
Mapped every screen of the existing product and documented pain points.
2. Competitors
Presented audit and design direction directly to the UK client in English
3. Presentation
Defining key touchpoints and functionality
4. Design system
Built atomic components and tokens before main design
5. Flows design
800+ screens across 7 sections, every state documented.
6. Technical loops
Every flow validated with product team during design, not after.
7. Annotations
Each screen annotated in Figma — the design was the spec
Key design decisions
Adaptive payment flow
Problem. 20+ fields in one modal, dynamically changing by payment type, amount, and client type. The interface jumped, the modal could be accidentally dismissed.
Decision. Sequential stepper on a dedicated page. Each step revealed only the fields needed for previous selections. Exit triggered a confirmation dialogue.
Outcome. Users move linearly, never lose data. Support requests on payment flows dropped meaningfully (exact metric under NDA).
Key design decisions
AI-readable design system
Problem. Three developers without design background, 800+ screens in 8 weeks.
Decision. Atomic system with explicit tokens (spacing, typography, colour) and self-documenting components. Annotations structured to be parseable by AI tooling.
Outcome. Developers fed the system into AI coding assistants and shipped consistent UI without back-and-forth. ~1 month of dev time saved. Zero design revisions after final handoff.
Key design decisions
Self-extending system
Problem. MVP2 (Cards section) on the roadmap — adding new sections later risked breaking consistency.
Decision. Design system built around scalable patterns, not fixed screens — with clear rules for new flows, states, sections.
Outcome. When MVP2 launched, developers added the entire Cards section independently — fully consistent with the rest of the product.
Key design decisions
Every state as documentation
Problem. Fintech UI is high-stakes — every missing edge case means a developer guesses.
Decision. Every screen designed across all states: default, empty, loading, error, success, blocking, and edge cases like password attempt limits.
Outcome. Only two clarification questions from developers across the entire implementation phase.
Outcomes
✅ Shipped to dev part in 8 weeks
✅ 5+ months live with an active and growing user base
✅ Scaled to MVP2 — Cards section added by developers independently
✅ ~1 month of developer time saved through design system and annotations
✅ Only 2 clarification questions from developers during implementation
✅ Positive client and support team feedback — fewer user complaints
What I took from this project
Investment in design system and annotations before main design pays back many times over — and working without traditional research forces stronger validation loops with analysts and engineering, which turned out to be a different but useful signal.
Deep documentation made the team autonomous: developers needed me for hard decisions, not routine ones. Compressed timelines reveal what your process is actually built on — mine turned out to be system thinking first, screens second.
Made on
Tilda