< PROJECTSOverview
Background
Process
User Research
User Personas
Current Analysis
User Flow
Design Iteration
Responsive Design
Usability Testing
Style Guide
Solution
Learnings
This is a self serving payment solution platform for Mass Transit Railway (MTR) and their suppliers to increase efficiency and reduce payment error.
MTR, client of Bindo Labs, is Hong Kong's public transport network serving 7 million people.
MTR, client of Bindo Labs, is Hong Kong's public transport network serving 7 million people.
Timeline
3 months
3 months
Tools
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
Tools
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)
The problem
Our solution
How might we reduce manual labor for MTR staff, ultimately decreasing invoice processing error rate and ensure timely payments to suppliers?
MTR Payment Terminal is a payment terminal dashboard streamlining invoice payments between Mass Transit Railway (MTR) stations and their suppliers. The platform increases efficiency and lowers processing error/delay rate by 60% for MTR finance staff.
User Research
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.
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.
Current Flow Analysis
Errors often come from information misplacement, bank wire delay/failure.
User Flow
New and improved flow
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
Information Architecture
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 revealed users highly value the ability to sort, locate, and track invoices.
Search Details
Filter Bar
Create Quick Invoice
Users prefer simplicity with minimal steps.
Distilling Essential Information
Shortened Form
Responsive Design
I prioritized responsive design to ensure accessibility for suppliers.
Payment Authorization
Invoice payment history: settled, voided, refunded, archive
Invoice overview
Create Quick Invoices: submit invoice information to receive payments
What users value:
Style Guide
With engineering constraints, I leveraged and scaled from Bindo Labs' design system, ensuring seamless integration with the internal payment solution dashboard.
Impact:
68.4% decrease in invoice processing error / delay rate.
68.4% decrease in invoice processing error / delay rate.
Upload New Quick Invoice
Users directly upload invoices, eliminating issues (misplacing paper copies and preventing goods/invoice mismatches) during the manual authorization process.
Submit for Payment
Self-initiate payments using MTR's account information for accuracy and efficiency. MTR avoids inputting various suppliers' account information.
Filtering
Invoice Tracking: Status + History
