Can fraud be prevented with a chat app?
A WeChat-integrated app was meant to help Chinese businesses comply with government regulations, but no one was using it…
Context
SAP Concur x WeChat | Mobile App Design | 2022-2023
Worked with Support Designer, Project Manager, UX Researcher, Copywriter, Development Team.
Fapiao are a specialized tax receipt that must be verified by China’s government database to check for fraudulent transactions & provide tax benefits.
SAP Concur Travel & Expense has a WeChat mini-app to submit fapiao to Concur expense reports. Despite being created for Chinese users specifically, adoption was still very low.
Determined KPIs
1
Easy: Users easily transfer receipts & e-Fapiaos from merchants to Concur with minimal errors.
2
Accurate: claims are automatically cross-checked with validated e-Fapiaos, reducing possibility for human error.
3
Fast: No need to print & attach physical receipts, significantly reducing time and cost of filing expenses.
What do Chinese users need?
1
Large screen real estate
Tend to use web for easy data entry on a bigger screen. Forms can be long and text can be small on many mobile devices.
2
Phone is only for taking photos
Use their phone to scan printed receipts & fapiao. For e-fapiao in their WeChat wallet, they would export a PDF to upload via their computers.
3
Directly connects to banking
Would rather have an integrated solution that connects to their corporate card and banking apps with automatic entry.
I built a persona and user journey to determine the best touch points for our mini-app.
Persona Diagram for our primary user, Chinese professionals that travel often for work.
Watching the WeChat mini-app at work
I sat in with our UX researcher to conduct a usability study with 5 Chinese users from various industries.
“Imagine you are back from a business trip in Beijing and creating your expense report to get reimbursed for your trip.
You are using the mini-app to upload Fapiaos and attachments. Please add the flight ticket, train ticket, lunch Fapiao (in gallery) & receipt, Taxi Fapiao (in WeChat wallet) to mini app, and then submit it in a report.”
Making things easy
PROBLEM
The camera and scanner provided no guidance.
Fapiao only use QR codes for verification, but users were unsure if they had to scan the QR code or the barcode.
Users would also often try to scan barcodes or unrelated QR codes and became easily frustrated when the app didn’t respond.
SOLUTION
So I added a square view to imply only QR codes are scannable.
Old barcode scan vs. Improved screen.
SOLUTION
I also added a modal to prevent users from scanning non-fapio QR codes.
Improving accuracy
Left: Fapiao is missing required receipt attachment. Right: Button to attach receipt is hidden in an action menu.
PROBLEM
Required but not discoverable actions.
Fapiao always come with a regular receipt, and companies often require both documents.
Users did not know they had to ‘attach’ a receipt to a fapiao for them to be submitted together.
SOLUTION
Bring attention to attachments.
I added banners and tool tips to guide users to the attachment flow.
In the future, when the team got more development resources, attachments would be a required field only for companies that need it.
If the scanner was unable to read the fapiao, it would show a generic error banner.
PROBLEM
Hitting dead ends.
Users could understand the error messages they received, but did not know how to resolve their issues without assistance.
SOLUTION
Specific error messaging & guidance.
Exponentially increasing speed
After scanning 5 fapiao, two had errors, but it was unclear which ones.
PROBLEM
What was meant to speed things up was slowing things down.
We implemented the ability to scan multiple fapiao at once. But if they ran into an error, the app would not direct them to which fapiao in the image was invalid.
This caused them to take extra time to read the fapiao and compare it to the list item.
SOLUTION
Show a preview of the fapiao with the line item to easily distinguish between them.
SOLUTION
Visual indications of which fapiao were acceptable and which had warnings or errors.
Iterations of how the visual indicators for multi-scanned fapiao would look. In the end we chose the top middle, which balanced clarity and development effort.
Since 2021, 16+ enterprise customers in China have launched the mini-app.
The mini-app helps process over 100k fapiao transactions per month, which is nearly double the amount on first release.
What’s next?
1
Improved APIs allowing us to scan a wider variety of fapiao.
2
Utilize AI & machine learning to identify fapiao and receipts and auto-fill required data. Users will be able to take a simple picture of all receipts and fapiao from a trip, and the system does the rest.
Phoebe Lim
Based in Vancouver, Canada
Currently open to new opportunities.
pjoylim@gmail.com