Overview

Finix Payments is a payment processor and infrastructure provider that enables software platforms, marketplaces, and merchants to accept, manage, and send payments. It acts as a comprehensive platform combining gateway and processing services, allowing users to handle online (e-commerce), in-person (POS terminals), and ACH transactions via a single API

I was the sole designer working on improving the UX for existing applications, while also working on 7 new applications within a span of a year. I also created a modular Figma component library to advocate for component-based architecture.

Challenge

Merchants were drowning in complex legacy payment systems, fragmented compliance tools, and rising operational costs while struggling to meet PCI, KYC, and AML requirements. Finix built a comprehensive application suite to solve these problems. Yet merchants complained of inconsistent experiences across disconnected tools, confusing workflows requiring constant app-switching, and steep learning curves for each system.

Key issues:

• Over 12k merchants on the platform had UX bottlenecks including wayfinding, onboarding and setup.

• Merchants want to focus on growing their core business and process payments easily without spending hours on learning how to use the platform.

• Merchants requested cost-effective payments integration while ensuring seamless compliance with PCI, KYC, and AML requirements.

"The goal of Finix is to make every business a payments infrastructure business and generate revenue by eliminating processing fees. "

-Ambar Pansari (Product Manager)

Key activities

1. Audit

An audit of the existing platform UI was conducted to identify inconsistencies, usability gaps, and design discrepancies that were contributing to merchant support tickets and operational inefficiencies.

Audit of previous applications

2. Heuristic reviews

Product teams requested a full heuristic review of the entire platform to identify usability issues and improvement opportunities. I conducted the review and presented findings to Product Managers to establish alignment on UX priorities and define focused areas for strategic design improvements.

Heuristic review for product alignment

3. Wireframes

Quick wireframes enabled rapid iteration and early feedback collection from Product Managers on multiple application initiatives.

Create merchant identity wireframe

4. High-fidelity designs

Approved flows were scaled to high-fidelity designs and reviewed with Product Managers and Developers. Iterative
improvements were made based on feedback.

High-fidelity design of merchant identity

5. Prototypes

Approved designs were developed into interactive prototypes that demonstrated complete user workflows and functionality, allowing product teams to experience the full merchant journey and provide comprehensive feedback on the proposed solutions before development began.

Onboarding application flows prototype

6. Reusable components

I created reusable components with atomic pieces that can be scaled across all platform applications, ensuring uniform functionality and appearance throughout the merchant experience.

Variants of the table component

8. Development

Figma components were systematically documented and handed off to developers with detailed specifications including spacing, states, interactions, and responsive behavior to ensure accurate implementation of the design system into functional, reusable code components.

Navigation component

Impact

• Significant UX improvements for 12 applications serving over 12k merchants.

• Delivering end-to-end flows for 7 new applications within a year.

• Consistent, brand-aligned reusable components that aligned with development.

• Streamlined onboarding and setup supporting over 1 billion API calls.