Designing an E-form for requesting Invoice payment.
Overview.
Users at Northeastern University are using an excel sheet for the Payment request form which should be printed and sent out to the Accounts payable department for approvals, the entire process is time-consuming and complicated, causing hindrance to the efficiency of employees. I was hired by Northeastern University to help the finance department build a new workflow and design an online form to 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
Double Diamond Approach @ Northeastern University
Discover
Define
Develop
Deliver
Contextual Inquiry
SME Interviews
Findings & Persona
User stories
Problem statements
Workflows
Usability Testing
Mockups
Need for re-design.
3 top reasons for rethinking online form
Current Form
Vendor Name - Vendor ID - Notifications on the side- Address - Invoice details- compliance check
Team: "We need to create an online version of the form"
The current form needs the user to manually do a Vlookup to find the vendor's ID.
The current form has an important message on the side of the form which may go unnoticed by a lot of users
The current form uses multiple textboxes or combined text boxes for important fields
Research.
Studying workflows, users, and product gaps
We followed a mixed-methods approach to understand product gaps, user's needs and behaviours.
Contextual Inquiries
Takeaways-
-
User needs & User behaviours
SME Interviews
Takeaways-
-
Project Goals
-
Workflows & Interactions
-
Usability issues
Project Goals.
One-stop-shop service
Build a one-stop-shop service for all types of invoice payments by creating an online form that provides an option to make multiple types of payments
Implement a user-friendly experience that provides transparency into the status of a request and the ability to look back at the historical transactions
Transparency in transactions
Eliminate Manual work
Automate invoice process to eliminate the need to print paper signing forms offline and manually create banner transactions
Top findings.
What did we know about our users and product?
Three user types were identified from user research based on the user tasks.
End user
Head of department
Accounts payable member
Can be faculty, staff or student who submits the form and requests for invoice payments
Is the head of the department, to whom the submitter reports to. She is the one who approves the request initially and forwards it Accounts payable department.
She is responsible for the visual compliance check and then entering the details into the university's banner to maintain records and later approves the payments
# Insight 1
Lack of efficiency
The form is heavily based on text fields and lacks accelerators.
# Insight 2
Lack of scalable design
The current design does not support the addition of new features like automated vendor ID search which confines the usability.
# Insight 3
Inclusivity
The form is not optimized for those with low technical knowledge ( A vlookup is not an ideal solution for a Literature professor)
# Insight 4
Too much manual work
The form is to be printed out and then sent for approval, in case of disapproval or any issues the entire process must be repeated (do a vlookup for vendor id, fill the form, print it out, and then send it again)
# Insight 5
Lack of Transparency
The current flow does not support transparency of the status of the request. user are left with no information about the request once they send the form to accounts payable
User Stories
As the end-user, I would like to quickly submit the request form and be able to see the status of my request so that I can know if my request has been approved, if not, to know what is the issue for its disapproval
As the Head of the department, I would like to have an online system set-up so that I can provide immediate feedback to the requestor if they have to make any changes to the form
As a staff of Account payable, I want a process for entering only important details into the banner and avoid all minor things which can be automated so that I can focus on compliance check and ensure there won't be any discrepancies
Concept and Design.
Ideation, workflows, design guidelines and mockups
Approach to the solution
If the form is integrated with the Banner ERP
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
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
Proposed Workflow
Based on the feedback from stakeholders, we combined the form and Banner ERP into one concept and generated workflows.
.png)
Design Guidelines.
A set of design principles to guide decisions
Less is more
Leave enough white space around areas so each section clearly catches a user’s eye. By keeping it simple we will improve the overall user experience.
Speak simply
When it comes to forms, we all prefer plain language – even the academics amongst us, the geniuses, and the experts.
Assistance or Validation
Use assistance and inline validation, the aim here is to illuminate users as to what they need to do or point out where and how the user went wrong.
Mockups.
Notification
Pop-Up notification to notify users of the limit for using the Form
No more Vlookup
Vendor Details with Vendor ID search that pulls information from Vendor Directory
Eliminating Text boxes
To reduce the complexity of the form, we included Add more option, in case a user has more than one payment
Confirmation
A confirmation notification that provides transparency to the user for future reference
UI Specification 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.
Usability Testing.
I conducted usability 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.
