Designing an E-form for requesting Invoice payment.
Project Overview
The objective of the project is to help the finance department build a new workflow and to automate the invoice process which helps improve the work efficiency, eliminate potential errors, and optimize the manual work process.
Role
UX designer
-
Help Project manager to define features
-
Conduct usability research
-
Defining Workflow
-
Visual and interaction design
-
Development collaboration
Stakeholders
-
Finance Management team
-
Project Manager
-
Development team
-
Accounts Payable staff
Duration
16 weeks
The Challenge
Northeastern University has a very complicated and disorganized Invoice processing system. Few challenges that were mentioned by the Finance department and the end-users are.
-
The invoice requesting process is still paper-based
-
Use of different forms for different methods of payment
-
No transparency into the status of the payment request
Project goals
-
Build a one-stop-shop service for all types of invoice payments
-
Automate invoice process to eliminate the need to print paper signing forms offline and manually create banner transactions
-
Implement a user-friendly experience that provides transparency into the status of a request and the ability to look back at the historical transactions
Design Research
I met with different sub-departments in the finance dept. to learn how the invoice payment and processing system works. I got an opportunity to understand the perspectives of different stakeholders on the existing system which helped me to create a detailed workflow of the existing system.
Workflow
Takeaways
After meeting with the different stakeholders I got an idea of the areas in which needed to be changed
1. The Invoice is a hard copy and the requestor needs to send a hard copy for the Payment request as well.
2. Users have no idea of why their request has not been approved
3. If rejected the requestor has to go through the entire manual process again
4. Finance Department has to manually enter the details into the Banner payment system
Invoice Payment Requesting form
Faculty and staff fill this form, print it out, and send it to the accounts payable team to complete their invoice payments. I conducted user interviews with the end-users ( people who this form) to understand what they difficulties are the users facing with the form.
Key takeaways from user interviews
The user needs to manually do a Vlookup to find the vendor's ID.
Important message on the form may go unnoticed by a lot of users
Use of multiple textboxes or combined text boxes for important fields
How might we simplify the invoice processing system without the need for paper?
Approach to the solution
I conducted multiple meetings with the Accounts Payable Department and End-users to learn their pain points, during these sessions, we evaluated the current processing system and defined a new workflow. From the insights I got from the meetings, I developed several hypotheses, the ones that got the stakeholder buy-in are
If the form is integrated with ERP
Manual lookup for information can be eliminated as required information will be auto-populated.
Automated notifications will be sent defining the status of the request
It can speed up the process as well, including Vendor profile, payment system data, and potentially even previous invoice submissions
New Workflow
I have already done some upfront User Research which has given me a good place to start. I brought in internal experts and current users to answer some questions. I run them through the new workflow to validate if I are heading in the right direction.
.png)
E-form Design
Due to the form’s high complexity and extensive inputs, the old form had a high abandonment rate. To solve this problem, I split the form into multiple steps. By grouping related information and ordering the form logically, from my observations I understood that users really struggled to add the Vendor Information, I solved this by adding search option and integrating the form into the vendor database, I included pop-up notification for important messages and designed the form as simple as possible.
Pop-Up notification to notify users the limit for using the Form
Vendor Details with Vendor ID search that pulls information from Vendor Directory
To reduce the complexity of the form, we included Add more option, incase user has more than one payment
A confirmation notification that provide transparency to user to for future reference
UI Spec Documentation
I was also responsible to create an additional document for developers explaining the interactions of the form, I used sheets to provide the details of each section of the form, and explained how the interactions work.
User Testing
I conducted user testing with different teams including Account's payable team, the compliance team, and the end-users. The new version of the process and the form needed to be tested and verified. I came up with a testing strategy and created a supporting document to perform the user-testing successfully. The following are scenarios that were validated while testing Invoice Automation.
Reflection
I was incredibly lucky to have the opportunity to work with and learn from one of the best departments at Northeastern University. This project really taught me just how fun and rewarding it can be to work on diverse projects. Communicating all of our ideas clearly and concisely, to the leadership while honoring the work we put into the project was a huge learning moment.