Back to Portfolio
Overview
Background
Problem StatementDesign Process
     User Research
     User Personas
     Problem Statment
     Current Analysis
     User Flow
     Design Iteration
     Responsive Design
     Usability Testing
     Style Guide
Final Solution
Learnings

Bindo Labs x Mass Transit Railway Payment Terminal

I led and shipped (Oct 2021) payment terminal dashboard designs to streamline invoice payments between Mass Transit Railway (MTR) stations and their suppliers.

MTR Payment Terminal is a platform for suppliers to upload invoices and get paid using the MOTO payment method while reducing manual labor for MTR finance department staff and processing error/delay rate.

Shipped in October 2021 and reduced invoice processing error rate by 60%.
Timeline
3 months
Tools
Skills
Prototyping
Qualitative data
User personas
User flow
A/B testing
Responsive design
Design spec
Style guide
Ship/implementation

Team
Victoria Liang (UXD)
Giang Ong (UXD)
Sam Yeung (PM)
Jolene Zhao (PM)
Haidi Liu (Dev)
Xiongbin Mao (Dev)
Jason Ngan (Stakeholder)

Background

Company
Context
Bindo Labs is a Leading firm for POS and payment solutions in Hong Kong.

Mass Transit Railway (MTR), client of Bindo Labs, is Hong Kong's major public transport network serving the 7 million people. Their suppliers maintain the functionality of stations.

Business
Requirement
MTR came to Bindo Labs in hopes of finding a payment solution to reduce invoice payment error rates and increase work efficiency.

Problem Statement

How Might We

Design Process

User Research

I collaborated with the UXR team in meetings to put together the testing plan and brainstorm topics and questions I had. I wanted to understand who are the users, their pain points and how they would want to improve the current process.

Based on qualitative data our UXR team gathered by speaking with MTR suppliers, I synthesized the following 3 types of users:

Supplier Commonalities

1. Middle aged, not extremely tech savvy but can work on a computer.
2. Concerned for amount of unnecessary and mundane manual work, leaving gaps for human errors and delayed payments.
3. Have multiple clients / invoices to keep track.
4. Desire for simplicity and straightforwardness.


These findings guided the Payment Terminal designs for it to be self serving, reduce unnecessary labor and ensure efficient / timely / accurate payments.

User Personas

With the above information, I created user personas to better address the project scope and guide my user flow explorations and iterative designs.

Problem Statement

Current Process Analysis

Analyzing the current manual process informed me that errors often come from information misplacement, bank wire delay/failure due to information input error, and more.

User Flow

New and Improved Digitalized Process

Letting the suppliers take charge in uploading all documents via a central, digitized location accessible by MTR eliminates many potential errors.
Previous Manual Flow
New and Improved Flow

End-to-End User Flow:
Invoice Submission and Processing

This flow indicates all the actions and paths suppliers (users) can take when navigating this payment terminal submitting new invoices to editing invoice submissions to tracking invoice statuses to viewing / editing invoice histories and more.

Design Iteration

Through continuous iteration based on internal and user feedback during the design process, I refined specific features to improve usability for users.
Invoice Filter Tabs
A/B testing on invoice filter tabs revealed that users highly value the ability to swiftly sort through invoices to locate specific invoices or tracking the invoice completion statuses.
Searching with Details
Adding a Filter Bar
Create Quick Invoice
Users prefer simplicity with minimal steps. Therefore, it was crucial to ensure a concise flow in the design.
Distilling Essential Information
Shortening the Form

Responsive Design

I prioritized responsive design, ensuring accessibility for suppliers in varied conditions, . Users can access the platform seamlessly from both desktop and mobile devices.
Payment Authorization
Users request for payment by putting in MTR's card information.
Invoice Payment History
Users can view if payments were settled, voided, refunded, and more.
Invoice Overview
Users see all ongoing and past invoices with statuses on the homepage.
Create Quick Invoices
Users submit new invoice information to receive payments.
Payment Statuses
Feedback screens indicate the status of payments, including success, failure, void, or refund.

Usability Testing

User Feedback
Based on usability testing insights, I concluded our users value:

Style Guide

To address engineering constraints, I optimized the MTR payment terminal's design by adapting and scaling an existing style guide. This approach involved leveraging assets, components, colors, and typography from Bindo Labs' internal design system, ensuring seamless integration with the internal payment solution dashboard.

Final Solution

KPI Impact
68.4% decrease in invoice processing error / delay rate.

Upload New Quick Invoice

Users can directly upload invoices on the platform, eliminating issues like misplacing paper copies and preventing goods/invoice mismatches during the manual MTR authorization process.

Submit for Payment

Enabling users to self-initiate payments using MTR's account information reduces the risk of payment method input errors. This eliminates the need for MTR to input various suppliers' information for payments.

Payment Process

Payments are authorized by MTR only after manual approval of invoices, minimizing their manual labor to inspection for payment authorization. Invoice and payment flows are digitized and/or automated for streamlined processes working in conjunction with minimal manual portions.

Usability Heuristics
: Visibility of system status.
Giving immediate feedback on whether or not an action was successful lets user know what the next steps are.

Filtering

A/B testing revealed that suppliers find a filtering bar and "Exact Search" very valuable for efficiently managing numerous invoices for MTR. This addresses the challenge of handling invoices in various processing states.

Invoice Tracking: Status + History

To enhance financial documentation, users access detailed overviews of invoice contents, states, and histories.

Invoice and Payment Statuses

Organizing invoice and payment statuses systematically provides users with clear progress tracking and facilitates filtering functions. This eliminates ambiguity for users regarding the timing of their payment receipts.

Usability Heuristics: Recognition rather than recall.
Using colors for statuses helps users recognize invoices more easily.

Additional Invoice Action Items

Suppliers express the need for diverse invoice organization options in the Payment Terminal, emphasizing its role in helping them track and manage MTR invoices effectively.
Refund
◦ Invoice status: "Refunded" and ◦ Payment status: "Fully Refunded" or "Partially Refunded"
Void
◦ Cancel invoice/order if no longer needed by MTR.

Archive
Hiding invoices from history.

Learnings

< Nav.It: Emergency Fund + SavingsNav.it: Financial Journey >