Back to Portfolio
Overview
Background
Problem StatementDesign Process
User Research
User Personas
Current Analysis
User Flow
Design Iteration
Responsive Design
Usability Testing
Style Guide
Final Solution
Learnings
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%.
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
3 months
Tools
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/64aa3534096cb138260205cd_62c6bc3deee9410fe137d920.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6549cb6b73ecf004e946ed1b_confluence-logo-D9B07137C2-seeklogo.com.png)
Skills
Prototyping
Qualitative data
User personas
User flow
A/B testing
Responsive design
Design spec
Style guide
Ship/implementation
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)
Victoria Liang (UXD)
Giang Ong (UXD)
Sam Yeung (PM)
Jolene Zhao (PM)
Haidi Liu (Dev)
Xiongbin Mao (Dev)
Jason Ngan (Stakeholder)
Role
Lead UX Designer
Lead UX Designer
Timeline
3 months
3 months
Tools
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/64aa3534096cb138260205cd_62c6bc3deee9410fe137d920.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6549cb6b73ecf004e946ed1b_confluence-logo-D9B07137C2-seeklogo.com.png)
Skills
Prototyping
Qualitative data
User personas
User flow
A/B testing
Responsive design
Design spec
Style guide
Ship/implementation
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)
Victoria Liang (UXD)
Giang Ong (UXD)
Sam Yeung (PM)
Jolene Zhao (PM)
Haidi Liu (Dev)
Xiongbin Mao (Dev)
Jason Ngan (Stakeholder)
Company
Context
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.
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
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
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658b52289f0ba90baf3f6a1a_MTR%20Problem%20Statement.png)
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:
Based on qualitative data our UXR team gathered by speaking with MTR suppliers, I synthesized the following 3 types of users:
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/654c194694751dfdf865f4b0_MTR%20User%20Research.png)
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.
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.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658a1412968a859c7b9183f1_MTR%20User%20Personas.png)
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.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658a163c111941704545261c_MTR%20Current%20Product%20Analysis.png)
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
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658a17fa6be41e89a3b92a8c_MTR%20Previous%20User%20Flow.png)
New and Improved Flow
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658a1823205fdc3745f38b40_MTR%20New%20User%20Flow.png)
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.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658b91cbe4a7e50a9a21d186_MTR%20End-to-End%20Flow.png)
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
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d5fe44b73d75dd32a6bf8_MTR%20Invoice%20Filtering%20Tab%20Iteration%201.png)
Adding a Filter Bar
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d600a4d452c3f9c70a9a9_MTR%20Invoice%20Filtering%20Tab%20Iteration%202.png)
Create Quick Invoice
Users prefer simplicity with minimal steps. Therefore, it was crucial to ensure a concise flow in the design.
Distilling Essential Information
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d64e4fad6a31f9d46be04_New%20Quick%20Invoice%20Iteration%201.png)
Shortening the Form
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d68454fae3b2226115b5a_New%20Quick%20Invoice%20Iteration%202.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/654c1b73d7927473aed05031_MTR%20Iteration%20Desktop.jpg)
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.
Users request for payment by putting in MTR's card information.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658e3dcb64467c5d8bf0df11_MTR%20Responsive%201.png)
Invoice Payment History
Users can view if payments were settled, voided, refunded, and more.
Users can view if payments were settled, voided, refunded, and more.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658e3dd3f628421e03492861_MTR%20Responsive%202.png)
Invoice Overview
Users see all ongoing and past invoices with statuses on the homepage.
Users see all ongoing and past invoices with statuses on the homepage.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658e3ddc005946f4a6210f52_MTR%20Responsive%203.png)
Create Quick Invoices
Users submit new invoice information to receive payments.
Users submit new invoice information to receive payments.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658e3de4005946f4a62113b5_MTR%20Responsive%204.png)
Payment Statuses
Feedback screens indicate the status of payments, including success, failure, void, or refund.
Feedback screens indicate the status of payments, including success, failure, void, or refund.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658e3dec32cb3de9f0474198_MTR%20Responsive%205.png)
Usability Testing
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/659434cb72e822a1820e1087_MTR%20Usability%20Testing.png)
User Feedback
Based on usability testing insights, I concluded our users value:
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/659434304aac925284c86397_MTR%20User%20Feedback%201.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6594343b4b62e2696ec5f923_MTR%20User%20Feedback%202.png)
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.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6589f48458b3e7ed394e3c08_MTR%20Style%20Guide.png)
KPI Impact
68.4% decrease in invoice processing error / delay rate.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/65500042dd598ef6fc34c103_MTR%20KPI%20Impact.png)
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.
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.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/64272b623b834faf619b290c_MTR%20Moto%20Payment.png)
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.
Usability Heuristics: Recognition rather than recall.
Using colors for statuses helps users recognize invoices more easily.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/620c2917e3d6ed2569adfd36_Status.jpg)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/620c3c70d2f5fc68dabac085_Screen%20Shot%202022-02-15%20at%205.51.01%20PM.jpg)
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.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d53cac7d6a88a82d52ff1_Refund.png)
Refund
◦ Invoice status: "Refunded" and ◦ Payment status: "Fully Refunded" or "Partially Refunded"
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/620d484169ec939cfda9f4ae_Partial%20Refund%20Payment.jpg)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d53d31815cdd2c2513f1e_Void.png)
Void
◦ Cancel invoice/order if no longer needed by MTR.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/620d4b1169ec9327e2aa11d2_Void%20payment.jpg)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d53e10c962446523419ff_archive.png)
Archive
Hiding invoices from history.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658d5418ef485db1d66b89b2_MTR%20Learnings.png)