top of page

Redesigning Corporate Expense Management Platform: Full UX Story

Transforming a legacy fintech tool into a user-centered platform, reshaping how companies manage expenses, payments, and reporting.

My Role

Lead UX/UI Designer

Type

Professional work

Year

Oct 2024 – Present

Expense Management Platform

Go Back

Design System: Bridging Consistency and Customization

As part of the redesign, I created a dedicated CentreSuite Design System (DS) a UI library built to balance product-specific branding needs with development efficiency across TSYS's ecosystem.
The foundation of this system was based on ION, the master design system used across TSYS issuing products. However, CentreSuite’s distinct UI patterns and branding requirements made it essential to create a tailored version. Rather than force-fitting defaults, I selectively extended ION’s core components to build a cohesive, modular system that fit the CentreSuite experience.

Key Principles:

  • Consistency: Ensure familiar patterns across modules to reduce user learning curves

  • Efficiency: Reuse base components from ION to minimize front-end rework

  • Scalability: Allow future product teams to build features without design or dev bottlenecks

  • Customizability: Introduce CentreSuite-specific elements where ION didn’t meet user or brand needs
     

In collaboration with engineers, I documented and delivered components that were:

  • Aligned with ION tokens, spacing, and interaction models

  • Extended to include CentreSuite-specific behaviors, such as receipt-matching states, widget layouts, and reporting chips

  • Accessible, responsive, and developer-ready for seamless implementation

This design system helped reduce design–dev friction, improved cross-team velocity, and laid the groundwork for a consistent user experience across modules and personas.

Ion design system components used to create CentreSuite components

Few components from CentreSuite design system library

Tokenized Color System: Structure & Rationale

As part of building CentreSuite’s design system, I created a structured color variable hierarchy in Figma—divided into three layers: Base, Semantic, and Component.

  1. Base Colors (Raw Tokens): A full range of core colors like blues, neutrals (black/white/gray), reds, greens, yellows, each with multiple shades.
 → Example: Blue/100 (lightest) to Blue/900 (darkest), increasing in +100 steps
 These are the raw HEX values and serve as the foundation.

  2. Semantic Colors (Purpose-Driven): Mapped the base tokens to semantic meanings, such as:Text/Primary, Text/Disabled, Background/Surface, Border/Default, Action/Error, State/Success
 This layer ensures we’re assigning intent to color, not just visual styling—making the system scalable, brand-safe, and easier to theme across platforms.

  3. Component Colors: Tied directly to UI elements like buttons, badges, chips, and alerts.
 → Example: Button/Primary/Default, Input/Border/Error, Tag/Background/Success
 These are built using only semantic tokens, ensuring consistency and traceability across the system.

Color Tokens from CentreSuite design system

Why this structure matters? 

​

  • Consistency: Prevents designers and devs from using arbitrary HEX codes

  • Scalability: Easy to theme or rebrand without redesigning components

  • Accessibility: Centralizes control of contrast ratios and compliance

  • Dev-friendly: Tokens can be exported and synced with code environments

  • Future-proof: Semantic and component layers make the system adaptable for dark mode, theming, or white-labeling​​

Business Needs

From business perspective, the platform showed increasing friction in areas such as:

  • General task discoverability: users had difficulty finding and completing core actions like submitting receipts or making payments due to scattered navigation and inconsistent UI patterns

  • Visual clutter across flows: dense screens and dated layouts led to cognitive overload

  • Outdated architecture: legacy front-end components slowed development and limited consistency

 

The interface no longer reflected the expectations of today’s enterprise users, affecting confidence and efficiency.

Hence, the redesign aimed to:

  • Simplify complex workflows across user types

  • Improve visual clarity and reduce user friction

  • Modernize the interface to align with current fintech standards

  • Streamline front-end development through better alignment with a shared Master Design System, used across other TSYS products

  • Support modernization of APIs and improve integration with internal platforms

  • Create a scalable, unified foundation for future feature growth

Business Needs.png

Business needs that required a fix in the redesign of CentreSuite

UX Analysis of the Need

Heuristic Evaluation & Stakeholder Collaboration

We began with a collaborative heuristic analysis alongside the Product Owner, Business Analyst, and Development Lead. Our goal was to evaluate key workflows screen by screen and surface critical UX gaps across the platform. Each issue was documented against usability principles and mapped to user types and product impact.

Through this process, it became clear that many of CentreSuite’s core issues weren’t isolated UI bugs they were symptoms of disconnected workflows, unclear priorities, and outdated interactions. This led us to reframe the experience from the ground up, starting with the home screen and the most frequently used flows.

Legacy design screens

Building Solutions

Reframing the Home Experience: From Static to Strategic

The motivation behind introducing new dashboard stemmed from a clear insight: users weren’t engaging with the current homepage because it didn’t reflect how they actually used CentreSuite. Through team audits and platform usage patterns, we identified the most frequent and business-critical user behaviors.
We reimagined the home experience as a dynamic, modular dashboard built around high-usage tasks and actionable insights to support both daily workflows and at-a-glance monitoring.
 All widgets were designed to serve the needs of bank administrators, company administrators, and cardholders, ensuring value and utility for every key user type.


The widget design focused on:

  • Account Details: Displaying live financial states relevant to the user e.g., credit limit, available-to-spend balance, recent statements

  • Quick Actions: Streamlining entry points for common tasks such as locking/unlocking accounts, viewing PINs, and requesting replacement cards

  • Recent Activity: Surfacing the latest transactions with context and accessibility

  • Receipt Gallery: Enabling users to drag and drop receipts directly onto transactions

  • Manage Expense Reports: Organizing tasks by status In Progress, For Approval, and Due for Submission

  • Payment Centre: Providing quick access to payment flows without navigating through nested menus

This widget-based approach allowed us to better support a range of user roles while aligning with CentreSuite’s long-term goal of modular design and scalable platform features.

Before and after of Home Page

Scenario-Specific Flows (Accounts Module)

These flows are deeply tied to day-to-day tasks across all user types, particularly in the Accounts Module. Here's how we redesigned them for efficiency, clarity, and user control.

1. Editing a Transaction

Users: Cardholders, Company Admins
Problem: Transactions often require multiple fields to be completed (e.g., GL codes, categories, comments) before they can be added to a report. The earlier process required too many clicks and deep navigation.
Solution:

  • Users can now hover over a transaction in the Recent Activity widget

  • A visible “Edit Transaction” button opens a bottom sheet directly on the dashboard

  • All editable fields are surfaced within the sheet, making quick updates seamless

Impact: Reduced context switching; faster prep for expense reporting

User clicks on Edit Transaction (left screen) to edit in a bottom sheet (Right screen)

2. Attaching a Receipt to a Transaction

Users: Cardholders (primary), Admins (on behalf of others)
Problem: Uploading and matching receipts was confusing and disconnected. Users had to jump between multiple views and rarely knew where receipts are after upload.
Solution: Introduced a Receipt Gallery directly on the dashboard
Users can:

  • Email receipts to a secure, account-linked address files automatically appear in the gallery

  • Manually upload PDFs or images into the gallery

  • Drag and drop receipts from the gallery onto transactions in the Recent Activity widget

  • Or open the Edit Transaction bottom sheet and attach receipts there (shown in above screens)

Smart Matching Enhancement:
 As soon as a receipt is added (via email or manual upload), the system checks for transactions with matching amounts and timestamps. If a match is found, the user receives a prompt "We found a transaction that matches this receipt. Would you like to auto-attach it?"
Impact: Faster reconciliation, Reduced cognitive load, Improved attachment rates.

Image 1 shows the legacy design of receipt gallery Image 2 & 3 shows drag and drop of image from gallery to transaction directly

3. Making a Payment

Users: Company Admins
Problem: Payment workflows were lengthy, unclear, and required excessive filtering to find due accounts.
Solution:

  • A new Payment Centre widget on the dashboard highlights all accounts with due balances

  • With one click, admins enter a 2-step payment flow:
    - Select accounts and amounts to be paid
    - Choose the funding account → Review → Done

Impact: Streamlined experience, greater payment accuracy, fewer support tickets

Image 1 shows the legacy design of Make a Payment flow. Image 2-5 shows the 2 step process to make payment

Usability Testing & Validation

To validate the redesigned dashboard and scenario flows including transaction editing, receipt matching, the payment center, and other foundational tasks like login, self-registration, and password recovery, we conducted structured usability testing with real users.

1. User Interviews

I collaborated with a teammate to develop the testing questionnaire and task flows. We interviewed eight users, including both Cardholders and Bank Admins from various institutions. Participants were asked to complete key tasks using clickable prototypes, while we recorded both verbal feedback and on-screen interactions.
I facilitated the interviews, guided users through the flows, and captured spoken insights. Meanwhile, my teammate recorded click patterns, measured completion times, and gathered post-task ratings through a short survey (rated from Excellent to Poor).

Screenshot of the testing document. View full document here

2. Analysis & Synthesis (Led by Teammate)

The following analysis steps were led by my teammate, whose expertise helped shape the insights we presented back to the product team:
User Keying & Color Coding: Each participant was assigned a visual identifier for organizing their data and responses
Clicks & Timing (Quantitative): Click counts and task completion times were charted to find user friction points and overall flow efficiency
Post-task Ratings (Qualitative): Survey responses were visualized and averaged to assess perceived usability across key scenarios
Card Sorting: Interview feedback was transcribed to color-coded sticky notes and sorted by screen/flow
Affinity Mapping: These notes were grouped to identify patterns in feedback, pain points, and feature requests
Stakeholder Reporting: I helped compile and present the final usability patterns in a clear, actionable format for the product and engineering teams

Analysis and findings during and after testings

Key takeaways from the testings

  • Users appreciated the bottom sheet edit flow, especially how it reduced context switching

  • Receipt Gallery and auto-match prompt were seen as "surprisingly helpful" and intuitive

  • Admins requested clearer batch options and multi-account visibility for payments (influencing ongoing Statement Module design)

  • Overall ratings averaged between "Good" and "Excellent" for task flows across all user types

Building Solution Continues...

Beyond the dashboard, a major part of the redesign focused on the Accounts Module, which is widely used by admin-level users to manage multiple accounts, apply spend controls, and audit cardholder activity. Many of these flows were originally built on a 20-year-old system, leading to inefficiencies, outdated logic, and inconsistent UI behavior. My goal was to bring clarity, control, and simplicity to these complex operations especially for small business users and institutional admins.

1. Manage Temporary Spend Control

User: Company Admins (often in small businesses)
Context: Admins frequently apply temporary spend limits on accounts like credit limits, MCC group restrictions, or one-time purchase limits.
Old Flow Issues:

  • Hard to track which accounts had active temporary controls

  • Required multiple clicks and disjointed screens

Redesign Solution:

  • Introduced a dedicated dashboard widget that displays all accounts with active temporary controls

  • Admins can quickly edit or remove these limits directly from the widget or through the side navigation

  • With the help of a bottom sheet, users can modify controls on the go, without losing context or navigating away from the dashboard

  • Status and expiration logic is clearly surfaced for quick monitoring

Impact: Real-time visibility, reduced support load, and a smoother control experience especially for high-volume or small business users

Side by side comparison of before and after of Manage TSC control request and their Edit views

2. Update Mass Account

User: Bank & Company Admins managing many accounts
Context: Admins often need to update settings (e.g., credit limits, expiration dates) across 100s of accounts.
Old Flow Issues:

  • Required downloading an Excel template, editing it offline, and uploading it again

  • Took users completely out of CentreSuite

  • Risk of data entry errors and no real-time validation

Redesign Solution:

  • Rebuilt the workflow to be entirely in-platform

  • Users can select accounts, apply changes to specific fields (7–9 attributes), and review updates before submission

  • Inline validations and guidance reduce error risk and simplify bulk tasks

Impact: Reduced time and error rate, improved admin control without Excel dependencies

Side by side comparison of before and after of Update Mass Account flow

Summary

Upcoming Focus Areas: Just the Tip of the Iceberg 
What lies ahead goes far deeper than just a few screens. The Expense and Administration modules are rich, high-stakes environments with dozens of interdependent workflows and we’re just beginning to reshape them.

Expense Module

The most complex and frequently used area of the platform. Users will soon be able to:

  • Create and submit expense reports

  • Split and allocate transactions

  • Edit, organize, and track report statuses


...and that’s just the tip of the iceberg. This module touches everything from compliance to accounting logic and will require deep collaboration between product, backend, and UX.

Administration Module

Powerful but dated, this module serves as the control center for company and bank admins. Flows in scope include:

  • Configuring sites

  • Managing user access and hierarchies

  • Maintaining fleet accounts

  • Defining rules, roles, and workflows


These examples represent only a fraction of what’s coming. As we move into these modules, we’ll continue applying the same level of strategic UX thinking, system design, and real-user feedback to ensure every interaction is seamless, scalable, and human-centered.

All Projects

bottom of page