🧩 Overview

Designed a multi-platform fintech ecosystem including mobile apps, web portal, and CMS, supporting payment operations, user management, and internal workflows.

The system was built on a microservices architecture, handling high-volume transactions with multiple user roles and complex business logic.

🚨 Problem

The system needed to support a growing financial ecosystem but faced major UX challenges:

• Complex workflows across multiple platforms (App, Web, CMS)

• High cognitive load for internal operators handling transactions

• Fragmented user experience between different roles (Agent, Customer, Admin)

• Difficult onboarding for new staff due to system complexity

• Lack of consistency across products built on top of distributed services

👉 Meanwhile, the backend system was already highly complex:

• Microservices architecture

• API Gateway + Kafka (sync & async flows)

• Multiple data sources (PostgreSQL, MongoDB, Redis)

👉 This created a key challenge:

How to design a simple, intuitive UX on top of a highly complex system architecture

🎯 Goals

• Simplify complex financial workflows

• Improve efficiency for internal operators

• Unify experience across multiple platforms

• Design scalable UX aligned with microservices architecture

• Reduce user errors in transaction handling

👤 Users

Primary Users

• Internal staff (Admin, Accounting, Operations)

• Agents (via mobile app & web portal)

Secondary Users

• End customers using payment services

🏗 System Context (Important)

The platform includes:

• Mobile Apps (Agent & Customer)

• Web Portal (Agent operations & reconciliation)

• CMS/Admin System (full system control)

All connected through:

• API Gateway (authentication, routing)

• Microservices (User, Payment, Worker...)

• Kafka (asynchronous processing)

👉 This required UX to:

• Handle real-time + async states

• Reflect system status clearly

• Support multi-role access

🔍 Process

Research & Analysis

• Analyzed internal workflows across departments

• Worked with PM & Dev to understand:

  • Transaction lifecycle

  • Payment processing logic

  • System constraints (API, async flows)

👉 Key insight:

UX problems were not only UI issues, but also caused by system complexity

Information Architecture

Re-structured the system into clear modules:

• Dashboard

• Transaction Management

• User Management

• Reporting & Analytics

• System Configuration

👉 Aligned UI structure with backend microservices domains

Design & Iteration

• Built user flows for:

  • Transaction handling

  • User verification

  • System monitoring

• Designed:

  • Complex data tables

  • Dashboards

  • Multi-role interfaces

• Iterated based on:

  • Internal user feedback

  • Technical constraints

✨ Key Design Decisions

1. Designing for Microservices Complexity

• Mapped backend services → frontend modules

• Reflected system states (success, pending, failed, async processing)

👉 Result: Users understand system behavior without needing technical knowledge

2. Handling Asynchronous Flows (Kafka-based)

• Designed clear status indicators:

  • Processing

  • Completed

  • Failed

• Added feedback loops for delayed actions

👉 Result: Reduced confusion in transaction states

3. Multi-role UX Optimization

• Customized UI based on roles:

  • Admin / Operator / Agent

• Reduced unnecessary actions per role

👉 Result: Lower cognitive load and fewer errors

4. Complex Data Visualization

• Designed advanced tables with:

  • Filtering

  • Sorting

  • Status tagging

• Prioritized critical financial data

👉 Result: Faster decision-making and monitoring

5. System-wide Design Consistency

• Built reusable components:

  • Tables

  • Forms

  • Modals

  • Status indicators

👉 Result: Consistent UX across App, Web, CMS

📱 Solution

Delivered a unified fintech ecosystem:

• Mobile apps for agents & customers

• Web portal for operations

• CMS/Admin system for full system control

All aligned with:

• Microservices architecture

• Scalable design system

• Multi-role experience

📊 Impact

• Reduced complexity in transaction workflows

• Improved efficiency for internal operations

• Increased clarity in system status and data handling

• Enabled scalable UX for a growing fintech ecosystem

⚠️ Challenges

• Translating complex backend architecture into simple UX

• Handling real-time vs asynchronous system behavior

• Designing for multiple user roles with different needs

• Ensuring consistency across multiple platforms

🧠 Key Learnings

• In fintech systems:

  Clarity and system feedback are more important than visual design

• UX must align with:

  • System architecture

  • Data flow

  • Business logic

• Designing CMS requires:

  • Deep understanding of internal workflows

• Collaboration with engineers is critical when working with:

  • Microservices

  • Event-driven systems