Digital Payments & Settlement Platform

Overview

A multi-category fintech platform designed to help individuals, independent professionals and small businesses make and collect payments using credit cards.

The product brought together payment processing, bill payments, card management, invoices, payment links, KYC, transaction tracking and settlement visibility within a single digital ecosystem.

I shaped the product experience from early requirements through the UX foundation—defining the information architecture, core journeys, interaction patterns, wireframes and system states that established how the product would work.

The resulting experience framework created a clear and scalable base for the final interface, combining complex financial functionality with an approachable and easy-to-understand product experience.

Project at a Glance

Industry: Financial technology

Platform: Mobile application and responsive web platform

Role: UI/UX Designer

Primary focus: Experience architecture, user flows, wireframing and interaction design

Users: Individuals, freelancers, professionals and small businesses

Collaboration: Product managers, business stakeholders, visual designers and engineers

Duration: Add project duration

The Product Opportunity

A large number of everyday and business-related payments still depend on fragmented processes.

Users may need to visit separate biller platforms, make direct bank transfers, share account information, create invoices manually or follow up independently to confirm whether a payment has been received.

The platform aimed to simplify this ecosystem by enabling users to make bill and service payments through credit cards, pay education fees and recurring expenses, create and share payment links, generate and manage invoices, track transactions and settlements, manage cards, profile information and verification, and access payment records and receipts from one place.

Although these features appeared connected from a business perspective, they involved very different user needs, information requirements and transaction states. The design challenge was to turn them into one coherent product.

The Experience Challenge

Financial products require more than a clear interface. They must continuously reassure users that their money, information and actions are being handled correctly.

The experience needed to answer five questions at every critical point: What am I paying for? Who will receive the payment? How much will I be charged? What is happening to the transaction? What should I do if something goes wrong?

The product also needed to support multiple participants and systems, including the payer, card issuer, payment gateway, biller, banking partner and final beneficiary.

Users did not need to understand this infrastructure, but the experience had to make the outcome of every transaction understandable.

My Role in Shaping the Product

My work focused on transforming a broad set of financial features and business requirements into a structured product experience.

I established the UX foundation across product information architecture, navigation and feature grouping, end-to-end payment journeys, payment-link creation, invoice and collection flows, card-management experiences, KYC and account-verification journeys, transaction and settlement tracking, dashboard organization, confirmation, failure and recovery states, responsive interaction patterns, and detailed wireframes for mobile and web.

The wireframes were designed not simply as layout references, but as working product specifications. They clarified what information appeared at each stage, which actions were primary or secondary, how users moved between features, how financial information was grouped, how system states were communicated, and how the experience responded to errors and incomplete actions.

This foundation guided the product’s interaction model and provided a clear structure for the visual expression of the final interface.

Working Process

1. Understanding the Ecosystem

I began by organizing the product requirements into user intentions, business functions and transaction dependencies.

This included reviewing the proposed product modules, understanding the different payment categories, mapping payer and beneficiary relationships, studying transaction and settlement stages, reviewing comparable fintech experiences, identifying repeated interaction patterns, discussing technical and business requirements with stakeholders, and documenting exceptions and high-risk scenarios.

This stage revealed that the product was not a collection of independent features. Every journey was connected through identity, payments, transaction history, settlement and support.

2. Structuring the Product

The product was organized around three primary user intentions: Pay, Collect and Track.

Pay covered bill, service, education, invoice or beneficiary payments. Collect covered invoices and shareable payment links. Track covered payments, collections, refunds and settlements.

Supporting areas included dashboard, cards, profile, KYC and verification, receipts, help and support.

This structure prevented the experience from feeling like a disconnected collection of financial tools.

3. Defining the Core Journeys

The primary payment journey followed this structure: select a payment category → enter biller or beneficiary information → add payment details → review the transaction → select or add a card → complete authentication → receive payment confirmation → track processing and settlement.

The payment-link journey followed a different intent: create a payment request → enter payer and invoice information → define the amount → generate the link → share it with the customer → track payment → receive settlement.

Structuring these flows early helped identify shared patterns, dependencies and missing states before the interface became visually detailed.

4. Building the UX Foundation

The wireframing phase established the functional and interaction logic of the product.

I focused on simplifying complex financial forms, breaking long journeys into understandable stages, reducing unnecessary decisions, making fees visible before authorization, separating payment status from settlement status, creating clear review and confirmation steps, establishing reusable patterns across payment categories, defining states for success, pending, failure and refund scenarios, and maintaining consistency across mobile and responsive web experiences.

The wireframes created a strong enough foundation for the product to develop a more expressive visual language without compromising usability, hierarchy or transaction clarity.

Key Design Decisions

Payment Success and Settlement Were Treated Separately

A successful card transaction did not always mean that the final beneficiary had received the money. The experience therefore distinguished between payment initiated, authentication pending, payment successful, processing, settlement initiated, settled, failed, reversed and refunded.

This reduced ambiguity and helped users understand where their money was at each stage.

Review Was Treated as a Critical Financial Step

Before confirming a payment, users could review recipient or biller information, payment purpose, transaction amount, convenience charges, applicable taxes, total card charge and settlement information.

The review screen was designed as a decision checkpoint rather than a routine confirmation page.

Different Payment Types Shared a Common Experience Model

Education fees, invoices, utility payments and professional payments required different information. However, the overall interaction model remained consistent: enter details → verify information → review charges → authorize payment → track status.

This made the system easier to learn while allowing each category to retain its specific requirements.

Trust Was Built Through Product Behaviour

Trust was reinforced through transparent payment breakdowns, clear recipient information, masked financial details, transaction reference numbers, visible settlement timelines, downloadable receipts, verification indicators, contextual support and actionable error messages.

The product did not rely on visual styling alone to appear trustworthy. Trust was built through clarity, predictability and transparent system feedback.

Outcome

The project established a coherent UX framework for a complex, multi-category fintech platform.

The experience foundation helped bring multiple financial services into one connected product, simplify high-friction payment and collection journeys, improve transaction and settlement visibility, establish reusable interaction patterns, strengthen review and confirmation experiences, provide clear states for failures, delays and refunds, create consistency across mobile and web interfaces, and give product, visual design and engineering teams a structured reference for execution.

The final experience combined a rigorous financial workflow with a more approachable and engaging visual layer, helping the product feel accessible without reducing the seriousness or clarity required in a fintech environment.

Due to confidentiality restrictions, specific business metrics and proprietary outcomes cannot be disclosed.

What This Project Strengthened

This project strengthened my ability to structure complex digital products, translate business requirements into usable journeys, design for regulated and high-trust environments, think beyond individual screens, anticipate edge cases and system states, build scalable experience foundations, communicate interaction logic through detailed wireframes, balance user simplicity with operational complexity, and work across product, business, visual design and engineering functions.